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 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
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
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
javascript Window及document对象详细整理
2011/01/12 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
js style动态设置table高度
2014/10/21 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
npm的lock机制解析
2019/06/20 Javascript
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Python数据操作方法封装类实例
2017/06/23 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
个人自我鉴定范文
2013/10/04 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
求职自我评价怎么写
2015/03/09 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
开网店计划分析
2019/07/30 职场文书
Python中常见的导入方式总结
2021/05/06 Python
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android
python计算列表元素与乘积详情
2022/08/05 Python