Vue.js中watch监视属性知识点的示例分析-创新互联
这篇文章主要介绍Vue.js中watch监视属性知识点的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联拥有十多年成都网站建设工作经验,为各大企业提供成都网站设计、网站制作服务,对于网页设计、PC网站建设(电脑版网站建设)、重庆APP开发、wap网站建设(手机版网站建设)、程序开发、网站优化(SEO优化)、微网站、空间域名等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了很多网站制作、网站设计、网络营销经验,集策划、开发、设计、营销、管理等网站化运作于一体,具备承接各种规模类型的网站建设项目的能力。这个属性用来监视某个数据的变化,并触发相应的回调函数执行
1.基本用法
(1)添加watch属性,值为一个对象。对象的属性名就是要监视的数据,属性值为回调函数,每当这个属性名对应的值发生变化,就会触发该回调函数执行
(2)回调函数有2个参数:
newVal:数据发生改变后的值
oldVal:数据发生改变前的值
var vm = new Vue({ el:'#app', data: { name: '郭靖' }, watch: { name(newVal,oldVal){ console.log('name的值发生了变化') console.log(newVal,oldVal) } } }) vm.name = "郭大侠" // 执行这行代码,会触发对应的回调函数
执行结果:
name的值发生了变化 郭大侠 郭靖
2.监听对象内部属性的变化
前面的例子只是监听data中的第一层数据,如果要监听多层次的数据,例如a.b.c,则属性名需要用引号包裹起来
{{name}}
运行结果表明,无论是他父级对象的值发生了改变,还是它本身的值发生了改变,都会使这个监视属性的回调函数执行。
3.监听路由变化
提示:路由的路径信息保存在$route.path中
watch:{ '$route.path':function(newval){ console.log('change') } }
4.深度监听
监视属性只能监听到当前对象值的变化,而对象内部的属性变化不会监听到,前面我们监听了wife和wife.name,修改了wife.name并不会触发监听wife的回调函数。
想要监听对象内部的属性值变化,需要进行相应的配置。
deep:深度监听,默认false
handler:回调函数
immediate:页面初始化时是否触发回调,默认false
var vm = new Vue({ el:'#app', data: { name: '郭靖', age: 20, wife: { name: '黄蓉', sex: '女' } }, watch: { wife:{ deep:true, handler:function(newVal,oldVal){ console.log('value is change') }, immediate:true } } }) vm.wife.name = '黄帮主' // 触发wife属性对应的回调
以上是“Vue.js中watch监视属性知识点的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前名称:Vue.js中watch监视属性知识点的示例分析-创新互联
文章分享:http://myzitong.com/article/djpjeh.html