在模板中放入太多的逻辑会让模板过重难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式，好处：使得数据处理结构清晰；

一、计算属性

依赖于数据，数据更新，处理结果自动更新；
计算属性内部 this 指向vm实例；计算属性最终会出现在vm上，直接读取使用即可。
在template调用时，直接写计算属性名即可；
常用的是getter方法，获取数据，也可以使用setter方法改变数据；计算属性默认只有getter，不过在你需要时，也可以提供一个setter
相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算

get什么时候调用
初次读取 username 时；所依赖的数据发生变化时
如果计算属性要被修改，那必须写set函数去响应修改，且set要引起计算时的数据发生改变

<template>
    <div>
        姓：<input type="text" v-model:value="firstName"> <br/>
        名：<input type="text" v-model="lastName"> <br/>
        姓名：<span>{{username}}</span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            firstName: '老',
            lastName: '六'
        }
    },
    computed:{
        //计算属性
        username: {
            // get有什么作用 当有人读取username时 get就会被调用 且返回值就作为username的值
            // get什么时候调用  1.初次读取fullName时 2.所依赖的数据发生变化时
            get() {
                console.log('get被调用了')
                return this.firstName + '-' + this.lastName
            },
            set(value) {
                // set什么时候调用  当username被修改时
                // 按照指定字符把数组拆开
                const arr = value.split('-')
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
        }
    }
}

二、计算属性缓存VS方法

两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

Vue的计算属性

一、计算属性

二、计算属性缓存VS方法