class 3: vue.js 3 计算属性

news2025/1/9 17:17:19

计算属性是一种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.lastName
                    console.log('methods:' + newName)
                    return newName
                }
            },
            computed: {
                fullName() {
                    newName = this.firstName + this.lastName
                    console.log('computed:' + newName)
                    return newName
                }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>