Vue关于watch、computed与methods

在做项目的时候，我们会需要监听数据的变化，从而做一些相应的操作。通过使用watch、computed与methods可以实现此目的。

• methods

         +
         =
         


 

通过keyup事件来监听数据的变化，效果如下图：

• watch

使用watch可以监视data中指定数据的变化，然后触发这个 watch 中对应的function处理函数

         +
         =
         
  

  

效果如下：

• computed

计算属性的本质是一个方法，只不过在使用计算属性时，把它们的名称直接当作属性来使用的，并不会把计算属性当作方法去调用。
注意：
只要计算属性这个function内部，所要用到的任何data中的数据发生了变化，就会立即重新计算这个计算属性的值。
计算属性的求值结果会被缓存，方便下次直接使用；如果任何数据都没有发生变化，则不会重新求值。

         +
         =
         

        
{{fullname}}
        
{{fullname}}
        
{{fullname}}

    

    

当firstname只改变了一次的时候，四个fullname的值随之改变，因为求值的结果会被缓存，其余三个fullname不会重新求值，因此此时控制台只打印出一个ok。效果如下图：

• watch监听路由对象

    
    
    
    
    
    
    



    

        
        登录
        注册

        
        
            
        
        
    

    

当点击登录时，打印出“欢迎进入登录界面”

当点击注册时，打印出“欢迎进入注册界面”

watch、computed与methods的对比

1.computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用，并且需要return一个值;
2.methods方法表示一个具体的操作，主要书写业务逻辑；
3.watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体。

• computed和methods区别

  1.computed属性的方法可以作为属性变量，methods只能被调用
  2.computed属性的方法计算值有缓存作用，再次使用不会被计算（直接使用）

• computed 和 watch 的区别和运用的场景

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

1. 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
2. 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。