vue3监听js文件的值

在 Vue 3 中，使用 `watch` API 监听 JavaScript 文件的值也非常简单。与 Vue 2 相比，Vue 3 中的 `watch` API 发生了一些变化，但是基本用法仍然相似。

下面是一个简单的例子：

假设你有一个 JavaScript 文件，其中定义了一个变量 `myValue`，你想要在 Vue 3 应用中监听这个变量的变化并做出响应。

首先，将这个文件导入到 Vue 3 组件中：

import { ref } from 'vue'
import myScript from './myScript.js'

然后，在 Vue 3 组件中，使用 `watch` API 来监听 `myValue` 变量的变化：

export default {
  setup() {
    const myValue = ref(myScript.myValue)

    watch(myValue, (newValue, oldValue) => {
      console.log('myValue changed from', oldValue, 'to', newValue)
      // 做出响应
    })

    // 在某个时刻改变 myValue 变量的值
    setTimeout(() => {
      myScript.myValue = 'new value'
    }, 1000)

    return {
      myValue
    }
  }
}

在上面的例子中，我们使用 `ref` 函数将 `myValue` 变量转换为响应式对象，并在 `setup` 函数中使用 `watch` API 监听其变化。在 `setup` 函数中，我们还使用 `setTimeout` 函数来模拟在某个时刻改变 `myValue` 变量的值。

需要注意的是，Vue 3 的 `watch` API 的回调函数接收的参数发生了变化。在 Vue 3 中，回调函数的第一个参数为新值，第二个参数为旧值，而在 Vue 2 中则是相反的。