javascript - Vue项目中DOM元素变成Null

Question

我正在开发一个代码输入器，但由于某种原因，该元素变为Null，而我无法弄清楚原因。我是 Vue 新手，知道这段代码是有效的，因为我之前已经在 https://CodeSpent.dev 完成了这个代码。 (实时预览)在 Django/Python 中，直到我确定学习更多前端框架是有值(value)的。

所以我相信这与 Vue 处理渲染的方式有关，但我只学习了几个小时，而且不知道在哪里查看它。

代码如下:

  var codeBlock = document.getElementById('code')
  console.log(codeBlock)
  setTimeout(() => {

    new TypeIt(codeBlock, {
      strings: [codeSample],
      speed: 20
    }).go();

  }, 1000)

  setInterval(function () {

    const code = Prism.highlight(codeBlock.innerText, Prism.languages.python, 'python');
    document.getElementById('real-code').innerHTML = code;
  }, 10);

如果我们查看控制台，我们可以在第 23 行看到，其中 codeBlock 显然不为 null，但当我们尝试使用它时，它会变为 null。有什么突出的地方吗？

完整组件:

<template>
  <div id="code-block" class="bb">
    <pre class="code-pre">
    <code id="real-code"></code>
  </pre>

    <div id="code" class="language-py"></div>
  </div>

</template>

<script>
  import 'prismjs'
  import 'prismjs/themes/prism.css'
  import TypeIt from 'typeit';

  export default {
    name: 'CodeTyper'
  }

  var codeSample = '\x0a\x3E\x3E\x20\x6E\x61\x6E\x6F\x20\x63\x6F\x64\x65\x73\x70\x65\x6E\x74\x2E\x70\x79\x0A\x66\x72\x6F\x6D\x20\x70\x79\x74\x68\x6F\x6E\x20\x69\x6D\x70\x6F\x72\x74\x20\x44\x65\x76\x65\x6C\x6F\x70\x65\x72\x0A\x66\x72\x6F\x6D\x20\x70\x6F\x72\x74\x66\x6F\x6C\x69\x6F\x2E\x6D\x6F\x64\x65\x6C\x73\x20\x69\x6D\x70\x6F\x72\x74\x20\x50\x6F\x72\x74\x66\x6F\x6C\x69\x6F\x0A\x0A\x63\x6C\x61\x73\x73\x20\x43\x6F\x64\x65\x53\x70\x65\x6E\x74\x28\x44\x65\x76\x65\x6C\x6F\x70\x65\x72\x29\x3A\x0A\x20\x20\x20\x20\x6E\x61\x6D\x65\x20\x3D\x20\x27\x50\x61\x74\x72\x69\x63\x6B\x20\x48\x61\x6E\x66\x6F\x72\x64\x27\x0A\x20\x20\x20\x20\x6C\x6F\x63\x61\x74\x69\x6F\x6E\x20\x20\x3D\x20\x27\x50\x69\x74\x74\x73\x62\x75\x72\x67\x68\x2C\x20\x50\x41\x2C\x20\x55\x53\x27\x0A\x20\x20\x20\x20\x6C\x61\x6E\x67\x75\x61\x67\x65\x73\x20\x3D\x20\x5B\x27\x70\x79\x74\x68\x6F\x6E\x27\x2C\x20\x27\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x27\x2C\x20\x27\x63\x73\x73\x27\x2C\x27\x68\x74\x6D\x6C\x35\x27\x5D\x0A\x20\x20\x20\x20\x66\x61\x76\x6F\x72\x69\x74\x65\x73\x20\x3D\x20\x5B\x27\x64\x6A\x61\x6E\x67\x6F\x27\x2C\x20\x27\x74\x65\x6E\x73\x6F\x72\x66\x6C\x6F\x77\x27\x2C\x20\x27\x74\x77\x69\x74\x63\x68\x27\x2C\x20\x27\x64\x69\x73\x63\x6F\x72\x64\x27\x2C\x20\x27\x6F\x70\x65\x6E\x63\x76\x27\x5D\x0A\x0A\x20\x20\x20\x20\x64\x65\x66\x20\x5F\x5F\x73\x74\x72\x5F\x5F\x28\x73\x65\x6C\x66\x29\x3A\x0A\x20\x20\x20\x20\x20\x20\x72\x65\x74\x75\x72\x6E\x20\x73\x65\x6C\x66\x2E\x6E\x61\x6D\x65'
  var codeBlock = document.getElementById('code')
  console.log(codeBlock)
  setTimeout(() => {

    new TypeIt(codeBlock, {
      strings: [codeSample],
      speed: 20
    }).go();

  }, 1000)

  setInterval(function () {

    const code = Prism.highlight(codeBlock.innerText, Prism.languages.python, 'python');
    document.getElementById('real-code').innerHTML = code;
  }, 10);


</script>

<style>
  #real-code {
    color: #5c5edc;
  }

  #code-block {
  background-color: #141D22;
  color: #fff;
  flex: 1;
  height: 355px;
}

#code-block-sub {
  background-color: rgb(34, 32, 35);
  color: #fff;
  width: 100%;
  padding: 0 15px;
  height: 150px;
}

#code,
#code-sub {
  padding: 0px !important;
  margin: 0px !important;
  display: none;
  color: #fff !important;
}


</style>

Answer 1

首先是一个呈现部分字符串的模板...

<template>
  <div>
    <pre>{{partialCode}}</pre>
    <v-btn @click="startAppending()"></v-btn>
  </div>
</template>

然后将 partialCode 字符串绑定(bind)到数据中...

export default {
  data () {
    return {
      partialCode: '',
      // other data
    }
  },

您可能想要开始附加 onCreate 或其他一些生命周期钩子(Hook)(或者一旦您异步接收代码数据)，但逻辑的关键是您现在可以只更改partialCode 的状态并让 DOM 自行更新。 ..

  methods: {
    startAppending() {
      this.partialCode = ''  // start fresh each time
      const code = Prism.highlight(codeBlock.innerText, Prism.languages.python, 'python')
      let index = 0
      let interval = setInterval(() => {
        if (this.partialCode.length === code.length) {
          clearInterval(interval)
        } else {
          this.partialCode = code.slice(0, index++)
        }
      }, 200);
    },
    // the other methods
  }