Vue中的计算属性

一、计算属性：

1.定义：要用的属性不存在，要通过已有的属性计算得来

2.原理：底层借助了Object.defineproperty方法提供的getter和setter

3.get什么时候调用 :

初次读取fullName时

所依赖的数据发生变化时

4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调用方便

5.备注：

        1）.计算属性最终会出现在vm上，直接读取使用即可

        2）.如果计算属性要被修改，那必须写set函数去响应修改 且set要引起计算时依赖的数据发生改变

6.计算属性默认只有 getter，不过在需要时你也可以提供一个 setter

<div id="root">
        姓：<input type="text" v-model:value="firstName"> <br/>
        名：<input type="text" v-model="lastName"> <br/>
        姓名：<span>{{fullName}}</span>
    </div>
    <script>
        Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
        new Vue({
            el: '#root',
            data:{
                //属性
                firstName:'张',
                lastName: '三'
            },
            computed:{
                //计算属性
                fullName:{
                    // get有什么作用 当有人读取fullName时 get就会被调用 且返回值就作为fullName的值
                    // get什么时候调用  1.初次读取fullName时 2.所依赖的数据发生变化时
                    get(){
                        console.log('get被调用了');
                        return this.firstName + '-' + this.lastName
                    },
                    set(value){
                        // set什么时候调用  当fullName被修改时
                        // 按照指定字符把数组拆开
                        const arr = value.split('-');
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })