1

我正在制作一个简单的组件（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>

我想知道我的代码逻辑是否出错，所以我使用 Options 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 的新 Composition API 中复制此功能？

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

4

1 回答 1

2

呼入钩子startCycling();_ onMounted

 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
于 2020-08-29T14:58:45.720 回答