computed—计算属性

1、定义：被计算出来的属性就是计算属性
2、原理：低层借助了 Object.defineproperty 方法提供的 getter 和 setter
3、get 函数什么时候执行？
（1）初次读取时会执行
（2）当依赖发生改变时会被在次调用
4、优势：与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便。
5、注意事项：
（1）计算属性最终会出现在vm上，直接读取使用即可。
（2）如果计算属性要被修改，那必须写 set 函数去响应修改，且 set 中要引起计算时依赖的数据发生改变

例：

        <div id="root">
            <input type="text" v-model="firstName" />
            <br />
            <br />
            <input type="text" v-model="lastName" />
            <br />
            <br />
            <span>{{ fullName }}</span>
        </div>
        <script>
        new Vue({
            data() {
                return {
                    firstName: '李',
                    lastName: '杰'
                }
            },
            computed: {
                fullName: {
                    //得到通过计算的属性
                    get() {
                        return this.firstName + '-' + this.lastName
                    },
                    //传参修改计算属性
                    set(value) {
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        }).$mount('#root')
        </script>

例2（只有在不修改时才能使用，也就是不使用 setter）

            computed: {
                fullName(){
                        return this.firstName + '-' + this.lastName
                    }
                 }