web-dev-qa-db-ja.com

Vueが完全にロードおよび初期化された後にのみVueJSコードを実行する方法は？

私は、CMSシステムを介して複数のWebサイトに配置されるVueコンポーネントに取り組んでいます。私が遭遇する問題は、jsスクリプトの読み込み順序が正しい場合でも、いつかこのエラーが発生することです：

_Uncaught ReferenceError: Vue is not defined
    at HTMLDocument.<anonymous>
_

Vueはcdnを介してロードされ、コンポーネントのコードの上にあります。

すべてのVueコードは次のように実行されます。

_document.addEventListener("DOMContentLoaded", () => {
  // here is the Vue code
});
_

DOMContentLoadedイベント内にsetTimeout（）を追加しましたが、それでもそのトリックは実行しませんでした。 window.onload = function()はすべての場合に機能しませんでした。私はまだ時々そのエラーを受け取りました。スクリプトは本文にロードされます。

それが別のアプローチになりうることをご存知ですか？ Vueコードが実行される瞬間に、Vueがロードされ、ページで初期化する準備ができていることを確認します。ありがとうございます！

javascripthtmlvue.js
16
Bogdan Lungu

ロードイベント を使用して、すべてのリソースのロードが完了するまで待機します。

<script>
  window.addEventListener("load", function(event) {
    // here is the Vue code
  });
</script>

詳細説明

DOMContentLoadedは、HTMLが解析およびレンダリングされ、DOMが構築されたときに発生するイベントです。通常、アプリの存続期間中にかなり高速で起動されます。一方、loadは、すべてのリソース（画像、スタイルシートなど）がネットワークから取得され、ブラウザーで使用可能になったときにのみ起動されます。

特定のスクリプトのロードイベント を使用することもできます。

18
Roy J

vue mounted()を使用してページのロード時にコードを実行し、updated()を使用してコンポーネント操作の後に実行するため、完璧なソリューションは両方を組み合わせることですRoy jおよびvue ライフサイクルフック

_mounted() {
    window.addEventListener('load', () => {
         // run after everything is in-place
    })
},

// 99% using "mounted()" with the code above is enough, 
// but incase its not, you can also hook into "updated()"
//
// keep in mind that any code in here will re-run on each time the DOM change
updated() {
    // run something after dom has changed by vue
}
_

window.addEventListener()は省略できますが、引き続き機能しますが、jquery outerHeight(true)のようなものを使用している場合は+が欠落する可能性があることに注意してください。正しい値を取得しています。

アップデート1：

window.addEventListener('load')の代わりに_document.readyState_を使用する別の方法もあります。

_mounted() {
  document.onreadystatechange = () => { 
    if (document.readyState == "complete") { 
        // run code here
    } 
  }
},
_

アップデート2：

私がこれまで見つけた最も信頼できる方法は、$nextTick_でdebounceを使用することです。

_import debounce from 'lodash/debounce'

// bad
updated() {
    this.$nextTick(debounce(() => {
        console.log('test') // runs multiple times
    }, 250)) // increase to ur needs
}

// good
updated: debounce(function () {
    this.$nextTick(() => {
        console.log('test') // runs only once
    })
}, 250) // increase to ur needs
_

debounceとupdatedを使用する場合、注意が必要ですので、必ずテストしてくださいそれは先に進んでいます。

アップデート3：

MutationObserver を試すこともできます

36
ctf0