Vue watch和computed的区别

Posted 2021-09-05 奥特曼　

	watch	computed
定义格式	必须监听存在的属性(data、props、computed)	不能和data定义的变量相同
异步	支持异步操作	不支持异步
开销	适合一些开销较大的操作	适合做一些简单依赖的计算

对于computed能做的 watch都可以做，至于选择哪个去做，都应该去看使用场景

一、使用场景

第一个输入框+第二个输入框 进行拼接

    <input type="text" v-model="num1" name="" id="">+
    <input type="text" v-model="num2" name="" id="">=
    {{num3}}
    {{res}}

监听

 watch:{
      res(){
      this.num3= this.num1+this.num2
      },
      num2(){
      this.num3= this.num1+this.num2
      }
    },

计算属性

    computed: {
      res() {
        return this.num1+this.num2
      }
    },

从代码量来看 显然更适合 用计算属性去做，而使用watch 就要检测两个值的变化 稍微繁琐了些

但是 watch 可以做一些异步的事情 并且可以设置改变多个值   这是计算属性做不到的

二、缓存

关于缓存问题 个人感觉 这两个并不能比，可以用computed和methods去比

方法

    {{res()}}
    {{res()}}

    methods: {
      res() {
        console.log('方法被执行了');
       return this.num1+this.num2
      }
    },

 如果视图上多个使用这个方法 每个调用都会执行

 计算属性

 而计算属性不同，只有当值发生改变的时候他才会执行，如果上次没有改变他会取从缓存拿值

    {{res}}
    {{res}}

    computed: {
      res() {
        console.log('计算属性执行了');
        return this.num1+this.num2
      }
    },

参考官网：computed和watch