(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的值发生了变化
郭大侠 郭靖
前面的例子只是监听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>
运行结果表明,无论是他父级对象的值发生了改变,还是它本身的值发生了改变,都会使这个监视属性的回调函数执行。
提示:路由的路径信息保存在$route.path中
watch:{
'$route.path':function(newval){
console.log('change')
}
}
监视属性只能监听到当前对象值的变化,而对象内部的属性变化不会监听到,前面我们监听了wife和wife.name,修改了wife.name并不会触发监听wife的回调函数。
想要监听对象内部的属性值变化,需要进行相应的配置。
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属性对应的回调
为什么要注销 watch?因为我们的组件是经常要被销毁的,比如我们跳一个路由,从一个页面跳到另外一个页面,那么原来的页面的 watch 其实就没用了,这时候我们应该注销掉原来页面的 watch 的,不然的话可能会导致内置溢出
vue中使用了watch侦听属性用来监听和响应 Vue实例上的数据变动.下面的代码展示的是watch属性的完整用法,在工作中发现可以根据不同的情况使用watch属性有三种不同的写法
deep然而,当我们监听的数据是比较深层次,比如要监听的数据是一个对象,就需要用到deep这个属性,属性默认为false;我之前比较有误解的地方就是,总是会以为如果监听的数据如果是在一个对象中,就要使用deep;
在基于vue框架的前端项目开发过程中,只要涉及到稍微复杂一点的业务,我们都会用到computed计算属性这个钩子函数,可以用于一些状态的结合处理和缓存的操作。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!