Vue.js 是一个构建用户界面的框架，其核心是响应式的数据绑定系统。在 Vue.js 中，我们可以使用 computed 计算属性和 watch 监听属性的变化。
本文将重点介绍 Vue.js 中的 watch 属性，帮助我们更好地理解和使用它。
watch 的基础语法
Vue.js 中的 watch 属性可以监听一个被侦听的数据，当数据发生变化时，执行回调函数。其基础语法如下：
watch: {
属性名: function (newVal, oldVal) {
// 这里是回调函数
}
}例如，我们有一个名为 message 的数据，我们可以使用以下代码来监视它：
watch: {
message: function (newVal, oldVal) {
console.log('message 的值从 ' + oldVal + ' 变为 ' + newVal + ' 了！')
}
}这个 watch 语句会在 message 数据变化时触发回调函数，打印出新旧值。
$watch 方法
Vue.js 中的 $watch 方法可以用来监视一个表达式或一个函数的返回值。其语法如下：
vm.$watch('表达式或函数', callback, options)同样，我们也可以使用以下代码来监视 message 数据：
vm.$watch('message', function (newVal, oldVal) {
console.log('message 的值从 ' + oldVal + ' 变为 ' + newVal + ' 了！')
})watch 的深度监听
在 Vue.js 中，对象和数组是通过引用存储的，因此默认情况下，watch 不会深度监听对象和数组的变化。我们可以使用 deep 选项来深度监听一个对象或数组：
watch: {
person: {
handler: function (newVal, oldVal) {
console.log('person 的值从 ' + oldVal + ' 变为 ' + newVal + ' 了！')
},
deep: true
}
}在这个例子中，watch 会在 person 对象的任何属性发生变化时触发回调函数。
watch 的立即执行
在默认情况下，watch 会在被监听的数据变化后才会执行回调函数。我们可以使用 immediate 选项来让 watch 在初始值改变时立即执行回调函数：
watch: {
message: {
handler: function (newVal, oldVal) {
console.log('message 的值从 ' + oldVal + ' 变为 ' + newVal + ' 了！')
},
immediate: true
}
}在这个例子中，watch 会在 message 初始值改变时立即执行回调函数。
watch 的取消监听
在 Vue.js 中，我们可以使用 unwatch 方法来取消一个 watch 监听器：
var unwatch = vm.$watch('message', function (newVal, oldVal) {
console.log('message 的值从 ' + oldVal + ' 变为 ' + newVal + ' 了！')
})
// 取消监听
unwatch()在这个例子中，unwatch 方法用于取消监听 message 数据的变化。
示例代码
下面是一个完整的示例代码，它演示了如何使用 watch 监听 message 数据的变化：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ----- ------------
------- ------------------------------------------------------------
-------
------
---- ---------
------ ------------------
------
--------
--- -- - --- -----
--- -------
----- -
-------- ------- -------
--
------ -
-------- -
-------- -------- -------- ------- -
-------------------- --- - - ------ - - -- - - ------ - - ----
--
---------- ----
-
-
--
---------
-------
-------当你在文本框中输入内容时，控制台将输出数据的变化情况。
结论
在 Vue.js 中，watch 属性是一个非常重要的概念，它可以帮助我们更好地监听数据的变化。本文主要介绍了 watch 的基础语法，深度监听，立即执行以及取消监听等知识点，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67123e9aad1e889fe203a628