Vue3 中的计算属性和监听属性

1. 计算属性computed

   作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）

<template>
    <div class="person">
        <input type="text" v-model="person.firstName"/>
        <br>
        <input type="text" v-model="person.lastName"/>
        <br>
        <span>全名：{{ person.fullName }}</span>
        <input type="text" v-model="person.fullName"/>
    </div>
</template>
    
<script>
import { reactive,computed } from 'vue'
    export default {
        name: 'Computed',
        setup() {
            let person = reactive({
                firstName: '李',
                lastName: '四',
            })

             //简写形式（只能读）
             person.fullName = computed(() => {
                 return person.firstName + '-' + person.lastName
             })


            //完整形式（可读可改）
            person.fullName = computed({
                get() {
                    return person.firstName + '-' + person.lastName
                },
                set(value){
                    let names = value.split('-')
                    person.firstName = names[0]
                    person.lastName = names[1]
                },
            })

            return {
                person,
            }
            
        }
    }
</script>

2. 监听属性 watch

<template>
    <div>{{ sum }}</div>
    <button @click="sum++">点我+1</button>
    <hr>
    <div>{{ msg }}</div>
    <button @click="msg += '!'">点我修改信息</button>

    <hr>
    <h3>姓名：{{ person.name }}</h3>
    <h3>年龄：{{ person.age }}</h3>
    <h3>薪资：{{ person.job.j1.salary }}K</h3>
    <button @click="person.name += '!'">点我修改姓名</button>
    <button @click="person.age++">点我修改年龄</button>
    <button @click="person.job.j1.salary += 10">点我修改薪资</button>
</template>
    
<script>
import { reactive, ref, watch, watchEffect } from 'vue'
    export default {
        name: 'Watch',
        setup() {
           let sum = ref(0)
           let msg = ref('hello')
           let person = reactive({
               name: '张三',
               age: 18,
               job: {
                   j1: {
                       salary: 20
                   }
               }
           })

           // .....下文在这边补充


            return {
                sum,
                msg,
                person
            } 
        }
    }
</script>

【情况一】监听ref定义的一个响应式数据

监听sum的值的变化 

           watch(sum, (newVal, oldVal) =>{
                console.log('sum的值发生了变化', newVal, oldVal);
           }, {immediate: true})  // {immediate: true, deep: true}

【情况二】 监听ref定义的多个响应式数据

监听sum, msg的值的变化

           watch([sum, msg], (newVal, oldVal) => { // 包装成数组的形式
                console.log('sum或msg的值发生了变化', newVal, oldVal);
           },{immediate: true})

【情况三】监听reactive定义的一个响应式数据的全部属性

注意：此处无法正确的获取oldValue

             watch(person, (newVal, oldVal) =>{
                console.log('person的值发生了变化', newVal, oldVal)
            }) // {deep: false} 加上这个，就监测不到薪资改变了 

【情况四】监听reactive定义的一个响应式数据中的某个属性

            watch(() => person.name, (newVal, oldVal) =>{
                console.log('person的name属性发生了变化', newVal, oldVal)
            })

【情况五】监听reactive定义的一个响应式数据中的某些属性

            watch([() => person.name, () => person.age], (newVal, oldVal) =>{
                console.log('person的name或age属性发生了变化', newVal, oldVal)
            })

【情况六】特殊情况 

             watch(() => person.job, (newVal, oldVal) =>{
                console.log('person的job属性发生了变化', newVal, oldVal)
             }, {deep: true}) 

3. watchEffect

    用谁就监视谁

            watchEffect(() =>{ // 用谁就监视谁

                const x1 = sum.value

                const x2 = person.job.j1.salary

                console.log('watchEffect所指定的回调函数执行了')

            })