vue中的watch監聽方法
阿新 • • 發佈:2018-12-28
watch在vue的文件中是這樣解釋的。
一個物件,鍵是需要觀察的表示式,值是對應回撥函式。值也可以是方法名,或者包含選項的物件。Vue 例項將會在例項化時呼叫 $watch()
,遍歷 watch 物件的每一個屬性。
值是包括選項的物件:選項包括有三個。
第一個handler:其值是一個回撥函式。即監聽到變化時應該執行的函式。
第二個是deep:其值是true或false;確認是否深入監聽。(一般監聽時是不能監聽到物件屬性值的變化的,陣列的值變化可以聽到。)
第三個是immediate:其值是true或false;確認是否以當前的初始值執行handler的函式。
var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 方法名 b: 'someMethod', // 深度 watcher c: { handler: function (val, oldVal) { /* ... */ }, deep: true //true的情況下可以監聽物件屬性的改變(深度監聽) }, d: { handler: function (val, oldVal) { /* ... */ }, immediate: true //該回調將會在偵聽開始之後被立即呼叫(就是該元件執行的時候就呼叫這個方法) }, e: [ function handle1 (val, oldVal) { /* ... */ }, function handle2 (val, oldVal) { /* ... */ } ], // watch vm.e.f's value: {g: 5} 'e.f': function (val, oldVal) { /* ... */ } } }) vm.a = 2 // => new: 2, old: 1