vue3中watch的使用和注意要点，特别是reactive和props！

简单使用

1.监听单个的ref

如果ref是简单数据类型，要加value，复杂数据类型不用加

const user = ref({
  username: 'jack',
  age: 19,
  pet: {
    name: '小花',
    age: 2
  }
})
const changeUser = function () {
  user.value.pet.name = 'xiaohei'
}

watch(user.value, (newVal) => {
  console.log('user发生了变化', newVal)
})

2.监听多个数据组成的数组，参数的顺序需要和数组中的顺序一致

watch([firstName, lastName], ([newFirstName, newLastName]) => {
  fullName.value = newFirstName + newLastName
})

3.监听getter函数

watch(
  () => firstName.value + lastName.value,
  (newVal) => {
    fullName.value = newVal
  }
)

特别注意

4.监听reactive创建的响应式对象

会隐式创建一个深度监听器。不管嵌套数据的哪一层发生变化，回调函数都会执行

const person = reactive({
  username: 'jack',
  age: 18,
  sex: '男',
  pet: {
    name: '小花',
    age: 2
  }
})

const change = function () {
  person.pet.name = 'xiaohei'
}

watch(person, (newVal) => {
  console.log('person发生了变化', newVal)
})

// 只监听reactive创建的响应式对象的某个属性呢？==> 改为getter函数的写法（不然就监听person整体）
watch(
  () => person.pet,
  (newVal) => {
    console.log('person发生了变化', newVal)
  },
  { deep: true } 

//当使用 getter 函数作为源时，回调只在此函数的返回值变化时才会触发。如果你想让回调在深层级变更时也能触发，你需要使用 { deep: true } 强制侦听器进入深层级模式。在深层级模式时，如果回调函数由于深层级的变更而被触发，那么新值和旧值将是同一个对象。

总结：reactive监听整体，自动深度监听；监听某个属性需要用getter函数并使用{ deep: true } 进入深度监听

5.监听props

• watch监听 props 中的基本类型数据，需要通过 getter 函数返回值的形式（()=>props.xxx）才能监听

• watch监听 props 中的引用类型数据，且父组件中没有改变地址指向时，可以直接监听

• watch监听 props 中的引用类型数据，且父组件中改变了地址指向时，需要通过 getter 函数返回值的形式（()=>props.xxx）才能监听

码字不易，望点赞支持一波~