溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue項目中觸發watch的條件是什么？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
很多人習慣用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()即可取消
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
