VUE计算属性的优点和形式

Java和C#里的属性是函数运行的动态结果表示，而VUE里的属性也是这样，通过计算属性，让VUE对数据能够一致管理，并且HTML部分更简洁，而这种分工一直是VUE强调的目的。

方法我想对于学编程的来说都很熟悉，如下，是在vue中方法的定义以及简单使用
const app = Vue.createApp({
data() {
return { count: 4 }
},
methods: {
increment() {
// `this` 指向该组件实例
this.count++
}
}
})

const vm = app.mount('#app')

console.log(vm.count) // => 4

vm.increment()

console.log(vm.count) // => 5

这段代码中，我们定义了一个increment()方法，它的功能是使我们的count加1，我们调用一次，我们的count就自增1
方法很好理解，可计算属性又是干什么用的呢，如下是在vue中计算属性的简单使用
<div id="computed-basics">
<p>Has published books:</p>
<span>{{ publishedBooksMessage }}</span>
</div>

Vue.createApp({
data() {
return {
author: {
name: 'John Doe',
books: [
'Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery'
]
}
}
},
computed: {
// 计算属性的 getter
publishedBooksMessage() {
// `this` 指向 vm 实例
return this.author.books.length > 0 ? 'Yes' : 'No'
}
}
}).mount('#computed-basics')

在段代码中，我们发现我们的计算属性处理的逻辑也可以直接放到我们的{{}}中，那为什么要再定义一个计算属性，这样不是多此一举吗？但试想，如果不用计算属性，直接在我们的{{}}中处理逻辑，势必会大大降低我们代码的可读性，如下
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

这段代码我们很难第一眼就明白它要表达的含义，我们得先去读一下其中的逻辑才能够知道它要显示的数据的目的，而如果我们用计算属性，如下
{{ publishedBooksMessage }}

就立马知道这段表达的数据信息，但是还有一个疑问，这样的逻辑处理我们的方法不是也能实现的吗？我们观察上面方法与计算属性的实现以及使用，发现计算属性跟方法相比几乎一模一样，除了方法是在methods里定义，计算属性是在computed里定义，以及方法调用的时候要加上括号，除此之外，别无异样。那什么时候使用计算属性，什么时候使用方法呢，都能处理相同的逻辑，并且在实现上，差别不大，这着实令人困惑。
其实表面上两者没有多大的区别，不同的是计算属性是基于它们的反应依赖关系缓存的。计算属性只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 author.books 还没有发生改变，多次访问publishedBookMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。而我们的方法每次调用都会重新计算结果，这样看来在某些情况下，计算属性的这种机制使得在某些情况下使用计算属性比使用方法相比是一种更好的选择。

友情链接

汕头招聘网 | 山东招聘网 | 郑州教育培训 | 软件下载