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精华代码集
Jan 24 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
页面使用密码保护代码
Apr 10 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
vue实现路由切换改变title功能
May 28 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
详解Vue2的diff算法
Jan 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实现加强版加密解密类实例
2015/07/29 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
js实现动态时钟
2020/03/12 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
python方向键控制上下左右代码
2018/01/20 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
全民健身日活动方案
2014/01/29 职场文书
食品业务员岗位职责
2014/03/18 职场文书
活动总结报告格式
2014/05/09 职场文书
见习报告格式范文
2014/11/08 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers