Vue computed 计算属性

含义

计算属性是为了方便代码服用，如拼接相关属性后生成的一个新的值，需要被多处地方使用，就可以使用计算属性这个功能来生成新字段避免重复代码。

computed属性下定义需要计算的属性函数，此函数名会被生成为Vue对象vm的属性。

如下所示：computed计算属性userInfo函数会返回username、age、gender拼接后的新字符串，Vue会生成一个userInfo的属性，挂载在Vue对象上。

完整代码

<div id="app">

    {{ userInfo }}

</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            username: "张三",
            age: 18,
            gender: "男"
        },
        computed: {
            userInfo() {
                return `${this.username} - ${this.age} - ${this.gender}`;
            }
        },
        methods: {
            getInfo() {
                console.log(this.userInfo);
            }
        }
    });
    console.log(vm)
    console.log(vm.userInfo)
</script>