vue 监听watch vs 计算属性computed

监听

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听，比如我们 data 里有一个obj属性：

 watch:{
      childrens:{
        handler:function(val,oldval){
          console.log(val.name)
        },
        deep:true//对象内部的属性监听，也叫深度监听
      },
      'childrens.name':function(val,oldval){
        console.log(val+"aaa")
      },//键路径必须加上引号
      lastName:function(val,oldval){
        console.log(this.lastName)
      }
    },//以V-model绑定数据时使用的数据变化监测
  } );

      
obj.a: {{obj.a}}
      
obj.a: 

 
new Vue({
  el: '#root',
  data: {
    obj: {
      a: 123
    }
  },
  watch: {
    obj: {
      handler(newName, oldName) {
         console.log('obj.a changed');
      },
      immediate: true
    }
  } 
})

https://www.cnblogs.com/yesu/p/9546458.html

handler方法和immediate属性
这里 watch 的一个特点是，最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？我们需要修改一下我们的 watch 写法，修改过后的 watch 代码如下：

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true
  }
}

image.png

computed

vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，更好的做法是使用计算属性而不是命令式的 watch 回调。

// 以下这个例子：当firstName / lastName 变化的时候，fullName 也需要自动变化
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'  // computed的例子中在data中不用写，否则会重复定义
  },
// watch使用的方法是分别监听firstName 和 lastName ，两者之一有改动则对fullName重新赋值
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  },
// computed：这里声明了一个计算属性fullName，
// 当fitstName/lastName 发生变化时，依赖firstName和lastName的fullName 也会对应变化，
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

computed 的 getter 和 setter
默认使用的是computed的get方法，但是当computed变化的时候，会调用set方法

image.png

 

    Fixed Header
    
 
computed: {
    fixedHeader: {
      get() {
        return this.$store.state.settings.fixedHeader
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'fixedHeader',
          value: val
        })
      }
    },

$set

https://www.jianshu.com/p/71b1807b1815

image.png