computed和watch的区别及用法

computed

• 区别
  • 需要被调用,并且return返回出最终结果，调用的时候不需要加（）
  • 结果可以被缓存，如果内部属性未发生变化取缓存中的值，否则重新计算
  • 属性的名字不能和data中的属性名冲突
  • 一般用于多个数据影响一个数据的时候
• 用法
  • 默认只有getter方法
  • 如果需要使用setter方法需要修改计算属性的写法 提示:计算属性的set方法第一次不会被调用，第二次被改变才会调用

computed: {
   // 默认getter的写法
   // fullName () {
   //   return this.firstName + ' ' + this.lastName
   // }
    // 添加setter的写法
    fullName: {
      // getter
      get () {
        console.log('执行get方法')
        return this.firstName + ' ' + this.lastName
      },
      // setter 
      set (val) {
        console.log(val) // 最终计算属性fullName的值
        this.test = '测试1111'
      }
    }
  }

watch

• 区别
  • 不需要被调用，可以没有return关键字
  • 函数的名字必须和data中定义的变量名保持一致
  • 一般用于一个数据影响多个数据
• 用法
  • 如果要监听对象的话需要deep关键字设置为true
  • 如果想要watch声明了属性后立刻监听执行函数则需要immediate关键字设置为true

 watch: {
    obj: {
      deep: true,
      immediate: true,
      handler (newVal, oldVal) {
        console.log('改变了')
        console.log(newVal, oldVal)
      }
    }
  }

提示:直接监听obj对象，代表给obj中所有属性都加上了监听器，其中一个属性的值发生改变则会执行所有的监听器，这样做开销很大，如果只需要监听其中一个则可以这样写:

 watch: {
    'obj.name': {
      deep: true,
      immediate: true,
      handler (newVal, oldVal) {
        console.log('改变了')
        console.log(newVal, oldVal)
      }
    }
  }