详解vue2 $watch要注意的问题


Posted in Javascript onSeptember 08, 2017

使用$watch监听的时候,监听的数据是一个对象的时候,要注意几点:

监听组件内某个对象里面的某项属性时,不要监听对象,直接监听对象里面的属性(深度监听),只有直接监听这个对象里面的属性,只更新对象里面的属性时也能直接监听到此数组的变化。

data(){
return {
msgs : {
list:[1,2,3]
}
}
},
watch:{
msg(newVal,oldVal){
console.log(newVal);//(1)
},
"msg.list":function(newVal,oldVal){
console.log(newVal)//(2)
}
},
mounted(){
this.$set(this.msg,"list",[1,2,3,4]);//(1)不会打印,(2)会打印
this.$set(this,"msg",{list:[1,2,3,4]}//(1)会打印,(2)会打印
}

数据驱动基于Object.defineProperty()这个功能进行实现,在vue中的数据对象就用树来表示,树的每一个叶子节点都会用Object.defineProperty()来定义get/set方法,而在set方法执行的时候会执行watch方法,实现数据的监听。

我们可以监听树的任一叶子节点,当叶子节点数据发生变化的时候,会执行此叶子节点中监听的方法,同时下级以及下下级甚至更下级的叶子节点的监听方法也会执行(前提是对应的叶子节点数据也有改变).

如下

data(){
 return {
msgs:{
list:[1,2,3],
msg:'1'
}
 }
},
watch:{
msgs(newVal,oldVal){
console.log(newVal);//(1)
},
"msgs.list":function(newVal,oldVal){
console.log(newVal)//(2)
}
"msgs.msg":function(newVal,oldVal){
console.log(newVal)//(3)
}
},
mounted(){
//下面的例子一个一个实验,不要放在一起运行,会造成结果错误。当然也可以自己验证如何放在一起也能验证下面的结果是正确的。

this.$set(this.msgs,"list",[1,2,3,4]);//(1)(3)不会打印,(2)会打印
//分析:这个是更新msgs树中list叶子节点的数据,会触发到 “msgs.list”的监听方法,从而(2)被打印
this.$set(this,"msgs",{list:[1,2,3,5]});//(1)(2)(3)都会打印
//分析:这个是更新msgs中的根节点的数据,会触发“msgs”的监听方法,因根节点下面还有子节点,会继续往下遍历,发现list节点的数据也随之改变,由[1,2,3]=>[1,2,3,4],触发了“msgs.list”的监听方法,同理msg节点的数据从 "1"=>"undefined",也会触发“msgs.msg”的监听方法,所以(1)(2)(3)都会打印。
this.$set(this,"msgs",{list:[1,2,3,4],msg:"1"});//(1)(2)会打印,(3)不会打印
//分析:这个与上面不同的是msg节点的内容并没有改变,一直都是“1”,所以不会触发“msgs.msg”的监听方法,所以(3)没有打印,(1)(2)都会打印
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
详解TypeScript中的类型保护
Apr 29 Javascript
JavaScript 数组去重详解
Sep 15 Javascript
Express + Session 实现登录验证功能
Sep 08 #Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 #Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 #jQuery
JavaScript实现开关等效果
Sep 08 #Javascript
浅谈React Native 中组件的生命周期
Sep 08 #Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 #Javascript
关于Ajax的原理以及代码封装详解
Sep 08 #Javascript
You might like
php截取中文字符串不乱码的方法
2013/12/25 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
Laravel 5 学习笔记
2015/03/06 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
Python判断字符串与大小写转换
2015/06/08 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
python列表的常用操作方法小结
2016/05/21 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
超市开业庆典策划方案
2014/05/14 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
收入证明怎么写
2015/06/12 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
Python pandas求方差和标准差的方法实例
2021/08/04 Python
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
Python函数式编程中itertools模块详解
2021/09/15 Python
浅谈Vue的computed计算属性
2022/03/21 Vue.js