watch属性的使用
watch属性的使用
侦听属性的出现,可以实现在数据发生变化时,处理一些逻辑。比如数据的联动更新。现在我们通过代码的方式来表达:
[loginview]
<template>
<div>
<p>{{a}}</p>
<p>{{b}}</p>
</div>
</template>
<script>
export default {
data() {
return {
a: 'aaaa',
b:''
}
},
watch:{
a(newval,oldval){
console.log(oldval)
console.log(newval)
this.b = newval
}
},
mounted() {
this.a = 'new data'
}
}
</script>
我们默认初始化2个变量,监听a发生变化时,把b也赋值为a的值。我们发现watch的写法大体上和计算属性是一致的。watch可以有参数,第一个是新的值,第二个是旧的值,如果你用不到的话,可以不写参数。
运行结果:

都输出了新的值。
计算属性和侦听属性联合使用
我们发现watch的写法在名称上就是变量的名称(计算属性的名称可以自己定义)。如果我们要监听vuex的变量呢,那该如何写了呢?有时候我们只要监听对象里面的某个值变化,又该怎么写了呢。其实也不难,利用计算属性把变量翻译下即可。为了演示这个过程,代码:
<template>
<div>
<p>{{a}}</p>
</div>
</template>
<script>
export default {
data() {
return {
person: {
age: 10,
name: '张珊'
},
a: 0
}
},
computed: {
myAge() {
return this.person.age
}
},
watch: {
myAge(nval, oval) {
this.a = nval
}
},
mounted() {
this.person.age = 30
}
}
</script>
我们通过改变person.age来触发a变量的值也跟着变化。我们并没有直接对a变量进行赋值。而是通过watch来实现的。
页面输出:

[/loginview]
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。