computed计算属性以及与watch的区别

computed计算属性

特点：

• 支持缓存，只有依赖数据发生改变，才会重新进行计算
• 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
• computed属性值会默认走缓存，计算属性是基于他们的响应式依赖进行缓存的，也就是基于data中声明过的或者父组件传递props中的数据通过计算得到的值
• 如果computed属性值是函数，那么默认会走get方法，函数的返回值就是属性的属性值，在computed中的属性都有一个get和set方法，当数据变化时，调用set方法

优点：

• 当改变data变量值时，整个应用会从新渲染，vue会被数据重新渲染到dom中，这时如果使用属性内容，随着渲染，方法也会被调用，而computed不会重新进行计算，从而性能开销比较小，当新的值需要大量计算才能得到时，缓存的意义就非常大
• 如果computed所依赖的数据发生改变时，计算属性才会重新计算，并进行缓存，当改变其他数据时，computed属性并不会重新计算，从而提升性能
• 当拿到的值需要进行一定处理时，就可以使用computed

 

   <div>computed计算属性</div>
    <input type="text" v-model="n1">+
    <input type="text" v-model="n2">=
    <input type="text" v-model="sum">

 

data:{
    n1:0,
    n2:1
}

 computed:{
     sum:function () {
          return this.n1*1+this.n2*1;
     }
},

 

 

watch监听

特点：

• 不支持缓存，数据变化会直接触发相应的操作。
• 支持异步操作
• 监听的函数接受俩个参数，第一个是最新值，第二个是输入之前的值。
• 当一个属性发生变化时，需要自行对应操作，一对多
• 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时触发其他操作，函数有俩个参数immediate：组件加载立即执行触发回调函数执行/deep：深度监听

注意：

• 监听数组的变化不需要这么做，deep无法监听到数组的变动好对象的新增，只有以响应式的方法触发才会被监听到。
• 当需要在数据变化时执行异步或者开销较大的操作时，这个方法是最有效的，这是和前者最大的区别

 举例：

监听简单数据类型

<template>
  <div>
    <el-input v-model="mergeText"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mergeText:'',
    };
  },
  watch:{
    // mergeText值变化即触发
    mergeText(newval,oldVal){
      console.log(this.mergeText,newval,oldVal);
    }
  },
};
</script>

了解watch更多