vue中computed和watch的区别（Vue中computed和watch的区别）

今天简单说一下computed和watch的区别              。

先看代码  
  
  
  
  
  
  
，两者怎么实现的 
 
  
 
  
 
  
 
  
 
  
 
  
 
 。 <div id="app"> <input type="text" v-model="firstName"><br> <input type="text" v-model="lastName"><br> <h2>{{fullName()}}</h2> </div> <script> var app = new Vue({ el: #app, data: { firstName: 张, lastName: 三, fullName: 张三 }, // watch 监视  
  
  
  
  
  
  
、监听 
  
  
  
  
  
  
 ，在此处定义监听器 // 作用：监视data中的数据变化 watch: { // 侦听器以函数的形式定义


 


 


 


 


 


 


 ，函数名称就是监视的数据的名称 
 
 
 
 
 
 
，参数就是数据变化后的新值 firstName(val) { console.log(val); this.fullName = val + this.lastName; }, lastName(val) { console.log(val); this.fullName = this.firstName + val; } } }) //计算属性方式实现 var app = new Vue({ el: #app, data: { firstName: 张, lastName: 三, }, computed: { // 计算属性在某些场景下（此示例）  
   
   
   
   
   
   
 ，要比侦听器代码精简













。 fullName() { return this.firstName + this.lastName; } } }) </script>

computed和watch的区别

1 
  
  
  
  
  
  
 、computed是计算属性；watch是监听

 

 

 

 

 

 

 ，监听data中的数据变化
  
  
  
  
  
  
  。

2


 


 


 


 


 


 


 、computed支持缓存
 

 

 

 

 

 

 
，当其依赖的属性的值发生变化时              ，计算属性会重新计算
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，反之













，则使用缓存中的属性值；watch不支持缓存                     ，当对应属性发生变化的时候
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，响应执行 
  
  
  
  
  
  
 。

3 
 
 
 
 
 
 
、computed不支持异步




















，有异步操作时无法监听数据变化；watch支持异步操作 


 


 


 


 


 


 


。

4  
   
   
   
   
   
   
 、computed第一次加载时就监听；watch默认第一次加载时不监听
 
 
 
 
 
 
 。

immediate 组件创建时刻执行与否

immediate: true,第一次加载时监听（默认为false） deep 深度监听 不推荐使用(非常的消耗性能)

监听的属性是对象的话 不开启deep 对象子属性变化不会触发watch

开启了deep 对象内部所有子属性变化 都会触发watch

5

 

 

 

 

 

 

 、computed中的函数必须调用return；watch不是  
   
   
   
   
   
   
 。

6
 

 

 

 

 

 

 
、使用场景：

computed：一个属性受到多个属性影响              ，如：购物车商品结算 

 

 

 

 

 

 

。

watch：一个数据影响多条数据
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，如：搜索数据

 

 

 

 

 

 

 。

数据变化响应













，执行异步操作  
  
  
  
  
  
  
，或高性能消耗的操作 
  
  
  
  
  
  
 ，watch为最佳选择              。