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.valueconst x2 = person.job.j1.salaryconsole.log('watchEffect所指定的回调函数执行了')})