Vue 计算属性

计算属性

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

原理：底层借用了Object.defineproperty方法提供得getter和setter

1. 要显示的数据不存在，要通过计算得来
2. 在computed对象中定义计算属性
3. 在页面中使用{{方法名}}来计算的结果

备注：

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

computed中需要写入对象

get方法

<input v-model="firstName">
<input v-model="secondName">
<span>{{fullName}}</span>

var vm = new Vue({
    el:"#root",
    data:{
        firstName:"zhang",
        lastName:"san"
    },
    //计算属性
    computed:{
        fullName:{
            get(){
                return this.firstName + this.lastName
            }
        }
    }
})

computed的对象中写入get方法，当有人读取对象的时候，get就会被调用，且返回值就作为对象的的值

<span>{{fullName}}</span>
<span>{{fullName}}</span>
<span>{{fullName}}</span>
<span>{{fullName}}</span>

但是我们多次在页面中使用fullName的时候，发现在控制台中只输出一次"get被调用"，这是因为计算属性是有缓存的，只调用一次

那么我们会想到一个问题：如果我们中途将fullName的值改变，但是页面还是使用缓存中的fullName，那么这样子并不是我们想要的结果

get方法什么时候调用：

1. 初次读取fullName时
2. 所依赖的数据发生变化时

set方法

var vm = new Vue({
    el:"#root",
    data:{
        firstName:"zhang",
        lastName:"san"
    },
    //计算属性
    computed:{
        fullName:{
            get(){
                return this.firstName + this.lastName
            },
            // value就是fullName的是值
            set(value){
                const arr = value.split('-')
                // 修改fullName值，同时修改firstName和lastName
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
        }
    }
})