一、computed简介

computed计算属性，依赖多个属性，任意数据改变，计算属性重新执行。
计算属性包括getter读取和setter修改。默认是getter，计算属性可以依赖其他计算属性。

二、getter与setter的使用

<template>
    姓：<input v-model="firstName" />
    名：<input v-model='lastName' />
</template>
<script>
    import {reactive,computed} from 'vue'
    export default{
        name:'App',
        const state=reactive({
            firstName:'张',
            lastName:'三'
        })
        state.name=computed(()=>{
            get(){
                return state.firstName+'-'+state.lastName
            },
            set(value){
                const arr=value.split('-')
                state.firstName=arr[0]
                state.lastName=arr[1]
            }
        })
    }
</script>

当firstName与lastName的任意一值改变,都会重新获取计算属性的get()方法。

当修改name计算属性的值，都会重新调用计算属性的get()方法。

三、methods方法与computed计算属性的区别

computed:数据会进行缓存，只有数据改变时，才会重新执行。

methods:每次页面渲染就会执行。

当具有大量计算，数据使用频繁，使用计算属性。