如何将Options API的watch代码重构为Composition API的watch hook写法

你贴出的 Options API 监听逻辑，可以按以下步骤用 Composition API 的watch钩子重构：

第一步：导入watch钩子 #

在<script setup>或者setup函数顶部导入Vue提供的watch：

import { watch } from 'vue'

第二步：适配监听源与逻辑 #

首先区分你要监听的$things的来源：

情况1：$things是当前组件内声明的响应式变量 #

如果是用ref/reactive声明的本地响应式变量，直接传入watch即可，示例代码：

// 假设以下变量/方法都是你在setup中已经定义好的
// const $things = ref({}) 示例响应式变量
// const someFunction = () => {}
// const someVariable = ref(false)
// const getSomethingHere = async () => {}

watch(
  $things,
  async (val, oldVal) => {
    someFunction()
    if(someVariable.value) getSomethingHere()
  },
  { deep: true }
)

情况2：$things是全局挂载的实例属性 #

如果是挂载在Vue原型上的全局属性，需要通过getCurrentInstance获取实例代理后再监听：

import { watch, getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
// 其他变量/方法同上定义

watch(
  () => instance?.proxy?.$things,
  async (val, oldVal) => {
    someFunction()
    if(someVariable.value) getSomethingHere()
  },
  { deep: true }
)

注意事项 #

• 如果你监听的是ref包裹的基本类型值，直接传变量给watch第一个参数即可；如果要监听对象的某个嵌套属性、或者非直接声明的响应式值，需要用箭头函数（getter）返回要监听的目标
• 第三个配置项和Options API的watch配置完全一致，除了deep外，如果需要初始执行一次回调，可以额外加immediate: true
• setup中访问ref声明的变量需要取.value，如果是用reactive声明的对象不需要加

内容的提问来源于stack exchange，提问作者YanLipu