2.6、vue2中侦听属性的变化
2.6.1、侦听属性作用
侦听属性的变化其实就是监视某个属性的变化。当被监视的属性一旦发生改变时，执行某段代码。
2.6.2、watch配置项
监视属性变化时需要使用watch配置项
可以监视多个属性，监视哪个属性，请把这个属性的名字拿过来即可。
i.可以监视Vue的原有属性
ii.如果监视的属性具有多级结构，一定要添加单引号：'a.b'
iii.无法直接监视对象深层次属性，如a.b，b属性压根不存在。
iv.启用深度监视，默认是不开启深度监视的。
v.也可以监视计算属性
2.6.3、如何深度监视：
(1) 监视多级结构中某个属性的变化，写法是：’a.b.c’ : {}。注意单引号哦。
(2) 监视多级结构中所有属性的变化，可以通过添加深度监视来完成：deep : true
2.6.4、 如何后期添加监视：
(1) 调用API：vm.$watch(‘number1’, {})
2.6.5、 watch的简写：
(1) 简写的前提：当不需要配置immediate和deep时，可以简写。
(2) 如何简写？
① watch:{
number1(newVal,oldVal){},
number2(newVal, oldVal){}
}
(3) 后期添加的监视如何简写？
① vm.$watch(‘number1’, function(newVal, oldVal){})
<body>
<div id="app">
<h1>{{msg}}</h1>
数字：<input type="text" v-model="number" /><br />
数字：<input type="text" v-model="a.b" /><br />
数字：<input type="text" v-model="a.c" /><br />
数字：<input type="text" v-model="a.d.e.f" /><br />
数字(后期添加监视)：<input type="text" v-model="number2" /><br />
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "侦听属性的变化",
// 原有属性
number: 0,
// 多层次属性
a: {
b: 0,
c: 0,
d: {
e: {
f: 0,
},
},
},
number2: 0,
},
// 计算属性
computed: {
hehe() {
return "haha" + this.number;
},
},
watch: {
//1、可以监视多个属性，监视哪个属性，请把这个属性的名字拿过来即可。
//1.1 可以监视Vue的原有属性
/* number : {
// 初始化的时候，调用一次handler方法。
immediate : true,
// 这里有一个固定写死的方法，方法名必须叫做：handler
// handler方法什么时候被调用呢？当被监视的属性发生变化的时候，handler就会自动调用一次。
// handler方法上有两个参数：第一个参数newValue，第二个参数是oldValue
// newValue是属性值改变之后的新值。
// oldValue是属性值改变之前的旧值。
handler(newValue, oldValue){
console.log(newValue, oldValue)
// this是当前的Vue实例。
// 如果该函数是箭头函数，这个this是window对象。不建议使用箭头函数。
console.log(this)
}
}, */
//1.2 如果监视的属性具有多级结构，一定要添加单引号：'a.b'
/* 'a.b' : {
handler(newValue, oldValue){
console.log('@')
}
},
'a.c' : {
handler(newValue, oldValue){
console.log('@')
}
}, */
// 无法监视b属性，因为b属性压根不存在。
/* b : {
handler(newValue, oldValue){
console.log('@')
}
} */
//1.3 启用深度监视，默认是不开启深度监视的。
a: {
// 什么时候开启深度监视：当你需要监视一个具有多级结构的属性，并且监视所有的属性，需要启用深度监视。
deep: true,
handler(newValue, oldValue) {
console.log("@");
},
},
//1.4 也可以监视计算属性
/* hehe : {
handler(a , b){
console.log(a, b)
}
} */
//2、 监视某个属性的时候，也有简写形式，什么时候启用简写形式？
// 当只有handler回调函数的时候，可以使用简写形式。
number(newValue, oldValue) {
console.log(newValue, oldValue);
},
},
});
//3、 如何后期添加监视？调用Vue相关的API即可。
//3.1 语法：vm.$watch('被监视的属性名', {})
/* vm.$watch('number2', {
immediate : true,
deep : true,
handler(newValue, oldValue){
console.log(newValue, oldValue)
}
}) */
//3.2 这是后期添加监视的简写形式。
vm.$watch("number2", function (newValue, oldValue) {
console.log(newValue, oldValue);
});
</script>
</body>2.6.6. computed和watch如何选择？
比大小的案例
2.6.6.1、watch实现
<body>
<div id="app">
<h1>{{msg}}</h1>
数值1：<input type="number" v-model="num1" /><br />
数值2：<input type="number" v-model="num2" /><br />
比较大小：{{compareResult}}
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "比较大小的案例",
num1: 0,
num2: 0,
compareResult: "",
},
watch: {
// 监视num1
num1: {
immediate: true,
handler(val) {
let result = val - this.num2;
if (result == 0) {
this.compareResult = val + " = " + this.num2;
} else if (result > 0) {
this.compareResult = val + " > " + this.num2;
} else {
this.compareResult = val + " < " + this.num2;
}
},
},
// 监视num2
num2: {
immediate: true,
handler(val) {
let result = this.num1 - val;
if (result == 0) {
this.compareResult = this.num1 + " = " + val;
} else if (result > 0) {
this.compareResult = this.num1 + " > " + val;
} else {
this.compareResult = this.num1 + " < " + val;
}
},
},
},
});
</script>
</body>2.6.6.2、computed实现
<body>
<div id="app">
<h1>{{msg}}</h1>
数值1：<input type="number" v-model="num1" /><br />
数值2：<input type="number" v-model="num2" /><br />
比较大小：{{compareResult}}
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: "比较大小的案例",
num1: 0,
num2: 0,
},
computed: {
// 计算属性的简写形式
compareResult() {
let result = this.num1 - this.num2;
if (result == 0) {
return this.num1 + " = " + this.num2;
} else if (result > 0) {
return this.num1 + " > " + this.num2;
} else {
return this.num1 + " < " + this.num2;
}
},
},
});
</script>
</body>2.6.6.3、总结
(1) 以上比较大小的案例可以用computed完成，并且比watch还要简单。所以要遵守一个原则：computed和watch都能够完成的，优先选择computed。
(2) 如果要开启异步任务，只能选择watch。因为computed依靠return。watch不需要依赖return。
比较大小的案例：延迟3s出现结果
watch: {
// 监视num1
num1: {
immediate: true,
handler(val) {
let result = val - this.num2;
// 需求2:3s后出现比较结果
// 此时使用箭头函数，箭头函数没有this，会向上找到num1，num1是vm的属性，
// 如果将此时箭头函数转成普通函数，this就会是window
setTimeout(() => {
if (result == 0) {
this.compareResult = val + " = " + this.num2;
} else if (result > 0) {
this.compareResult = val + " > " + this.num2;
} else {
this.compareResult = val + " < " + this.num2;
}
}, 3000);
},
},
// 监视num2
num2: {
immediate: true,
handler(val) {
let result = this.num1 - val;
setTimeout(() => {
if (result == 0) {
this.compareResult = this.num1 + " = " + val;
} else if (result > 0) {
this.compareResult = this.num1 + " > " + val;
} else {
this.compareResult = this.num1 + " < " + val;
}
}, 3000);
},
},
},
computed: {
// 计算属性的简写形式
// 计算结果3s后显示，由于setTimeout是异步的，是有js引擎调用的，所以它的this是window，可以使用箭头函数
compareResult() {
setTimeout(() => {
let result = this.num1 - this.num2;
if (result == 0) {
return this.num1 + " = " + this.num2;
} else if (result > 0) {
return this.num1 + " > " + this.num2;
} else {
return this.num1 + " < " + this.num2;
}
}, 3000);
},2.6.7. 关于函数的写法，写普通函数还是箭头函数？
(1) 不管写普通函数还是箭头函数，目标是一致的，都是为了让this和vm相等。
(2) 所有Vue管理的函数，建议写成普通函数。
(3) 所有不属于Vue管理的函数，例如setTimeout的回调函数、Promise的回调函数、AJAX的回调函数，建议使用箭头函数。
原文地址：https://blog.csdn.net/2301_77729668/article/details/144407934
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！