在编程的中我们常常可以发现对于某些功能我们可以采用方法实现,也可以用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
watch实现:
看起来watch比计算属性要复杂,那我们为什么还要使用watch呢。最重要一点是watch允许我们进行异步操作。
使用场景
一个简单粗暴的总结:
当需要在数据变化时执行异步或开销较大的操作时用watch,当需要获得一个结果和响应式缓存时用computed,methods用的是也是最多的,一般的事件绑定,普通函数,请求数据方法都是在methods中处理。