Vue.js 有一个方法 watch,观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。
1.简单用法
<template>
<div>
<a-input v-model="name"></a-input>
</div>
</template>
<script>
export default {
data() {
return {
name: 'zhangsan',
}
},
watch: {
name(newVal, oldVal) {
//...
},
},
}
</script>
当监听的参数发生变化就会执行函数,也可以在所监听的数据后面直接加字符串形式的方法名:
<template>
<div>
<a-input v-model="name"></a-input>
</div>
</template>
<script>
export default {
data() {
return {
name: 'zhangsan',
}
},
watch: {
name: 'nameChange',
},
methods: {
nameChange() {
//...
},
},
}
</script>
2.初始化执行
上面的用法有个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
<template>
<div>
<a-input v-model="name"></a-input>
</div>
</template>
<script>
export default {
data() {
return {
name: 'zhangsan',
}
},
watch: {
name: {
handler(newVal, oldVal) {
// ...
},
immediate: true,
},
},
}
</script>
3.深度监听
如果需要监听比较复杂数据类型(对象)的变化时,普通的watch方法无法是监听到对象内部属性的变化,只有data中的数据才可以够监听到变化,这时就需要deep属性对对象进行深度的监听。
<template>
<div>
<a-input v-model="cat.name"></a-input>
</div>
</template>
<script>
export default {
data() {
return {
cat: { name: 'mimi', age: 2 },
}
},
watch: {
cat: {
handler(val) {
// ...
},
immediate: true,
deep: true,
},
},
}
</script>
设置deep: true 则可以监听到cat.name的变化,此时会给cat的所有属性都加上这个监听器,如果对象属性较多时,则每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:
watch: {
'cat.name': {
handler(val) {
// ...
},
immediate: true,
deep: true,
},
},
也可以借助于computed计算属性来完成:
<template>
<div>
<a-input v-model="cat.name"></a-input>
</div>
</template>
<script>
export default {
data() {
return {
cat: { name: 'mimi', age: 2 },
}
},
computed: {
newName() {
return this.cat.name
},
},
watch: {
newName(val) {
//...
},
},
}
</script>