vue watch All In One

vue watch All In One

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)
    },
    // string method name
    b: 'someMethod',
    // the callback will be called whenever any of the watched object properties change regardless of their nested depth
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // the callback will be called immediately after the start of the observation
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // you can pass array of callbacks, they will be called one-by-one
    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

immediate: true & deep: true,

深度监听，可监听到对象、数组的变化

  watch: {
    propsWatched: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
        customItemType: {
            handler (val, oldVal) {
                const newCustomItemType = {
                    region: {
                        isMultiple: true,
                        canDelete: true,
                    },
                    package: {
                        isMultiple: true,
                        canDelete: true,
                    },
                    ...val,
                };
                console.log('newCustomItemType 🚀 =', newCustomItemType);
                return newCustomItemType;
            },
            immediate: true,
            deep: true,
        },
 }

refs

https://vuejs.org/v2/api/#watch

https://gist.github.com/xgqfrms/2896f6fd0af16c520ad3981dde322bb9

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---