computed和watch

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[e]person. lastName = nameArr[1]
})
}

---

watch,第一个参数是要监听的对象，第二个参数是监听的方法，第三个参数是监听的配置

两个小“坑”:
1.监视reactive定义的响应式数据时: oldValue无法正确获取、强制开启了深度监视(deep配置失效)。
2.监视reactive定义的响应式数据中某个属性时: deep配置有效。

数据：

情况一:监视ref所定义的一个响应式数据

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

情况二:监视ref所定义的多个响应式数据

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

情况三:监视reactive所定义的一个响应式数据的全部属性

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

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

watch(()=>person.name ,(newValue,oldValue)=>{
console.log( ' person的name变化了', newValue,oldvalue)})

情况五:监视reactive所定义的一个响应式数据中的某些属性

watch([()=>person.name,()=>person.age], (newValue,oldvalue)=>{console.log( 'person的name或age变化了' , newValue,oldValue)
})

特殊情况

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

watch和value的问题：

如果我们将上面监视person的reactive改成ref那么如何进行监视？？

这个里面的value才是reactive生成的！！！

写法1：

写法2：

---

watchEffect函数

不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

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