watch、computed、methods的区别

一、计算属性【computed】

• 对于任何复杂逻辑，你都应当使用计算属性

• 是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新

• 默认使用的是getter属性

• 当一个数据受多个数据影响时，可以使用computed

<!-- 复杂运算 -->
<div>{{message.split('').reverse().join('')}}</div>
<!-- 计算属性代替复杂运算 -->
<div>{{reverseMessage}}</div>
computed: {
<!-- 计算属性的getter -->
reverseMessage: function () {
        return this.message.split('').reverse().join('');
    }
}

二、Computed 和 Watch 的区别

1. computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理
2. computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
3. computed和watch的区别 watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象

      　data(){
　　　return {
　　　　　　　　　　example0:"",
　　　　　　　　　　example1:"",
　　　　　　　　　　example2:{
　　　　　　　　　　　　inner0:1, 　　　　　　　　　
            　　　innner1:2 　　　　　　　　　
        　}
　　　　　　}
　　　　},
watch:{
　example0(newVal,oldVal){//监控单个变量
       ……
   }，
example2(newVal,oldVal){//监控对象
       ……
   }，
}

             watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

 三、Computed 和 Methods 的区别