Блог

Моя цель — лучшее решение для первого контентного рисования с Vue.js или Nuxt.js

Я думаю, что лучшим решением является загрузка компонента с импортом после загрузки первых элементов.

Я не знаю, является ли это лучшим решением, я хотел бы услышать ваше мнение.

Каков наилучший способ кодирования?

Попытка:

Файл загружается с app.js , как загрузить только время, когда я установил true ?

 <template>
  <h1>Hello World</h1>

  <!-- First content here -->

  <foo v-if="documentLoaded" />
</template>

  

 mounted() {
  document.onreadystatechange = () => {
    if (document.readyState == "complete") {
      console.log('Page completed with image and files!')

      setTimeout(() => {
        this.documentLoaded = true
      }, 2000);

    }
  }
},
components: {
  Foo: () => import(/* webpackChunkName: "component-foo" */ '~/components/foo')
}
  

Вы можете определить, когда динамически загружаемый компонент будет эффективно загружен, используя import, как вы сказали, в сочетании с v-if для компонента.

 <mycomp v-if="readyStateComplete"/>

//readyStateComplete is a boolean from data.
  

Установка логического значения в true вызовет загрузку, затем инициализацию и отображение компонента.

 mounted() {
  document.onreadystatechange = () => {
    if (document.readyState == "complete") {
      console.log('Page completed with image and files!')

      // HOW LOAD COMPONENTS HERE?
      this.readyStateComplete = true

    }
  }
},
  

Если вы хотите, чтобы ваш компонент загружался одновременно с изображением, но отображался только после, используйте v-show вместо v-if.