很多人習(xí)慣用watch，但是卻很少有人知道watch的真正觸發(fā)條件。如果不是對vue原理了如指掌，請謹慎使用watch。
示例1，下面會觸發(fā)watch 嗎？
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script> new vue({ data() { return { city: {id: 1, name: 'beijing'} } }, watch: { city() { console.log('city changed') } }, created() { this.city = {id: 1, name: 'beijing'} } })</script> |
會觸發(fā)，因為在created方法里面重新給city賦值了一個對象，city前后的指向不同了
示例2：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script> new vue({ data() { return { city: {id: 1, name: 'beijing'} } }, watch: { city() { console.log('city changed') } }, created() { this.city.name = 'shanghai' } })</script> |
不會觸發(fā)， 因為created方法執(zhí)行之后， city的指向沒有變
如果我們期望捕獲這種更新，應(yīng)該這樣寫代碼：
|
1
2
3
4
5
6
|
watch: { city: { handler: () => console.log('city changed'), deep: true }} |
將選項deep設(shè)為true能讓vue捕獲對象內(nèi)部的變化。
下面討論一下watch一個數(shù)組：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script>new vue({ el: '#body', data() { return { cities: ['beijing', 'tianjin'] } }, watch: { cities() { console.log('cities changed') } }})</script> |
那下面哪些操作會觸發(fā)cities的watch回調(diào)呢?
|
1
2
3
4
5
6
7
8
|
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 |
答案是只有最后三行不會觸發(fā)。
補充知識：vue 深度watch與watch立即觸發(fā)回調(diào)
基礎(chǔ)用法
搜索框輸入搜索關(guān)鍵字的時候，可以自動觸發(fā)搜索,此時除了監(jiān)聽搜索框的change事件之外，我們也可以通過watch監(jiān)聽搜索關(guān)鍵字的變化。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<template> <div> <span>搜索</span> <input v-model="searchval" /> </div></template><script>export default { data() { return { searchval: '' } }, watch: { // 在值發(fā)生變化之后，重新加載數(shù)據(jù) searchval(newvalue, oldvalue) { if (newvalue !== oldvalue) { this.loaddata() } } }, methods: { loaddata() { // 重新加載數(shù)據(jù)，此處需要通過函數(shù)防抖 } }}</script> |
立即觸發(fā)
通過上面的代碼，現(xiàn)在已經(jīng)可以在值發(fā)生變化的時候觸發(fā)加載數(shù)據(jù)了，但是如果要在頁面初始化時候加載數(shù)據(jù)，我們還需要在created或者mounted生命周期鉤子里面再次調(diào)用loaddata方法。不過，現(xiàn)在可以不用這樣寫了，通過配置watch的立即觸發(fā)屬性，就可以滿足了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
export default { watch: { // 在值發(fā)生變化之后，重新加載數(shù)據(jù) searchvalue: { // 通過handler來監(jiān)聽屬性變化, 初次調(diào)用 newvalue為""空字符串， oldvalue為 undefined handler(newvalue, oldvalue) { if (newvalue !== oldvalue) { this.loaddata() } }, // 配置立即執(zhí)行屬性 immediate: true } }} |
深度監(jiān)聽
一個表單頁面，需求希望用戶在修改表單的任意一項之后，表單頁面就需要變更為被修改狀態(tài)。如果按照上例中watch的寫法，那么我們就需要去監(jiān)聽表單每一個屬性，太麻煩了，這時候就需要用到watch的深度監(jiān)聽deep
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
export default { data() { return { formdata: { name: '', sex: '', age: 0, deptid: '' } } }, watch: { // 在值發(fā)生變化之后，重新加載數(shù)據(jù) formdata: { // 需要注意，因為對象引用的原因， newvalue和oldvalue的值一直相等 handler(newvalue, oldvalue) { // 在這里標記頁面編輯狀態(tài) }, // 通過指定deep屬性為true, watch會監(jiān)聽對象里面每一個值的變化 deep: true } }} |
隨時監(jiān)聽，隨時取消，了解一下$watch
有這樣一個需求，有一個表單，在編輯的時候需要監(jiān)聽表單的變化，如果發(fā)生變化則保存按鈕啟用，否則保存按鈕禁用。
這時候?qū)τ谛略霰韱蝸碚f，可以直接通過watch去監(jiān)聽表單數(shù)據(jù)(假設(shè)是formdata),如上例所述，但對于編輯表單來說，表單需要回填數(shù)據(jù)，這時候會修改formdata的值，會觸發(fā)watch,無法準確的判斷是否啟用保存按鈕?，F(xiàn)在你就需要了解一下$watch
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
export default { data() { return { formdata: { name: '', age: 0 } } }, created() { this.$_loaddata() }, methods: { // 模擬異步請求數(shù)據(jù) $_loaddata() { settimeout(() => { // 先賦值 this.formdata = { name: '子君', age: 18 } // 等表單數(shù)據(jù)回填之后，監(jiān)聽數(shù)據(jù)是否發(fā)生變化 const unwatch = this.$watch( 'formdata', () => { console.log('數(shù)據(jù)發(fā)生了變化') }, { deep: true } ) // 模擬數(shù)據(jù)發(fā)生了變化 settimeout(() => { this.formdata.name = '張三' }, 1000) }, 1000) } }} |
根據(jù)上例可以看到，我們可以在需要的時候通過this.$watch來監(jiān)聽數(shù)據(jù)變化。那么如何取消監(jiān)聽呢，上例中this.$watch返回了一個值unwatch,是一個函數(shù)，在需要取消的時候，執(zhí)行 unwatch()即可取消
以上這篇淺談vue.watch的觸發(fā)條件是什么就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/tcy9099/article/details/96145229
