计算属性computed
对于任何复杂逻辑,你都应当使用计算属性
两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 lastName和firstName还没有发生改变,多次访问fullName计算属性会立即返回之前的计算结果,而不必再次执行函数。
相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
举例:
<div id="app">
{{fullName}}
{{gofullName}}
</div>
<script src="./js/vue.js"></script>
<script>
const App = new Vue({
el: '#app',
data: {
lastName: 'zeng',
firstName: 'qinghua'
},
methods: {
gofullName() {
return this.lastName + this.firstName
}
},
computed: {
fullName() {
return this.lastName + this.firstName
}
}
})