监视属性watch:
1.当被监视属性发生变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视
3.监视的两种写法:
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
var vm = new Vue({
el:"#root",
data:{
isHot:true,
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather:function(){
this.isHot = !this.isHot
}
},
/* watch:{
isHot:{
immediate:true,//初始化时,让handler调用一下
//handler什么时候调用?当isHot发生改变时
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue);
}
}
} */
})
vm.$watch('isHot',{
immediate:true,//初始化时,让handler调用一下
//handler什么时候调用?当isHot发生改变时
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue);
}
})
</script>
</body>
深度监视:
(1).Vue中的watch默认不监测对象内部值的改变(一层)。
(2) .配置deep:true可以监测刈象内部值改变(多层)
备注:
(1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
(2) .使用watch时根据数据的具体结构,决定是否采用深度监视。
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
<hr>
<h3>a的值是:{{numbers.a}}</h3>
<button @click="add">点我让a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="numbers.b++">点我让b+1</button>
<button @click="numbers={a:666,b:888}">彻底替换掉numbers</button>
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
var vm = new Vue({
el:"#root",
data:{
isHot:true,
numbers:{
a:1,
b:1
}
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather:function(){
this.isHot = !this.isHot
},
add(){
this.numbers.a++
}
},
watch:{
isHot:{
immediate:true,//初始化时,让handler调用一下
//handler什么时候调用?当isHot发生改变时
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue);
}
},
//监视多级结构中某个属性的变化
/* 'numbers.a':{
handler(){
console.log('a被改变了');
}
} */
//监视多级结构中所有属性的变化
numbers:{
deep:true,
handler(){
console.log('numbers改变了');
}
}
}
})
</script>
</body>
computed和watch之间的区别:
1. computed能完成的功能。watch 都可以完成。
2. watch能完成的功能,computed不 定 能完成,例如: watch可 以进行异步操作。
两个重要的小原则:
1.所被Vue管理的函数,最好写成普通函数。这样this的指向小是vm或组件实例对象。
2.所有不被Vue所管理的函数( 定时器的回调函数、ajax的回调函数等),最好写成箭头函数,这样this的指向才是 vm 或 组件实例对象。
<body>
<div id="root">
姓:<input type="text" v-model:value="firstName"><br><br>
名:<input type="text" v-model:value="lastName"><br><br>
全名:<span>{{fullName}}</span>
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
var vm = new Vue({
el:"#root",
data:{
firstName:'张',
lastName:'三',
fullName:'张-三'
},
watch:{
firstName(newValue){
//更改名后 全名一秒钟后再变
setTimeout(()=>{
console.log(this);
this.fullName = newValue + '-' + this.lastName;
},1000)
},
lastName(val){
this.fullName = this.firstName + '-' + val;
}
}
})
</script>
</body>