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 の新しいコンポジション 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 に答える