Vue基础知识[4] - 计算属性

计算属性

定义

要用的属性不存在，要通过已有属性计算得来。

原理

底层借助了 Object.defineproperty 方法提供的 getter 和 setter。

get 函数什么时候执行

（1）当初次读取时会执行一次。
（2）当依赖的数据发生改变时会被再次调用。

优势

与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便。

备注

1. 计算属性最终会出现在VM上，直接读取使用即可。
2. 如果计算属性被修改，那必须写 set 函数去响应修改，且 set 中要引起计算时依赖的数据发生改变。

<script type="text/javascript" >
// 创建 Vue 实例
const vm = new Vue({
    el:'#root', 
    data:{ 
        firstName: '张',
        lastName: '三'
    },
    computed:{
        fullName:{
            get(){
                console.log('get was called');
                return this.firstName + '-' + this.lastName
            },
            set(){
                console.log('set',value);
                const arr = value.split('-')
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
        }
    }
})
script>