computed和watch

概念

1、computed是计算属性，类似函数，使用时不加()调用，必须有return，可以写get和set
2、watch是监听数据是否有变化，函数参数两个，前者为变化后的数据，后者为老数据，只会监听数据的值是否发生改变，不会监听数据的地址是否发生改变

区别

• 功能：computed是计算属性，watch是监听一个值是否发生变化执行对应的回调
• 缓存：computed函数所依赖的属性不变的时候会用缓存，watch每次监听的值发生变化时都会调用回调
• 返回：computed必须有return，watch不需要
• 场景：computed比较适合一对多，一个属性值受多个属性的影响，可以计算；watch多对一，多个属性值被一个属性影响，可在watch监听的一个属性里，改变多个属性值
• 异步：computed不支持异步，watch支持
• 用法：watch的deep是深度监听，监听对象内部，immedite是页面首次加载的时候是否监听

写法

// computed的两种写法
// 1、无setter时
computed: {
  fullName () {
    ...
  }
}

// 2、有setter时，当值更新时，会走set函数
computed: {
  fullName: {
    get: function () {
      ...
    },
    set: function (newVal) {
      ...
    }
  }
}


// watch的三种写法
// 1、watch里面直接写监听函数
 watch: {
    list(newValue, oldValue) {
    }
 }
  
// 2、watch里面写对象，使用handler方法和deep和immediate属性
 watch: {
    list: {
      handler(newName, oldName) {
      },
    deep: true,
    immediate: true
    }
 }
 
// 3、watch里面写一个监听处理函数
watch: {
    list: 'editList'
    }
 } 
 methods：{
     editList(){}
 }