Vue3中如何在setup的watch里调用methods中的函数？

在Vue3里，Composition API的setup函数和Options API的methods属于不同的上下文：setup执行时组件实例还未完全初始化，而且setup内部的this并非组件实例，所以直接用this.fn_defined_in_methods或者getCurrentInstance拿不到methods里的方法。要实现setup中watch回调调用methods方法，可按以下步骤操作：

解决方案：通过ref桥接方法 #

1. 在setup中定义一个ref变量，用来存储methods里的方法
2. 在Options API的created钩子中，将methods的方法赋值给这个ref
3. 在watch回调中调用ref中存储的方法

完整代码示例：

<script>
import { ref, watch } from 'vue'

export default {
  setup() {
    const variable = ref('初始值')
    // 定义ref用来存储methods中的方法
    const methodsFn = ref(null)

    watch(variable, (currentValue, oldValue) => {
      // 确保方法已赋值再调用
      if (methodsFn.value) {
        methodsFn.value()
      }
    })

    // 将ref暴露给Options API的钩子
    return {
      methodsFn
    }
  },
  created() {
    // 在created钩子中，把methods的方法赋值给setup里的ref
    this.methodsFn.value = this.fn_defined_in_methods
  },
  methods: {
    fn_defined_in_methods() {
      console.log('成功调用methods中的方法')
      // 这里可以写你的业务逻辑
    }
  }
}
</script>

为什么这个方法可行？ #

• created钩子的执行时机在setup之后，此时组件实例已初始化，methods里的方法已经挂载到实例上
• 通过ref作为桥梁，打通了Composition API和Options API的上下文，让setup能拿到methods的方法

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