Vue3-ref、reactive函数的watch

Vue3中引入了一个新的API：ref，它可以将一个简单的JavaScript类型值转换为一个响应式对象。在使用ref创建响应式变量时，我们可以使用value属性来访问或修改该变量的值。

例如：

import { ref } from 'vue'

const count = ref(0)

console.log(count.value) // 输出0

count.value++ // 修改值

console.log(count.value) // 输出1

除了ref之外，Vue3还提供了一个reactive函数，可以将对象转换为响应式对象。在使用reactive创建响应式对象时，我们可以通过修改对象的属性值来触发响应式更新。

例如：

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'Vue3'
})

console.log(state.count) // 输出0

state.count++ // 修改值

console.log(state.count) // 输出1

在使用Vue中观测数据的变化时，我们可以使用watch函数。在Vue3中，watch函数的使用方式与Vue2基本一致，但是Vue3中添加了一些新的使用方式。

其中，主要有两种：

1. 直接观测一个响应式值。

import { watch } from 'vue'

const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log(`count的值发生了变化，新值为${newValue}，旧值为${oldValue}`)
})

count.value++ // 输出：count的值发生了变化，新值为1，旧值为0

1. 观测一个函数的返回值。

import { watch } from 'vue'

const count = ref(0)

watch(() => {
  return count.value * 2
}, (newValue, oldValue) => {
  console.log(`count的值发生了变化，新值为${newValue}，旧值为${oldValue}`)
})

count.value++ // 输出：count的值发生了变化，新值为2，旧值为0

在Vue3中，我们还可以使用watchEffect函数来观测一个函数中使用的所有响应式值的变化。当这些响应式值发生改变时，观测的函数就会被重新执行。

例如：

import { watchEffect, reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'Vue3'
})

watchEffect(() => {
  console.log(`count的值发生了变化，新值为${state.count}`)
})

state.count++ // 输出：count的值发生了变化，新值为1

需要注意的是，watchEffect函数会在组件的挂载阶段立即执行一次。如果我们不想在组件挂载时就执行回调函数，可以在watchEffect函数中传入一个可选的选项对象，其中包含lazy属性，将其设置为true即可。

例如：

import { watchEffect, reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'Vue3'
})

watchEffect(() => {
  console.log(`count的值发生了变化，新值为${state.count}`)
}, { lazy: true })

state.count++ // 不会输出