vue3中的computed和watch的使用

关于computed和watch

 // 计算属性 这么定义的fullName是一个计算属性，且是只读的
  let fullName = computed (() => {
    return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
  })
  //计算属性 这么定义的fullName是一个计算属性，可读可写
  let fullName = computed({
    get() {
      return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    },
    set(val) {
      console.log('set', val);
    }
  })

watch监听
作用：监听数据的变化（和vue2的watch作用一致）
特点：vue3中的watch只能监听以下四种数据：
1.ref定义的数据

import {ref,watch} from 'vue'
  let age = ref(8)
  function changeAge() {
    age.value += 1
  }
  // 一：监听ref定义的基本类型数据
  const stopWatch = watch(age,(newVal,oldVal) => {
    console.log('age改变了',newVal)
    if(newVal >= 10) {
      stopWatch()
    }
  })

1）若修改的是ref定义的对象中的属性，newValue和oldValue都是新值，因为他们是同一个对象
2）若修改整个ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了。

  let person = ref({
    name:'小盆有',
    age:'18'
  })
  // 二：监听ref定义的【对象类型】数据，监听的是对象地址值，若想要监听对象内部属性变化，需要手动开启监听deep：true
  // watch：第一个参数被监听的数据，
  // 二监听回调，
  // 三是配置项的deep深度监听，immediate初始触发等
  watch(person,(newValue,oldValue) => {
    console.log('person变化了',newValue,oldValue)
  },{deep:true, immediate:true})

2.reactive定义的数据

let person = reactive({
    name:'小盆有',
    age:'18'
  })
  // 三：监听reactive定义的【对象类型】数据，且默认是开启深度监听的且不可关闭
  watch(person,(newValue,oldValue) => {
    console.log('person变化了',newValue,oldValue)
  },{deep:true, immediate:true})

3.函数返回一个值（‘getter’）

  //四 getter函数 一个函数返回一个值
  watch(() => {return person.name},() => {
    console.log('person.name发生了变化');
  })

监听ref或reactive定义的【对象类型】数据中的某个属性如person.age，注意点如下：
1）若该属性值不是【对象类型】，需要写成函数形式
2) 若该属性值依然是【对象类型】，可以直接编，也可以写成函数，建议写成函数

  watch(() => person.car,() => {
    console.log('person.name发生了变化');
  },{deep:true})

4.一个包含上述内容的数组

watch([()=> person.name,() => person.car.car1],(newVal,oldVal) => {
    console.log(newVal,oldVal,'监听变化了');
  })