vue学习（59）计算属性和监视

知识点

1. 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]
       }
   })
}

2. watch

• 与Vue2.x中watch配置功能一致(handler,immediate,deep)
• 监听ref
  1. 监听一个基本数据类型(注意不要加.value因为是基本数据类型.value后将得到一个数字)

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

2. 监听多个基本数据类型（写成数组的格式）

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

• 监听reactive
  1. 监听全部属性
     ①此处无法获取到oldValue,oldValue的值和newValue的值一样，但是ref的监听不存在这样的问题，你可能会想着，使用ref去实现对象的响应式，但其实你使用ref包裹对象，底层还是调用了reactive这个函数，所以并不能解决问题
     ②强制开启了深度监视，即使你设置了deep为false，也没有用
     ③去监视reactive中的某个属性，写成函数的形式，你会惊奇的发现，可以获取到oldValue了

const person = reactive({
    name‘peiqi’,
    age:18，
    job:{
        j1:{
            salary:20
        }
    }
});
watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false})

2. 监视某一个属性(要写成函数的形式)

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

3. 监视某些属性

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

4. 特殊情况（监视的是reactive中的一个对象,比如你改了salary,如果不开启deep=true,那么会出现监测不到，deep又生效了）

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

相当于去直接监视reactive整个对象值，oldValue获取不到，deep不成效，但是去监视reactive里面的某个属性值，就又都生效了

5. 如果我们使用ref去包裹一个对象，需要开启监视应该怎么做呢？

watch(person,()=>{})

不生效，因为value里面的值是一个对象，我改变对象的属性，并不会引起地址的改变，所以检测不到，有两个办法，一个是.value,一个是开始深度监视deep=true