【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
               
           },
       },

   })

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

computed

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

computed实现:【Vue基础】computed,watch,methods的用法区别【Vue基础】computed,watch,methods的用法区别

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

watch

监听属性wacth

watch实现:

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

【Vue基础】computed,watch,methods的用法区别 看起来watch比计算属性要复杂,那我们为什么还要使用watch呢。最重要一点是watch允许我们进行异步操作

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

 

使用场景

一个简单粗暴的总结:

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

 

 

上一篇:vue 学习


下一篇:Zookeeper 4、Zookeeper开发