Vue数据之watch——监听数据的变化

  • 作用 用于监听数据的变化

  • 类型 { [key: string]: string | Function | Object | Array }

  • 详细

一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个 property。

  • 示例

 1 var vm = new Vue({
 2   data: {
 3     a: 1,
 4     b: 2,
 5     c: 3,
 6     d: 4,
 7     e: {
 8       f: {
 9         g: 5
10       }
11     }
12   },
13   watch: {
14     a: function (val, oldVal) {
15       console.log(‘new: %s, old: %s‘, val, oldVal)
16     },
17     // 方法名
18     b: ‘someMethod‘,
19     // 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
20     c: {
21       handler: function (val, oldVal) { /* ... */ },
22       deep: true
23     },
24     // 该回调将会在侦听开始之后被立即调用
25     d: {
26       handler: ‘someMethod‘,
27       immediate: true
28     },
29     // 你可以传入回调数组,它们会被逐一调用
30     e: [
31       ‘handle1‘,
32       function handle2 (val, oldVal) { /* ... */ },
33       {
34         handler: function handle3 (val, oldVal) { /* ... */ },
35         /* ... */
36       }
37     ],
38     // watch vm.e.f‘s value: {g: 5}
39     ‘e.f‘: function (val, oldVal) { /* ... */ }
40   }
41 })
42 vm.a = 2 // => new: 2, old: 1

Vue数据之watch——监听数据的变化

参考网址

Vue数据之watch——监听数据的变化

上一篇:shell-函数基础


下一篇:1261:【例9.5】城市交通路网