vue watch监听对象及对应值的变化详解
时间:2019-04-13
本文章向大家介绍vue watch监听对象及对应值的变化详解,主要包括vue watch监听对象及对应值的变化详解使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
如下所示:
var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听,可监听到对象、数组的变化 handler(val, oldVal){ console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的 }, deep:true } } }) vm.a=2 vm.b.c=2
a是一个普通的值,当a的值变化时会被监听到,b是一个对象,不能直接像a那么写,需要深度监听才能捕捉到,但是当我想去捕捉b对象中某一个值的变化时却发现,打印出来的两个值是不一样的,如图:
这样就只能知道对象发生变化却不知道具体哪个值发生了变化,如果想监听对象某一个值得变化可以利用计算属性computed
var vm=new Vue({ data:{ b:{ c:1 } }, watch:{ newValue(val, oldVal){ console.log("b.c: "+val, oldVal); } }, computed: { newValue() { return this.b.c } } }) vm.b.c=2
用watch去监听computed计算过的值就可以直接知道是哪个对应的值发生了变化,结果如图:
以上这篇vue watch监听对象及对应值的变化详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux本机与服务器文件互传及Linux服务器文件上传下载命令写法
- linux利用read命令获取变量中的值
- 解决Centos7 安装腾达U12无线网卡驱动问题
- CentOS 6.5上编译安装Apache服务器的方法(最小化安装)
- 固定QPS压测模式探索
- Centos6 网络配置的实例详解
- centos6.5升级安装配置supervisor的教程
- Linux的路由表详细介绍
- Centos7.3下vsftp服务的安装方法
- 详解Linux 安装 JDK、Tomcat 和 MySQL(图文并茂)
- 浅析Linux root设置初始值的方法
- 详解 Linux中的关机和重启命令
- 数据分析入门系列教程-KNN原理
- Selenium自动化的JUnit参数化实践
- linux云主机安装pdo详细教程