【Vue核心】9.监视属性-watch
监视属性-watch
方法说明
1.通过通过vm 对象的$watch()或watch 配置来监视指定的属性
2.当属性变化时, 回调函数自动调用, 在函数内部进行计算
监视属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>监听属性</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<div>{{name}}</div>
<input type="text" id="" v-model:value="name" />
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
name: "ces"
},
watch: {
name: {
immediate: true,//初始化时让handler调用一下
handler(newValue, oldValue) {
console.log("newValue:" +
oldValue + "，oldValue:" + oldValue);
}
}
},
})
</script>
</html>
(2).通过vm.$watch监视
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>监听属性</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<div>{{name}}</div>
<input type="text" id="" v-model:value="name" />
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
name: "ces"
},
});
vm.$watch('name', {
immediate: true, //初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时。
handler(newValue, oldValue) {
console.log('name被修改了', newValue, oldValue)
}
})
</script>
</html>
属性说明
handler：
其值是一个回调函数。即监听到变化时应该执行的函数。
deep：
其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
immediate：
其值是true或false；确认是否以当前的初始值执行handler的函数。
深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
代码示例
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:1,
c:{
d:{
e:100
}
}
}
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather(){
this.isHot = !this.isHot
}
},
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>
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
简写属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>监视属性_简写</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>hello {{name}}</h2>
<input type="text" v-model="name" />
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: '#root',
data: {
name: "测试",
},
watch: {
//正常写法
/* isHot:{
// immediate:true, //初始化时让handler调用一下
// deep:true,//深度监视
handler(newValue,oldValue){
console.log('name被修改了',newValue,oldValue)
}
}, */
//简写
name(newValue, oldValue) {
console.log('name被修改了', newValue, oldValue, this)
}
}
})
//正常写法
/* vm.$watch('name',{
immediate:true, //初始化时让handler调用一下
deep:true,//深度监视
handler(newValue,oldValue){
console.log('name被修改了',newValue,oldValue)
}
}) */
//简写
vm.$watch('name', function(newValue, oldValue) {
console.log('name被修改了', newValue, oldValue, this)
})
</script>
</html>
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
