如何改变脚本逻辑中的反应值并让它更新 Vue.js 中的 DOM 3 Composition API？

Question

我正在制作一个简单的组件 (SFC)，它循环遍历字符串列表并用值替换标题中的文本。

我计划对我的所有组件使用组合 API，因为我更喜欢这种结构和设计。

我以为我已经正确制作了我的组件，但它不会在 DOM 中自动更新。

日志正确显示了更新的值，但在最初调用 setup() 之后，该值永远不会改变。

组合 API 样式（不更新 DOM）：

<template>
  <div>
    <h1>{{ text }}</h1>
  </div>
</template>

<script>
import { ref } from "@vue/composition-api";

export default {
  props: {
    textList: Array,
    interval: Number
  },

setup(props) {
    let text = ref(props.textList[0]);
    let cycler;

    function startCycling() {
      let index = 0;
      text = props.textList[index];
      cycler = setInterval(() => {
        if (index >= props.textList.length) {
          index = 0;
        }

        console.log("Index: " + index);
        text = props.textList[index];

        console.log("Text: " + text);
        index++;
      }, props.interval);
    }

    function stopCycling() {
      clearInterval(cycler);
    }

    startCycling();

    return { text, startCycling, stopCycling };
  }
};
</script>

我想知道我的代码逻辑是否有误，所以我使用选项 API 创建了相同的组件并立即运行：

选项API风格（作品）：

export default {
  props: {
    textList: Array,
    interval: Number
  },

  data() {
    return {
      text: "",
    };
  },

  methods: {
    startCycling: function() {
      let index = 0;
      this.text = this.$props.textList[index];

      cycler = setInterval(() => {
        if (index >= this.$props.textList.length) {
          index = 0;
        }

        console.log("Index: " + index);
        this.text = this.$props.textList[index];

        console.log("Text: " + this.text);
        index++;
      }, this.$props.interval);
    },

    stopCyling: function() {
      clearInterval(cycler);
    },
  },

  mounted() {
    this.startCycling();
  },
}

如何在 Vue 的新组合中复制此功能 API？

我需要对 text 做什么，才能在代码中更改它并保持反应性？简单地使用 ref(text) 并返回它，似乎并没有这样做。

Answer 1

在 onMounted 挂钩中调用 startCycling();

 onMounted(() => {
      startCycling();
    })

但是你必须像 ref 一样导入那个钩子：

 import { ref,onMounted } from "@vue/composition-api";

当您想更新使用 ref 创建的变量时，您应该像

那样改变它的值

text.value = props.textList[index];

完整代码：

<script>
import { ref,onMounted  } from "@vue/composition-api";

export default {
  props: {
    textList: Array,
    interval: Number
  },

setup(props) {
    const text = ref(props.textList[0]);
    let cycler;

    function startCycling() {
      let index = 0;
      text.value = props.textList[index];
      cycler = setInterval(() => {
        if (index >= props.textList.length) {
          index = 0;
        }

        console.log("Index: " + index);
        text.value = props.textList[index];

        console.log("Text: " + text);
        index++;
      }, props.interval);
    }

    function stopCycling() {
      clearInterval(cycler);
    }

     onMounted(() => {
      startCycling();
    })

    return { text, startCycling, stopCycling };
  }
};
</script

如何改变脚本逻辑中的反应值并让它更新 Vue.js 中的 DOM 3 Composition API？

How to mutate a reactive value in script logic and have it update the DOM, in Vue.js 3 Composition API?

vue.js

vue-component

vuejs3

vue-composition-api