前言

vue中的computed和watch我们经常会用到    
    
    
    
    ，那么在什么场景下使用computed和watch  


     


     


     


     


，两者又有什么区别呢


 




 




 




 




，傻傻分不清楚 
    
    
    
    
。记录一下   

   

   

   

   ，温故而知新！

computed

computed是计算属性   

     

     

     

     

，基于data中声明过或者父组件传递的 props 中的数据通过计算得到的一个新值



  




  




  




  




，这个新值只会根据已知值的变化而变化  


  


  


  


  ，换句话说    
     
     
     
     
，这个属性依赖其他属性




   




   




   




   




，由其他属性计算而来的
     


     


     


     


    。

举个栗子

<view>姓名：{{ fullName }}</view> data: {firstName: David,lastName: Beckham }, computed: {fullName: function() { //方法的返回值作为属性值 return this.firstName + + this.lastName} }

在 computed 属性对象中定义计算属性的方法 



 



 



 



 ，和取data对象里的数据属性一样以属性访问的形式调用                         ，即在页面中使用 {{ }} 的方式来显示计算的结果 




 




 




 




 


。

注意点：计算属性 fullName 不能在 data 中定义




    




    




    




    




，而计算属性值的相关已知值在data中




















， 如果 fullName 在 data 中定义了会报错

如果 computed 属性值是一个函数                         ，那么默认会走 get 方法 



     



     



     



     



，必须要有一个返回值





















，函数的返回值就是属性的属性值 

   

   

   

   

。计算属性定义了 fullName 并返回对应的结果给这个变量    
    
    
    
    ，变量不可被重复定义和赋值
     

     

     

     

   。

computed缓存功能

在页面中多次显示 fullName

<view>姓名：{{ fullName }}</view> <view>姓名：{{ fullName }}</view> <view>姓名：{{ fullName }}</view> computed: {fullName: function () { console.log(computed) // 只打印一次 return this.firstName + + this.lastName} } computed 内定义的 function 只会执行一次  


     


     


     


     


，当初始化显示或者相关的 data 
    
    
    
    
、props 等属性数据发生变化的时候才会调用* 只有当 computed 属性被使用后


 




 




 




 




，才会执行 computed 的代码   

   

   

   

   ，只要依赖数据不变   

     

     

     

     

，直接取缓存中的计算结果  




  




  




  




  

。只有依赖型数据发生改变



  




  




  




  




，computed 才会重新计算 


  


  


  


  


。计算属性的高级

在computed 中的属性都有一个 get 和一个 set 方法  


  


  


  


  ，当数据变化时    
     
     
     
     
，调用 set 方法
     
     
     
     
  。通过计算属性的 getter/setter 方法来实现对属性数据的显示和监视




   




   




   




   




，即双向绑定   




   




   




   




   
。

computed: {fullName: {get() { // 读取当前属性值的回调 



 



 



 



 ，根据相关的数据计算并返回当前属性的值return this.firstName + + this.lastName},set(val) { // 当属性值发生改变时回调                         ，更新相关的属性数据 const names = val ? val.split() : []; this.firstName = names[0] this.lastName = names[1]}} }

watch

通过 vm 对象的 $watch() 或 watch 配置来监听 Vue 实例上的属性变化




    




    




    




    




，或某些特定数据的变化




















，然后执行某些具体的业务逻辑操作 



 



 



 



 



。当属性变化时                         ，回调函数自动调用 



     



     



     



     



，在函数内部进行计算                     。它可以监听data





















，props    
    
    
    
    ，computed 内的数据
    




    




    




    




    。

举个栗子

watch: {firstName: function(val) { this.fullName = val + + this.lastName},lastName: function(val) {this.fullName = this.firstName + + val}}

注意点： 监听函数有两个参数  


     


     


     


     


，第一个参数是最新的值


 




 




 




 




，第二个参数是输入之前的值   

   

   

   

   ，顺序一定是新值   

     

     

     

     

，旧值



  




  




  




  




，如果只写一个参数  


  


  


  


  ，就是最新属性值
























。

对于复杂数据类型需要用到深度监听 deep                     。

举个栗子

data: {fullName: {firstName: David,lastName: Beckham} }, watch: {fullName: {handler(newVal, oldVal) {console.log(newVal);console.log(oldVal);},deep: true} }

如果要监听对象的单个属性的变化    
     
     
     
     
，有两种方法

直接监听对象的属性 watch:{fullName.firstName: function(newVal,oldVal){console.log(newVal,oldVal);} } 与 computed 属性配合使用




   




   




   




   




，computed 返回想要监听的属性值 



 



 



 



 ，watch 用来监听 computed: {firstNameChange() {return this.fullName.firstName} }, watch: {firstNameChange() {console.log(this.fullName)} }

总结

watch和computed都是以Vue的依赖追踪机制为基础的                         ，当某一个依赖型数据发生变化的时候




    




    




    




    




，所有依赖这个数据的相关数据会自动发生变化




















，即自动调用相关的函数                         ，来实现数据的变动
     



     



     



     



     。

当依赖的值变化时 



     



     



     



     



，在watch中





















，可以做一些复杂的操作    
    
    
    
    ，而computed中的依赖  


     


     


     


     


，仅仅是一个值依赖于另一个值


 




 




 




 




，是值上的依赖























。

使用场景

computed：用于处理复杂的逻辑运算；一个数据受一个或多个数据影响；用来处理watch和methods无法处理的   

   

   

   

   ，或处理起来不方便的情况 
    
    
    
    
。 watch：用来处理当一个属性发生变化时   

     

     

     

     

，需要执行某些具体的业务逻辑操作



  




  




  




  




，或要在数据变化时执行异步或开销较大的操作；一个数据改变影响多个数据
     


     


     


     


    。

区别

computed

初始化显示的属性数据发生变化的时候调用； 计算属性不在 data 中  


  


  


  


  ，它是基于data 或 props 中的数据通过计算得到的一个新值    
     
     
     
     
，这个新值根据已知值的变化而变化； 在 computed 属性对象中定义计算属性的方法




   




   




   




   




，和取data对象里的数据属性一样 



 



 



 



 ，以属性访问的形式调用； 如果 computed 属性值是函数                         ，那么默认会走 get 方法




    




    




    




    




，必须要有一个返回值




















，函数的返回值就是属性的属性值； computed 属性值默认会缓存计算结果                         ，在重复的调用中 



     



     



     



     



，只要依赖数据不变





















，直接取缓存中的计算结果    
    
    
    
    ，只有依赖型数据发生改变  


     


     


     


     


，computed 才会重新计算； 在computed中的


 




 




 




 




，属性都有一个 get 和一个 set 方法   

   

   

   

   ，当数据变化时   

     

     

     

     

，调用 set 方法 




 




 




 




 


。

watch

主要用来监听某些特定数据的变化



  




  




  




  




，从而进行某些具体的业务逻辑操作  


  


  


  


  ，可以看作是 computed 和 methods 的结合体； 可以监听的数据来源：data    
     
     
     
     
，props




   




   




   




   




，computed内的数据； watch支持异步； 不支持缓存 



 



 



 



 ，监听的数据改变                         ，直接会触发相应的操作； 监听函数有两个参数




    




    




    




    




，第一个是最新的值




















，第二个参数是输入之前的值                         ，顺序是新值 



     



     



     



     



，旧值 

   

   

   

   

。

以上就是在Vue中computed和watch区别啦





















，希望对你有帮助
     

     

     

     

   。

最后

最近找到一个VUE的文档    
    
    
    
    ，它将VUE的各个知识点进行了总结  


     


     


     


     


，整理成了《Vue 开发必须知道的36个技巧》  




  




  




  




  

。内容比较详实


 




 




 




 




，对各个知识点的讲解也十分到位 


  


  


  


  


。

有需要的小伙伴   

   

   

   

   ，可以点击下方卡片领取   

     

     

     

     

，无偿分享