vue中computed和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',
    // 深度 watcher 这种使用于对象下面的某个属性的深度监听
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: 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

但是在真实的项目开发中,监听对象下面的某些属性是偶发性的不生效,到目前都没有找到问题的原因;现在能解决的办法就是把对象下面的属性单独出来作为一个属性由父组件传进子组件可暂时解决

你可能感兴趣的:(vue中computed和watch之间的差异之(更新篇))