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

2021-10-29 17:04:13 阅读：173 来源： 互联网

标签：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中处理。

标签：Vue,computed,watch,methods,缓存,计算,属性
来源： https://blog.csdn.net/weixin_45662637/article/details/121035571

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9