而不是使用const word = ref(null)作为refs。您可以直接将其称为模板中的常量word。它应该还是一样的工作。

<template>
  <div>
    <span>{{ word }}</span>
  </div>
</template>

在setTimeout函数中，将word.value.textContent = newWord更改为word.value = newWord。
这是更新的代码。测试和它的工作。

<script setup lang="ts">
onMounted(() => {
  randomizeText()
  wordChanger
})

onBeforeRouteLeave(() => {
  clearTimeout(wordChanger)
})

const wordChanger = setInterval(randomizeText, 4000)

const word = ref('') // UPDATED
const words = reactive(['Word-1', 'Word-2'])
let i = 0

function randomizeText() {
  i = randomNum(i, words.length)
  const newWord = words[i]

  setTimeout(() => {
    word.value = newWord // UPDATED
  }, 200) // time to allow opacity to hit 0 before changing word
}

function randomNum(num, max) {
  let j = Math.floor(Math.random() * max)

  // ensure diff num every time
  if (num === j) {
    return randomNum(i, max)
  } else {
    return j
  }
}
</script>
<template>
  <div>
    <span>{{ word }}</span>
  </div>
</template>

希望对你有帮助。

这可能是一个计时问题（当代码更改元素时，元素未被装入）
您可以在不直接设置textContent属性的情况下做到这一点，方法是使用v-html指令，只需更改引用的变量（ref）。

import {onMounted, reactive, ref} from "vue";
import {onBeforeRouteLeave} from "vue-router";

let wordChanger;

onMounted(() => {
    randomizeText()
    wordChanger = setInterval(randomizeText, 4000);
})

onBeforeRouteLeave(() => {
    clearTimeout(wordChanger)
})

let word = ref('Hoi')
const words = reactive(['Word-1', 'Word-2'])
let i = 0

function randomizeText() {
    i = randomNum(i, words.length)
    const newWord = words[i]

    setTimeout(() => {
        word.value = newWord
    }, 200) // time to allow opacity to hit 0 before changing word
}

function randomNum(num, max) {
    let j = Math.floor(Math.random() * max)

    // ensure diff num every time
    if (num === j) {
        return randomNum(i, max)
    } else {
        return j
    }
}

<span v-html="word"></span>

你可能用错了ref 'word'，我在下面分享了一些其他细节：-注意：我在更改的行中添加注解，以帮助您更好地理解

setup() {
    

    const word = ref(null);
    const words = reactive(['Word-1', 'Word-2']);

    function randomizeText(i) {
      const p = randomNum(i, words.length);
      const newWord = words[p];

      setTimeout(() => {
        word.value = newWord;
      }, 200); // time to allow opacity to hit 0 before changing word
    }

    function randomNum(num, max) {
      let j = Math.floor(Math.random() * max);

      // ensure diff num every time
      if (num === j) {
        // notice here as well I use num instead of i
        return randomNum(num, max);
      } else {
        return j;
      }
    }
    
    const wordChanger = setInterval(randomizeText, 4000);
    
    onMounted(() => {
      randomizeText(0); // start with 0
      // wordChanger; // no need using this here
    });

    onBeforeRouteLeave(() => {
      clearTimeout(wordChanger);
    });

    return {
      word,
    };
  },

<span>{{ word }}</span>

这里有一个演示：-https://stackblitz.com/edit/vue-rap7bb?file=src/components/HelloWorld.vue