在 Vue.js 3 设置中观看

Question

我必须将当前的 Vue.js 代码更改为 Vue.js 3 <script setup> 代码，但我对该watch属性有问题。watchin的正确语法是什么<script setup>？

当前代码：

  watch: {
    config: {
      handler(newConfig) {
        if (this.$refs && this.$refs.range && this.$refs.range.noUiSlider) {
          this.$refs.range.noUiSlider.destroy()
          const newSlider = this.noUiSliderInit(newConfig)
          return newSlider
        }
      },
      deep: true,
    },
  }

它应该是什么样子的<script setup>？

Answer 1

Vue.js 以其优秀的文档而闻名 - Watchers（确保您选择组合 API）。

基本上：

import {watch} from "vue";
//
//
//
watch(config, (newConfig) => {
    // Your code
}, { deep: true });

显然，“您的代码”将与您当前拥有的不同，但我假设您只需要有关如何使用watch.

即，所有这些this.*在组合 API 中都明显不同（您从不使用this）。

值得注意的是，当您直接在反应式对象上调用 watch() 时，它将隐式创建一个深度观察者 - 回调将在所有嵌套突变上触发 ：

所以，你可能甚至不需要这个deep:true选项 - 当然，问题中只有这么小的代码片段，很难说是什么config。