基礎用法
比如一個列表頁，我們希望用戶在搜索框輸入搜索關鍵字的時候，可以自動觸發搜索,此時除了監聽搜索框的change事件之外，我們也可以通過watch監聽搜索關鍵字的變化
<template> <!--此處示例使用了element-ui--> <div> <div> <span>搜索</span> <input v-model="searchValue" /> </div> <!--列表，代碼省略--> </div> </template> <script> export default { data() { return { searchValue: '' } }, watch: { // 在值發生變化之后，重新加載數據 searchValue(newValue, oldValue) { // 判斷搜索 if (newValue !== oldValue) { this.$_loadData() } } }, methods: { $_loadData() { // 重新加載數據，此處需要通過函數防抖 } } } </script>
立即觸發
通過上面的代碼，現在已經可以在值發生變化的時候觸發加載數據了，但是如果要在頁面初始化時候加載數據，我們還需要在created或者mounted生命周期鈎子里面再次調用$_loadData方法。不過，現在可以不用這樣寫了，通過配置watch的立即觸發屬性，就可以滿足需求了
// 改造watch export default { watch: { // 在值發生變化之后，重新加載數據 searchValue: { // 通過handler來監聽屬性變化, 初次調用 newValue為""空字符串， oldValue為 undefined handler(newValue, oldValue) { if (newValue !== oldValue) { this.$_loadData() } }, // 配置立即執行屬性 immediate: true } } }
深度監聽（我可以看到你內心的一舉一動）
一個表單頁面，需求希望用戶在修改表單的任意一項之后，表單頁面就需要變更為被修改狀態。如果按照上例中watch的寫法，那么我們就需要去監聽表單每一個屬性，太麻煩了，這時候就需要用到watch的深度監聽deep
export default { data() { return { formData: { name: '', sex: '', age: 0, deptId: '' } } }, watch: { // 在值發生變化之后，重新加載數據 formData: { // 需要注意，因為對象引用的原因， newValue和oldValue的值一直相等 handler(newValue, oldValue) { // 在這里標記頁面編輯狀態 }, // 通過指定deep屬性為true, watch會監聽對象里面每一個值的變化 deep: true } } }
隨時監聽，隨時取消，了解一下$watch
有這樣一個需求，有一個表單，在編輯的時候需要監聽表單的變化，如果發生變化則保存按鈕啟用，否則保存按鈕禁用。這時候對於新增表單來說，可以直接通過watch去監聽表單數據(假設是formData),如上例所述，但對於編輯表單來說，表單需要回填數據，這時候會修改formData的值，會觸發watch,無法准確的判斷是否啟用保存按鈕。現在你就需要了解一下$watch
export default { data() { return { formData: { name: '', age: 0 } } }, created() { this.$_loadData() }, methods: { // 模擬異步請求數據 $_loadData() { setTimeout(() => { // 先賦值 this.formData = { name: '子君', age: 18 } // 等表單數據回填之后，監聽數據是否發生變化 const unwatch = this.$watch( 'formData', () => { console.log('數據發生了變化') }, { deep: true } ) // 模擬數據發生了變化 setTimeout(() => { this.formData.name = '張三' }, 1000) }, 1000) } } }
根據上例可以看到，我們可以在需要的時候通過this.$watch來監聽數據變化。
那么如何取消監聽呢，
上例中this.$watch返回了一個值unwatch,是一個函數，在需要取消的時候，執行 unwatch()即可取消