Vue监视属性
监视属性:watch
computed和watch之间的区别:
1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能computed不一定能完成,例如:watch可以进行异步操作。
两个重要的小原则:
1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象。
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成简头函数,这样this的指向才是vm或组件实例对象。
示例:
<div id="app">
<input type="text" v-model="name"><br>
<hr>
<span>{{numbers.a}}</span><br>
<button @click="numbers.a++">修改numbers.a的值</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
const vm = new Vue({
el: '#app',
data: {
name: 'A',
numbers: {
a: 1,
b: 2
}
},
methods: {
},
computed: {
info:{
get(){
return name + name
},
set(){
}
}
},
//监视属性
watch: {
name:{
//name发生改变时会调用handler
handler(newValue,oldValue){
alert('name被修改了,新值:' + newValue + ',旧值:' + oldValue)
}
},
// 计算属性也能被监视
info:{
immediate:true, //初始化时让handler调用一下
handler(newValue,oldValue){
alert('info被修改了,新值:' + newValue + ',旧值:' + oldValue)
}
},
//监视多级结构中某个属性的变化
'numbers.a':{
handler(newValue,oldValue){
alert('numbers.a被修改了,新值:' + newValue + ',旧值:' + oldValue)
}
},
//监视多级结构中所有属性的变化
numbers:{
deep:true, //开启深度监视(默认不开启)
handler(newValue,oldValue){
console.log('numbers被修改了')
//监视属性可以使用异步任务去维护数据,而计算属性不可以
setTimeout(()=>{
console.log(newValue)
console.log(oldValue)
},1000)
}
},
}
})
// // 监视属性的另一种写法
// vm.$watch('name',{
// handler(newValue,oldValue){
// alert('name被修改了,新值:' + newValue + ',旧值:' + oldValue)
// }
// })
</script>