阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js watch

      watch

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

      详细

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

      示例

      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',
          // 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
          c: {
            handler: function (val, oldVal) { /* ... */ },
            deep: true
          },
          // 该回调将会在侦听开始之后被立即调用
          d: {
            handler: 'someMethod',
            immediate: true
          },
          e: [
            'handle1',
            function handle2 (val, oldVal) { /* ... */ },
            {
              handler: function handle3 (val, oldVal) { /* ... */ },
              /* ... */
            }
          ],
          // watch vm.e.f's value: {g: 5}
          'e.f': function (val, oldVal) { /* ... */ }
        }
      })
      vm.a = 2 // => new: 2, old: 1
      

      注意,不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined。

      参考

      实例方法 / 数据 - vm.$watch

      目录
      目录