很多人習慣用watch，但是卻很少有人知道watch的真正觸發條件。如果不是對vue原理了如指掌，請謹慎使用watch。

示例1，下面會觸發watch 嗎？

<script> new Vue({ data() { return { city: {id: 1, name: ’Beijing’} } }, watch: { city() { console.log(’city changed’) } }, created() { this.city = {id: 1, name: ’Beijing’} } })</script>

會觸發，因為在created方法里面重新給city賦值了一個對象，city前后的指向不同了

示例2：

<script> new Vue({ data() { return { city: {id: 1, name: ’Beijing’} } }, watch: { city() { console.log(’city changed’) } }, created() { this.city.name = ’Shanghai’ } })</script>

不會觸發， 因為created方法執行之后， city的指向沒有變

如果我們期望捕獲這種更新，應該這樣寫代碼：

watch: { city: { handler: () => console.log(’city changed’), deep: true }}

將選項deep設為true能讓vue捕獲對象內部的變化。

下面討論一下watch一個數組：

<script>new Vue({ el: ’#body’, data() { return { cities: [’Beijing’, ’Tianjin’] } }, watch: { cities() { console.log(’cities changed’) } }})</script>

那下面哪些操作會觸發cities的watch回調呢?

this.cities = [’Beijing’, ’Tianjin’]this.cities.push(’Xiamen’)this.cities = this.cities.slice(0, 1)this.cities.pop();this.cities.sort((a,b)=>a.localeCompare(b));this.cities[0] = ’Shenzhen’this.cities.splice(0, 1)this.cities.length = 0

答案是只有最后三行不會觸發。

補充知識：vue 深度watch與watch立即觸發回調

基礎用法

搜索框輸入搜索關鍵字的時候，可以自動觸發搜索,此時除了監聽搜索框的change事件之外，我們也可以通過watch監聽搜索關鍵字的變化。

<template> <div> <span>搜索</span> <input v-model='searchVal' /> </div></template><script>export default { data() { return { searchVal: ’’ } }, watch: { // 在值發生變化之后，重新加載數據 searchVal(newValue, oldValue) { if (newValue !== oldValue) { this.loadData() } } }, methods: { loadData() { // 重新加載數據，此處需要通過函數防抖 } }}</script>

立即觸發

通過上面的代碼，現在已經可以在值發生變化的時候觸發加載數據了，但是如果要在頁面初始化時候加載數據，我們還需要在created或者mounted生命周期鉤子里面再次調用loadData方法。不過，現在可以不用這樣寫了，通過配置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()即可取消

以上這篇淺談vue.watch的觸發條件是什么就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。