vue watch普通监听和深度监听实例详解(数组和对象)


Posted in Javascript onAugust 16, 2018

下面通过一段代码给大家介绍vue watch的普通监听和深度监听,具体代码如下所示:

var vm=new Vue({ 
 data:{ 
 num:1, 
 obj:{ 
 name:'三儿', 
age:'21', 
sex:'女' 
} 
 }, 
watch:{ 
 num(val, oldVal){ 
 //普通的watch监听 
console.log(“num: “+val, oldVal); 
 }, 
 obj:{ 
 //深度监听,可监听到对象、数组的变化 
handler(val, oldVal){ 
 console.log(“obj.name: “+val.name, oldVal.name); 
 }, 
 deep:true 
 } 
 } 
 }) 
 vm.num=2 
 vm.obj.name='二儿'

 下面单独给大家介绍下vue-watch 深度监听

 watch:{} 对象,可监听数据,数据发生变化, 处理函数

目的: watch虽可监听,但只是浅监听,只监听数据第一层或者第二层,

何为第二层?

 let obj = {name: 'xx', child: {age: 11}};

  child之后的值就为第二层或者深层

实现目标: 如果 要监听一个对象中的属性,属性最高也是第二层了,watch可能监听不到,

  所有要使用深度监听:

实现代码:

watch: {
' user.phone ' : {
handel:function() {  //特别注意,不能用箭头函数,箭头函数,this指向全局
处理函数
},
deep: true  //深度监听
}
}

总结

以上所述是小编给大家介绍的vue watch普通监听和深度监听实例详解(数组和对象),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 #Javascript
JS实现的RC4加密算法示例
Aug 16 #Javascript
vue2.0父子组件间传递数据的方法
Aug 16 #Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 #Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 #Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 #Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 #Javascript
You might like
基于mysql的论坛(2)
2006/10/09 PHP
php面向对象的方法重载两种版本比较
2008/09/08 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
PHP模块memcached使用指南
2014/12/08 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
layui的select联动实现代码
2019/09/28 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
在Python中COM口的调用方法
2019/07/03 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
python与pycharm有何区别
2020/07/01 Python
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
好的自荐信的要求
2013/10/30 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
个人近期表现材料
2014/02/11 职场文书
关于召开会议的通知
2015/04/15 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书