vue中Computed、Methods、Watch区别

一、computed 和 methods

computed是计算属性，methods是方法，都可以实现对 data 中的数据加工后再输出。

(1). methods: 结果不会被缓存，如果反复调用，会导致重复计算

(2). computed: 结果会被vue缓存，即使反复调用，也不会反复计算。只在首次加载时计算一次！

总之：数据量大，需要缓存的时候用 computed ；每次确实需要重新加载，不需要缓存时用 methods 。

二、computed 和 watch

computed 和 watch的原理相同，内部都是使用watcher来实现的。不同的是computed具有缓存功能。
计算属性顾名思义就是通过其他变量计算得来的另一个属性， fullName 在它所依赖 firstName ， lastName 这两个变量变化时重新计算自己的值。
另外，计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName 和 firstName都没有发生改变，多次访问 fullName 计算属性会立即返回之前的计算结果，而不必再次执行函数。
而侦听器 watch 是侦听一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以监听当前页码，当页码变化时执行对应的获取数据的函数。

总结

(1). 调用方式: 

a. methods: 必须主动调用，自由调用，且必须加()

b. computed: 通常不会被自由调用，只用于绑定语法中，计算一个值，且不用加()

c. watch: 不会被自由调用，只有当被监视的变量值改变时，才自动执行，通常不需要有返回值

(2). 目的:

a. methods: 专门执行一项任务，比如: 登录，注册等

b. computed: 专门计算一个值，比如: 计算购物车总价

c. watch: 专门监视一个变量，比如: 一边输入一边执行搜索

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

案例

1.计算属性Computed

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

 2.Computed 与 methods 对比

<!--HTML部分-->
<div id="app">
    <h1>{{message}}</h1>
    <p class="test1">{{methodTest}}</p>
    <p class="test2-1">{{methodTest()}}</p>
    <p class="test2-2">{{methodTest()}}</p>
    <p class="test2-3">{{methodTest()}}</p>
    <p class="test3-1">{{computedTest}}</p>
    <p class="test3-2">{{computedTest}}</p>
</div>

<!--script部分-->
let vm = new Vue({
    el: '#app',
    data: {
        message: '我是消息，'
    },
    methods: {
        methodTest() {
            return this.message + '现在我用的是methods'
        }
    },
    computed: {
        computedTest() {
            return this.message + '现在我用的是computed'
        }
    }
})

3.watch

Vue的watch属性可以用来监听data属性中数据的变化

 <div id="app">
      <input type="text" v-model="firstname" />
    </div>
    <script type="text/javascript">
      var vm = new Vue({
        el:"#app",
        data:{
          firstname:"",
          lastname:""
        },
        methods:{},
        watch:{
          firstname(){
            console.log(this.firstname)
          }
        }
      })
     </script>