vue中什么是偵聽器呢？
- 開發中我們在data回傳的物件中定義了資料，這個資料可以通過插值語法等方式系結到templat中，
- 當資料變化的時候，template里系結的資料會自動進行更新來顯示最新的資料，但是這種變化是在template中自動偵聽data的值來進行變換的
- 在某些情況下，我們希望在代碼邏輯中監聽某個資料的變化，這個時候就需要用到偵聽器watch了
官方定義：Vue 通過 watch 選項提供了一個更通用的方法，來回應資料的變化，當需要在資料變化時執行異步或開銷較大的操作時，這個方式是最有用的
一個物件，鍵是要偵聽的回應式 property——包含了 data 或 computed property，而值是對應的回呼函式，值也可以是方法名，或者包含額外選項的物件，組件實體將會在實體化時呼叫 $watch()，參閱 $watch，以了解更多關于 deep、immediate 和 flush 選項的資訊
偵聽器的用法如下：
- 選項：watch
- 型別：{ [key: string]: string | Function | Object | Array}
偵聽器watch的配置選項：
默認情況下，watch只是在偵聽資料的參考變化，對于資料內部屬性的變化是不會做出回應的：
- 這個時候我們可以使用一個選項deep進行更深層的偵聽；
- 另外一個屬性，是希望一開始的就會立即執行一次： 這個時候我們使用immediate選項； 這個時候無論后面資料是否有變化，偵聽的函式都會有限執行一次；
data的內容:
data() {
return {
info: {
name: 'cgj'
}
}
}watch: {
info: {
handler(newValue, oldValue) {
console.log(newValue, oldValue)
}
deep: true,
immediate: true,
}
}
另外一個是Vue3檔案中沒有提到的，但是Vue2檔案中有提到的是偵聽物件的屬性：
'info.name': function(newValue, oldValue) {
console.log(newValue, oldValue)
}
還有另外一種方式就是使用 $watch 的API：
具體$watch可以查看官方的API查看（用的方式比較少）：
實體方法 | Vue.js
最終示例：
const app = createApp({
data() {
return {
a: 1,
b: 2,
c: {
d: 4
},
e: 5,
f: 6
}
},
watch: {
// 偵聽頂級 property
a(val, oldVal) {
console.log(`new: ${val}, old: ${oldVal}`)
},
// 字串方法名
b: 'someMethod',
// 該回呼會在任何被偵聽的物件的 property 改變時被呼叫，不論其被嵌套多深
c: {
handler(val, oldVal) {
console.log('c changed')
},
deep: true
},
// 偵聽單個嵌套 property
'c.d': function (val, oldVal) {
// do something
},
// 該回呼將會在偵聽開始之后被立即呼叫
e: {
handler(val, oldVal) {
console.log('e changed')
},
immediate: true
},
// 你可以傳入回呼陣列，它們會被逐一呼叫
f: [
'handle1',
function handle2(val, oldVal) {
console.log('handle2 triggered')
},
{
handler: function handle3(val, oldVal) {
console.log('handle3 triggered')
}
/* ... */
}
]
},
methods: {
someMethod() {
console.log('b changed')
},
handle1() {
console.log('handle 1 triggered')
}
}
})
const vm = app.mount('#app')
vm.a = 3 // => new: 3, old: 1順便分享一波個人公眾號,關注關注我唄，分享一些你們需要的資源，大家一起進步，
會分享一些視瞥澩的哦
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/341905.html
標籤：其他
下一篇：陣列的去重