vue3- watch监听

1. 监听普通类型

toRefs 转换响应式对象中所有属性为单独响应式数据

🔔 Vue3中控制台打印的时候，看到 Proxy 或者 ref 都表示响应式数据，改变数据会同步到视图。 🔔 ref 可以让基本类型数据也变成响应式

import { ref, watch } from 'vue'

setup() {
    const number = ref(0)
    
    // 监听 number 变量，如果有发生变化，自动运行后面的回调函数
    watch(number, (newVal, oldVal) => {
      console.log({ newVal, oldVal })
    })
    return { number }
  }

• toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。
• toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的

2. 监听响应式对象

• reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

💥reactive 不能让基本类型数据变成响应式

    // 定义响应式对象数据
    const obj = reactive({
      name: '小象',
      age: 18,
    })
   
// 修改名字的函数
    const btn = () => {
      obj.name = '大象'
      console.log('obj变了吗', obj)
    }

3. 监听多个参数

import { ref, watch } from 'vue'
setup() {
    const number = ref(0)
    const msg = ref('你好')
    
    // 监听 number 变量，如果有发生变化，自动运行后面的回调函数
    // 监听 [number, msg] 多个响应式数据数据，其中一个数据发生变化，就会触发 watch 回调函数
    watch([number, msg], (newVal, oldVal) => {
      console.log({ newVal, oldVal })
    })
    return { number, msg }
  }

4. 深度监听和立即执行

💥 { deep: true , immediate: true }

    // 定义响应式对象数据
    const obj = reactive({
      name: '小象',
      age: 18,
      cp: {
        name: '小花',
        age: 16,
      },
    })

    // 监听 reactive 定义的响应式数据
    //   特点1：newVal === oldVal，根本就是同一个内容地址，就是对象本身
    //   特点2：reactive() 对象默认是深度监听，能监听到所有的子属性的变化
    
    // 注意点：
    //   💥 如果监听的属性值是基本类型数据，需要写成函数返回该属性的方式才能监听到

    watch(
      () => obj.cp,
      val => {
        console.log('小象找到CP了要发红包', val)
      },
      { deep: true , immediate: true }
    )