VUE语法（计算属性、监视属性）

一、计算属性

        计算属性是一种特殊的响应式属性，它们根据响应式依赖项的值计算得出。计算属性非常适合用于当你需要根据现有数据派生出一些状态时，它们是缓存的，只有当依赖项改变时才会重新计算。

<div id="app">
        性：<input type="text" v-model="firstName1">
        名：<input type="text" v-model="lastName1">
        姓名：<input type="text" v-model="username1"><br><br>
        性：<input type="text" v-model="firstName2">
        名：<input type="text" v-model="lastName2">
        姓名：<input type="text" v-model="username2"><br><br>
    </div>
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return{
                    firstName1:'',
                    lastName1:'',
                    firstName2:'',
                    lastName2:'',
                }
            },
            computed:{//计算属性
                username1(){ //构建函数，在计算属性中调用函数
                    return this.firstName1+''+ this.lastName1
                },
                username2:{
                    get(){
                        return this.firstName2+''+ this.lastName2
                    },
                    set(val){//"张 三"
                        let strArr = val.split("")//['张','三']
                        this.firstName2=strArr[0]
                        this.lastName2=strArr[1]
                    }
                }
            }
        }).mount("#app")
    </script>

二、监视属性

        

        在Vue 3中，响应式系统进行了全面的重写，并引入了Composition API，这为监视属性（或称为响应式数据）提供了更加灵活和强大的方式。Vue 3使用Proxy代替了Vue 2中的Object.defineProperty，这使得响应式系统能够拦截更多类型的操作，如数组索引的修改和属性的添加/删除等。

        在Vue 3中，你可以使用watch或watchEffect来监视属性的变化。这两个API都是vue库的一部分，在Composition API中使用时需要从vue中显式导入。

        使用watch:

    <div id="app">
        姓：<input type="text" v-model="firstName">
        名：<input type="text" v-model="lastName">
        姓名：<input type="text" v-model="username"><br><br>
    </div>
    <script>
        const {createApp} = Vue
        createApp({
            data(){
                return{
                    firstName:'',
                    lastName:'',
                    username:''
                }
            },
            watch:{
                username(newVal,oldVal){ //参数一：新的数据；参数二：旧的数据
                    if(newVal!=''){
                        let strArr = newVal.split("")
                        this.lastName = strArr[0]
                        this.firstName = strArr[1]
                    }else{
                        this.lastName = ''
                        this.firstName = ''
                    }
                }
            }
            
        }).mount("#app")