Vue.js watch监视属性知识点总结
更新时间：2019年11月11日 08:12:18 作者：---空白---
在本篇文章里小编给大家分享的是关于Vue.js watch监视属性的相关知识点内容，需要的朋友们学习下。
这个属性用来监视某个数据的变化，并触发相应的回调函数执行
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，则属性名需要用引号包裹起来
<body>
<div id="app">
<p>{{name}}</p>
<button @click="test">修改wife.name</button>
<button @click="test2">修改wife</button>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data: {
name: '郭靖',
age: 20,
wife: {
name: '黄蓉',
sex: '女'
}
},
watch: {
//监听wife中的name属性
'wife.name'(newVal,oldVal){
console.log('wife.name发生了改变')
},
//监听wife
'wife'(newVal,oldVal){
console.log('wife发生了改变')
}
},
methods:{
test(){
this.wife.name = "'黄帮主'"
},
test2(){
this.wife = {name:'我不是黄蓉',sex:'women'}
}
}
})
</script>
运行结果表明，无论是他父级对象的值发生了改变，还是它本身的值发生了改变，都会使这个监视属性的回调函数执行。
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监视属性的全部知识点，感谢大家的学习和对脚本之家的支持。
相关文章
父子组件传递数据时,使用的是props和emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传很多次,会很麻烦,这篇文章主要介绍了vue3中 provide 和 inject 用法,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue.js组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了Vue 使用中的小技巧,是小编日常开发的时候用到的小技巧，需要的朋友可以参考下2018-04-04
这篇文章主要给大家介绍了基于vue+electron实现文件下载打开wps预览,文中有详细的代码示例供大家借鉴参考,感兴趣的同学可以参考阅读下2023-08-08
react+vite动态导入报错@vite-ignore的问题及解决
这篇文章主要介绍了react+vite动态导入报错@vite-ignore的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了前端Vue自定义地址展示地址选择地址管理组件的示例详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
在vue3中组件传参有很多种方式,和v2大差不差,但是有的地方还是有很多的区别,下面这篇文章主要给大家介绍了关于Vue3中defineProps用法的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue.js的手脚架vue-cli项目搭建的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,下面这篇文章主要给大家介绍了关于降低vue-router版本的2种解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
vue-image-crop基于Vue的移动端图片裁剪组件示例
这篇文章主要介绍了vue-image-crop基于Vue的移动端图片裁剪组件示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论