一、示例计算属性局限性
计算属性有个缺点是异步中无法监听数据
.<template>
<div>
<h2>计算属性在异步中无法监听,解决:watch监听器可以解决</h2>
<!-- v-model实现数据双向绑定 -->
<input type="number" v-model="num" />
<!-- 调用 -->
<p>{
{
getage }}</p>
</div>
</template>
<script>
export default {
data() {
// 示范数据
return {
age: 20,
num: 0,
};
},
computed: {
//可以监听
// getage() {
// let age = this.num;
// console.log(1);//输出num数
// },
//模拟异步函数,监听不到
getage() {
setTimeout(() => {
let age = this.num;
console.log(1); //只输出默认1
}, 1);
},
},
};
</script>
<style>
</style>
非异步效果
异步效果
二、解决方案-------watch监听器
作用:
1.可以侦听指定属性值的变化,当属性值发生变化的时候,就会自动的触发侦听器
2.可以侦听异步操作中的数据变化
特点(相对计算属性来比较)
1.不能人为调用,它是自动触发的
2.它一般没有返回值
3.侦听器的名称不能随意,必须和你想要侦听的属性名称完全一致
watch监听器异步非异步都可以,只不过每次调用都要重新监听
.<template>
<div>
<h2>计算属性在异步中无法监听,解决:watch监听器可以解决</h2>
<!-- v-model实现数据双向绑定 -->
<input type="number" v-model="num" />
</div>
</template>
<script>
export default {
data() {
//示范数据
return {
age: 20,
num: 0,
};
},
//使用watch监听
//num:你想监听的属性
watch: {
num() {
setTimeout(() => {
let age = this.num;
console.log(age);
}, 1);
},
},
};
</script>
<style>
</style>
效果
watch监听器还有两个参数,新值和旧值
nv:新值,ov:旧值
//使用watch监听
//num:你想监听的属性
watch: {
// nv:新值,ov:旧值
num(nv, ov) {
setTimeout(() => {
let age = this.num;
//let age = nv;也可以
console.log(nv, ov);
}, 1);
},
},
效果
三、watch深度监听
主要针对对象或数组监听
数组可以直接监听数组本身,通过api改值就可以了
.<template>
<div>
<!-- v-model实现数据双向绑定 -->
<input type="number" v-model="obj.name" />
<button @click="dodo">按钮</button>
</div>
</template>
<script>
export default {
data() {
//示范数据
return {
obj: {
name: "", age: 0 },
arr: [],
};
},
methods: {
dodo() {
//通过api对数组的操作,能够触发对数组本身的倾听
this.arr.push("1");
},
},
//使用watch监听
//修改了对象的属性值,并不代表对象本身的变化,所以不会触发监听器
// watch: {
// obj() {
// console.log("aa");触发不了
// },
// },
watch: {
// 深度监听方法一:
// obj: {
// handler() {
// console.log("aa");
// },
//说明当前的handler是一个深度侦听
// deep: true,
// },
//深度监听方法二:
// "obj.name"(nv) {
// console.log("aaa");
// },
// 倾听数组
arr() {
console.log("11");
},
},
};
</script>
<style>
</style>