vue computed和watch区别及如何使用

vue computed和watch区别及如何使用

computed（计算属性）

要点

• 是一个函数要有返回值 否则不起作用的
• 是具有缓存性质的，通过计算data或者props中声明的值来计算出新的值，如果依赖的值发生改变就会重新计算，如果没有发生变化，再获取该值时会直接从缓存中获取值
• 是不支持异步的，如果在里面使用异步的话会直接报错的
• 当一个属性需要从data或者props中获得的数据计算而来且是一对一或者多对一的情况我们就可以使用computed

使用

computed默认只要getter 如果需要setter可以自行设置setter

computed: {
  fullName: {
    // getter
    get() {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

watch（监听属性）

要点

1、不支持缓存数据变，就会直接触发函数。
2、可在watch函数里执行异步或者开销较大的操作
3、具有两个参数第一个是新的值第二个是旧的值
4、可以是函数也可以是对象，对象的话有三个属性不得不了解下了，handler\immediate\deep

• handler和immediate
  handler就不在介绍了现在介绍下immediate，watch有个特性，当我们第一次绑定的时候是不会执行函数的，但如果我们想要绑定时就执行就可以设置immediate属性为true就行了
• deep深度监听
  deep如果我们监听是一个对象，对象里的某个属性发生变化是触发不到函数的，但如果加上deep:true的话就可以监听到，但是这样添加是为该对象中的所有属性都添加上了该属性，所以任何属性发生变化都会触发函数，这显然是没有必要的。我们只需对我们需要监听的某个属性添加即可，我们采用"对象名:属性名"的字符串作为监听对象属性，还有一点一维二维数组是不需要深度监听的但是数组里面有对象也是需要深度监听的。

第一种使用

这种我是直接输出显示，也可以调methods里面的方法
第二种使用

第三种使用

    watch:{
        "userName.name":"changeVal"//changeVal是methods里面的方法
    },