Vue3+ts+vite 并且使用 <script lang="ts" setup>语法 watch 无效
时间: 2024-02-14 20:15:27 浏览: 27
关于使用 Vue3 + TypeScript + Vite 并且使用 `<script lang="ts" setup>` 语法时 watch 无效的问题,可能是由于使用了 `ref` 或 `reactive` 定义的响应式变量没有正确引用到。在 `<script lang="ts" setup>` 中,响应式变量需要使用 `define` 函数定义,并且在组件中使用时需要使用 `toRef` 或 `toRefs` 函数将其转换成引用变量。
例如,下面是一个定义了响应式变量 `count` 并使用 `watch` 监听其变化的示例:
```vue
<template>
<div>{{ count }}</div>
</template>
<script lang="ts" setup>
import { defineComponent, define } from 'vue'
const state = define({
count: 0
})
const countRef = toRef(state, 'count')
watch(countRef, (newValue, oldValue) => {
console.log('count changed', newValue, oldValue)
})
</script>
```
在上面的示例中,我们使用 `define` 函数定义了响应式变量 `count`,并使用 `toRef` 函数将其转换成引用变量 `countRef`,然后使用 `watch` 监听 `countRef` 的变化。这样就可以正常地监听到 `count` 的变化了。
希望这个解答能够帮到你!