computed, watch的区别~

computed

// 写法
export default {
  data () {
      return {
          num: 10
      }
  },
  computed: {
      myNum () {
          return this.num + 2
      },
      // 或者
      myNum: {
          get () {
              return this.num + 2
          },
          set (newValue) {
              this.num = newValue - 1
          }
      }
  }
}

• computed推荐对数据进行格式化操作
• computed默认有缓存效果，当计算属性没有发生变化时，不会重新计算更不会重新渲染。

watch

// 写法
export default {
  data () {
      return {
          ojb: {
              name: 'wyh'
          }
      }
  },
  watch: {
      obj (val) {
          console.log(val)
      },
      ojb: {
          handler (val) {
              console.log(val)
          },
          immediate: true, //在侦听开始时就调用回调函数
          deep: true // 深侦听，不管层级多深都监听
      },
      // 或者
      'ojb.name': {
         
      }
  }
}

• watch没有缓存效果 如果是为了监听某个值变化之后要执行什么操作推荐watch
• 当监听属性的属性值为简单数据类型，就互相比较值，值不一样就触发watch
• 如果监听的属性的属性值是复杂数据类型，就比较地址。地址不一样就触发watch