计算属性

计算属性

在某些情况下，我们可能需要对数据进行转化或者需要将多个数据结合起来再去显示同时也是为了template模板中的表达式更加简洁。

本质

1，我们所定义的computed属性里面其实是由get和set方法组成的（而平常使用时调用的其实就是我们computed里面的get方法），因此我们一般只需要实现computed的get方法就可以了，因此我们会通过属性的方式去使用computed而不是通过函数的方式。

<template id="my-app">
    <h2>{{fullName}}</h2>
</template>

<script src="../js/vue.js"></script>
<script>
    const App = {
        template: "#my-app",
        data() {
            return {
                firstName: "Kobe",
                lastName: "Bryant",
            };
        },
        computed: {
            // 常使用fullName的get方法
            fullName() {
                return this.firstName + " " + this.lastName;
            },

            // fullName的get和set方法
            fullName: {
                get: function () {
                    return this.firstName + " " + this.lastName;
                },
                set: function (newValue) {
                    console.log(newValue);
                    const names = newValue.split(" ");
                    this.firstName = names[0];
                    this.lastName = names[1];
                },
            },
        }
    };

    Vue.createApp(App).mount("#app");
</script>

2，computed和methods的对比

当computed被多次调用时，只要所依赖的属性值不发生变化那么就不会进行重新计算，因此此时只会被调用一次，因此性能更好，而methods被多次调用时，不管依赖值是否发生了改变，它每次都会进行重新计算。

3，计算属性在vue3中的使用

在前面的Options API中，我们是使用computed选项来完成的，而在Composition API中，我们可以在setup函数中使用computed方法来编写一个计算属性，但是其实本身用法都是一样的，基本没有变化。