Vue3的watch、computed、watchEffect

计算属性 computed

使用：两种方式，一种是只读，另外一种可读可写

// 计算属性写法1 --- 只读，接收一个回调函数
    let persom = rective({
      firstName: 'zhang'
      lastName: 'san'
    })
    person.fullName = computed(() => {
      const { firstName, lastName } = person
      return firstName + lastName
    })

// 计算属性写法2 --- 可读可写，接收一个有get和set方法的对象
    let persom = rective({
      firstName: 'zhang'
      lastName: 'san'
    })
    person.fullName = computed({
      get () {
        const { firstName, lastName } = person
        return firstName + '-' + lastName
      },

      // value就是计算属性的值 firstName + '-' + lastName
      set (value) {
        console.log('computed-set', value);
        let [firstName, lastName] = value.split('-')
        person.firstName = firstName
        person.lastName = lastName
      }
    })

watch 监听

vue 中 watch 用来监听数据的响应式变化，获取数据变化前后的值，watch 第一个参数只能接收 ref、reactive 对象、数组或者一个回调函数（回调函数的目的只要是用来让 watch 监听某个属性的）

watch(监听的数据，副作用函数，配置对象)

watch(data, (newData, oldData) => {}, {immediate: true, deep: true})

注意 如果监听的对象是 ref 定义的复杂数据类型，监听的时候需要监听 对象.value，如果不加.value，那就需要开启深度监听 deep: true

1. 监听 ref 定义的基本数据类型

 // 一、监听单个值的变化，需要写多个watch
    watch(sum, (newVal, oldVal) => {
      console.log(newVal)
    })

    watch(msg, (newVal, oldVal) => {
       console.log(newVal)
    })

2. 监听多个

// 二、监听多个
    // 监听多个值的变化，把需要监听的值放到一个数组里面
    // 输出的newVal和oldVal都是数组，数组里面的元素的顺序跟第一个参数顺序一样
    watch([sum, msg], (newVal, oldVal) => {
      console.log(newVal) // newVal, oldVal都是数组
    })

3. 监听 reactive 定义的复杂数据类型（整个对象的全部属性）

• 存在的问题 1 -- 获取到的 newVal 和 oldVal 是相同的
• 存在的问题 2 -- 无论被定义的对象层级有多少层，watch 都能监听到最里层的值的变化，就是相当于强制开启了深度监听，并且这个深度监听是关不掉的，但是在 vue2 中监听多级对象需要配置 deep: true

4. 监听某一个属性

监听 name 属性，监听某个属性，第一个函数需要写回调函数并且该函数返回该属性
watch(() => person.name ，副作用函数，配置对象)

5. 监听 reactive 定义的响应式对象的某些属性

watch([() => person.name, () => person.age] ，副作用函数，配置对象)

6. 监听 reactive 定义的响应式对象里面的某个对象，不会被强制开启 deep: true，如果配置深度监听是能生效的，但是这种情况下的 oldVal 也不正确

 let person = reactive({
   name: ''
   job: {
     salary: ''
   }
 })
 watch(() => person.job ，副作用函数，{ deep: true })

watchEffect 监听

传入的一个回调函数作为参数，回调函数也不用接收任何值，当函数体内的依赖项变化的时候，重新执行 watchEffect 函数，并且该函数默认会执行一次，也就是默认开启了 immediate。

    const person = reactive({
      name: '张三',
      age: 19
    })

    watch(person, (newVal, oldVal) => {
      console.log('oldVal', oldVal);
      console.log('newVal', newVal);
    })

    watchEffect(() => {
      const name = person.name
      // name如果变化了，watchEffect函数会立即执行
    })

和 cumputed 的不同点

• cumputed 必须写返回值，并且 cumputed 能缓存结果
• watchEffect 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据，默认初始时就会执行第一次, 从而可以收集需要监视的数据
  监视数据发生变化时回调