computed

• 与Vue2.x中computed配置功能一致
• 写法

import {computed} from 'vue'setup(){...//计算属性——简写let fullName = computed(()=>{return person.firstName + '-' + person.lastName})//计算属性——完整let fullName = computed({get()return person.firstName + '-' + person.lastName},set(value){const nameArr = value.split('-')person.firstName = nameArr[0]person.lastName = nameArr[1]}})
}

watch

• 注意
  • 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
  • 监视reactive定义的响应式数据中的某个属性时：deep配置有效。

情况一：监视ref定义的响应式数据

• 监视ref定义的对象，改变某一个属性时，newValue和oldValue是同一个值;
• 若改变整个对象newValue和oldValue不一样;

	 watch(sum, (newValue, oldValue) => {console.log('sum变化了', newValue, oldValue)}, {immediate: true})

情况二：监视多个ref定义的响应式数据(写成数组格式)

	watch([sum, msg], (newValue, oldValue) => {console.log('sum或msg变化了', newValue, oldValue)})

情况三：监视reactive定义的响应式数据,deep默认开启，且关不掉

	 watch(person, (newValue, oldValue) => {console.log('person变化了', newValue, oldValue)}, {immediate: true, deep: false}) //此处的deep配置不再奏效

情况四：监视reactive定义的响应式数据中某个属性

• 可以监视整体改变，也可以监视某个属性改变
• 监视的属性不是【对象类型】，需写成函数
• 监视的属性是【对象类型】，可直接编，也可使用函数，推荐使用函数并添加deep属性
  （因为直接写person，无法监听到整个对象的改变;deep是为了深层监听）

    watch(() => person.job, (newValue, oldValue) => {console.log('person的job变化了', newValue, oldValue)}, {immediate: true, deep: true})

情况五：监视reactive定义的响应式数据中某些属性

    watch([() => person.job, () => person.name], (newValue, oldValue) => {console.log('person的job变化了', newValue, oldValue)}, {immediate: true, deep: true})

特殊情况

    watch(() => person.job, (newValue, oldValue) => {console.log('person的job变化了', newValue, oldValue)}, {deep: true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

停止监视

    const stopWatch =  watch(sum, (newValue, oldValue) => {console.log('sum变化了', newValue, oldValue)if (sum > 10) {stopWatch() // 停止监视}})

watchEffect

• watch的套路：既要指明监视的属性，也要指明监视的回调。

• watchEffect的套路：不用指明监视的哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

• watchEffect有点像computed：

• 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

// watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。初始化也会执行一次watchEffect(()=>{const x1 = sum.valueconst x2 = person.ageconsole.log('watchEffect配置的回调执行了')
})