【Vue基础】computed，watch，methods的用法区别

在编程的中我们常常可以发现对于某些功能我们可以采用方法实现，也可以用watch或者计算属性去实现，那么这三种实现有什么区别呢？？？

---

通一个简单的案例来研究一下

methods

methods是一个对象属性的函数，methods不存在缓存，，在重新渲染的时候，函数总会重新调用执行。

methods实现：

<!--准备容器--> 
<div id="root">
    姓：<input type="text"  v-model="firstName"><br/><br/>
    名：<input type="text"  v-model="lastName"><br/><br/>
    全名：<span>{{fullName()}}</span>
</div>
</body>
<script type="text/javascript">
   Vue.config.productionTip = false //阻止vue生成生产提示。

   //创建实例
  var vm = new Vue({
       el:'#root',
       data:{
        firstName:'Foo',
        lastName:'Beere'
       },

       methods: {
           fullName() {
               console.log("***通过方法实现***")
               return this.firstName+' '+this.lastName
               
           },
       },

   })

computed

 计算属性是对原有的属性进行处理并返回一个变量值。计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

computed实现：

 我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

watch

监听属性wacth

watch实现：

 

 看起来watch比计算属性要复杂，那我们为什么还要使用watch呢。最重要一点是watch允许我们进行异步操作。

 

使用场景

一个简单粗暴的总结：

当需要在数据变化时执行异步或开销较大的操作时用watch，当需要获得一个结果和响应式缓存时用computed，methods用的是也是最多的，一般的事件绑定，普通函数，请求数据方法都是在methods中处理。