学习Vue3 第八章（watch侦听器）

watch需要侦听响应式数据的变化，ref或者reactive包裹的数据

侦听单个数据

<template>
  <div>
    <div>姓 <input type="text" v-model="firstName" /></div>
    <div>名 <input type="text" v-model="lastName" /></div>
    <div>全名：{{ fullName }}</div>
    <button @click="change">改变姓名</button>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
const firstName = ref('张')
const lastName = ref('三')

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    ;[firstName.value, lastName.value] = newValue.split('-')
  },
})

const change = () => {
  fullName.value = '李-四'
}

watch(firstName, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})
</script>

侦听多个数据

watch([firstName, lastName], (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

侦听深层次数据

<script setup>
import { computed, ref, watch, reactive } from 'vue'
const firstName = ref('张')
const lastName = ref('三')

const obj = ref({
  name: '张三',
  age: 18,
  wife: {
    name: '李四',
    age: 18,
  },
})

const data = reactive({
  name: '张三',
  age: 18,
  wife: {
    name: '李四',
    age: 18,
  },
})

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    ;[firstName.value, lastName.value] = newValue.split('-')
  },
})

const change = () => {
  fullName.value = '李-四'
  obj.value.wife.name = '王五'
  data.wife.name = 'yoga'
}

// ref
watch(
  obj,
  (newValue, oldValue) => {
    console.log(newValue, oldValue)
  },
  {
    deep: true, // 深度监听，新值和旧值是一样的
  },

  // reactive 默认开启深度监听 deep:true
  watch(data, (newValue, oldValue) => {
    console.log(newValue, oldValue)
  }),
)
</script>

侦听对象中的某一个属性

// 监听对象中某个属性
watch(
  () => obj.value.wife.name,
  (newValue, oldValue) => {
    console.log(newValue, oldValue)
  }
)

立即执行

watch(
  () => obj.value.wife.name,
  (newValue, oldValue) => {
    console.log(newValue, oldValue)
  }，
  { immediate: true, // 立即执行}
)