class 3: vue.js 3 计算属性
- 计算属性是一种Options API，Options API是一种通过对象定义属性、方法等框架API的方式
- 我们知道，在模板中可以直接通过插值语法显示一些data属性中的数据。但是在某些情况下，可能需要对数据进行一些转化操作之后再显示，或者需要将多个数据结合起来进行显示
- 如果我们需要对多个data数据进行运算或由三元运算符来决定结果，或者对数据进行某种转化，然后显示结果。在模板中直接使用表达式，可以很方便的实现这些功能。但如果在模板中放入太多的逻辑，会让模板过重和难以维护；如果多个地方都使用相同逻辑，会有大量重复代码，不利于代码的复用，因此，应该尽可能将模板中的逻辑抽离出去。这样有两种解决办法，第一种是将逻辑抽取到方法中，放到methods的选项中，但是这样的话，所有data中数据的使用过程都变成了一个方法的调用，所以比较好的解决方法就是使用计算属性(
computed)
下面是一个多种方案实现同一个需求的具体案例，可以比较一下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"></div><template id="my-app">
<!-- 模板语法--><h3>模板语法</h3><h4>{{ firstName + " " + lastName }}</h4><h4>{{ score >= 60 ? '及格' : '不及格' }}</h4><h4>{{ message.split(" ").reverse().join(" ") }}</h4>-------------<!-- methods--><h3>methods</h3><h4>{{ getFullName() }}</h4><h4>{{ getResult() }}</h4><h4>{{ getReverseMessage() }}</h4>-------------
<!-- 计算属性--><h3>计算属性</h3><h4>{{ fullName }}</h4><h4>{{ result }}</h4><h4>{{ reverseMessage }}</h4></template><script src="./js/vue.js"></script><script>const App = {template: '#my-app',data() {return {firstName: "clarence",lastName: "Liu",score: 90,message: "Hello World"}},methods: {getFullName() {return this.firstName + this.lastName},getResult() {return this.score >= 60 ? '及格' : '不及格'},getReverseMessage() {return this.message.split(" ").reverse().join(" ")}},computed: {fullName() {return this.firstName + this.lastName},result() {return this.score >= 60 ? '及格' : '不及格'},reverseMessage() {return this.message.split(" ").reverse().join(" ")}}}Vue.createApp(App).mount('#app')</script>
</body>
</html>
- 计算属性会基于它的依赖关系对计算结果进行缓存；当计算属性依赖的数据不变化时，就无须重新计算，但是一旦发生变化，计算属性依然会重新进行计算，下面是一个methods和computed针对这一点进行对比的例子
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"></div><template id="my-app"><h3>methods</h3><h4>{{ getFullName() }}</h4><h4>{{ getFullName() }}</h4><h4>{{ getFullName() }}</h4>-------------
<!-- 计算属性--><h3>计算属性</h3><h4>{{ fullName }}</h4><h4>{{ fullName }}</h4><h4>{{ fullName }}</h4></template><script src="./js/vue.js"></script><script>const App = {template: '#my-app',data() {return {firstName: "clarence",lastName: "Liu",}},methods: {getFullName() {newName = this.firstName + this.lastNameconsole.log('methods:' + newName)return newName}},computed: {fullName() {newName = this.firstName + this.lastNameconsole.log('computed:' + newName)return newName}}}Vue.createApp(App).mount('#app')</script>
</body>
</html>
- 可以看到控制台中methods运行了三次，而computed的函数只运行了一次，这说明了计算属性会对计算结果进行缓存这一性质