Vue中如何通过watch实现数据响应的详细方法？

本文共计634个文字，预计阅读时间需要3分钟。

在Vue中，使用watch来响应数据的变动。watch的用法大致有三种。以下是一个watch的简单用法示例：

javascriptnew Vue({ el: '#app', data: { cityName: '' }})

在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法：

<input type="text" v-model="cityName"/>

new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } })

直接写一个监听处理函数，当每次监听到 cityName 值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名：

watch: { cityName: 'nameChange' } }

immediate和handler

这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。