vue中的 computed和watch基本使用

在日常使用vue中，我们可能在编程时候会遇到过这样的问题，就是将一个页面的字符串转为大写。如果是起步者的话，可能会使用这样的操作：

    

    
姓名：{{ username }}
    
用户名转换为大写进行输出
    
姓名：{{ username.toUpperCase() }}
    
    
  

这样按理来说是可以实现的，可是视图层不应该做逻辑操作那么多，视图层应该只负责渲染就好了。
所以我们可以在js封装好方法，

    

  
姓名：函数： {{ converUserNameToUpperCase(username) }}
    
    
  

所以我们可以在模型多增加一个转大写的方法，在视图只需要调用方法并且传入参数就可以了。要是更高级一点，我们还可以使用computed对象

computed

    

  
姓名：computed: {{ upperUsername }}
    
    
  

值得注意的是upperUsername 这里定义为一个，但是调用的时候是一个属性,所以插值表达式直接

姓名：computed: {{ upperUsername }}

。此外，compute对象的upperUsername是依赖于username属性的，所以，当username改变的时候，computed对象会发生变化，username所对的方法toUpperCase()也发生变化。
除了compute还有watch对象也是可以实现的。

watch

作用： 监视某个模型变量的变化，一旦这个模型变量发生变化，watch 对应函数里面执行，执行的时候，会把模型变量的新值传递给第一个参数，旧值传递第二个参数。
watch的原理也很容易明白

    

  
姓名：computed: {{ upperUsername }}
    
    
  

会同时打印新值和旧值，

watch.png

但是值得注意的是，watch监视的值必须是模型变量data里面的值，但是computed里面监视的值，在模型变量data里面不能出现，否则就是重复定义。