组合式API - computed
计算属性基本思想和Vue2保持一致，组合式API下的计算属性只是修改了API写法
下面这个计算属性会检测原始数据的变化，如果原始数据改变了，那么计算属性也会被调用！
组合式API - watch
侦听一个或者多个数据的变化，数据变化时执行回调函数，两个额外参数
- immediate控制立刻执行
- deep开启深度侦听
1. 侦听单个数据
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const count = ref(0)
// 2. 调用watch 侦听变化
watch(count, (newValue, oldValue)=>{//一个是变化之前的老值，一个是变化之后的新值
console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
})
</script>
2. 侦听多个数据
侦听多个数据，第一个参数可以改写成数组的写法
这两个数据任何一个变化都会引起函数的触发！
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const count = ref(0)
const name = ref('cp')
// 2. 调用watch 侦听变化
watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
console.log(`count或者name变化了，[newCount, newName],[oldCount,oldName])
})
</script>
3. immediate
在侦听器创建时立即触发回调（第一次就执行），响应式数据变化之后继续执行回调
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const count = ref(0)
// 2. 调用watch 侦听变化
watch(count, (newValue, oldValue)=>{
console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
},{
immediate: true
})
</script>
4. deep
通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep
需要注意的是deep有性能损耗，尽量不要使用deep
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const state = ref({ count: 0 })
// 2. 监听对象state
watch(state, ()=>{
console.log('数据变化了')
})
const changeStateByCount = ()=>{
// 直接修改不会引发回调执行
state.value.count++
}
</script>
添加deep属性就可以触发了
**
<script setup>
// 1. 导入watch
import { ref, watch } from 'vue'
const state = ref({ count: 0 })
// 2. 监听对象state 并开启deep
watch(state, ()=>{
console.log('数据变化了')
},{deep:true})
const changeStateByCount = ()=>{
// 此时修改可以触发回调
state.value.count++
}
</script>
5.精确侦听对象的某个属性
需求：在不开启deep的前提下，侦听age的变化，只有age变化时才执行回调
