私は、CMSシステムを介して複数のウェブサイトに配置されるVueコンポーネントに取り組んでいます。問題は、jsスクリプトの読み込み順序が正しくても、時々次のようなエラーが発生することです。
Uncaught ReferenceError: Vue is not defined
at HTMLDocument.<anonymous>
Vue is loaded via cdn and it's above the component's code.
Vueのコードはすべてこのように実行されます。
document.addEventListener("DOMContentLoaded", () => {
// here is the Vue code
});
DOMContentLoadedイベントの中にsetTimeout()を追加してみましたが、それでもうまくいきませんでした。
また、window.onload = function()
もすべてのケースで動作しませんでした。今でも時々このエラーが出ます。
スクリプトはボディ内に読み込まれます。
何か別の方法があると思いますか?Vueのコードが実行された瞬間に、Vueがロードされ、ページ上で初期化される準備ができていることを確認したいのです。 ありがとうございました。
vueのmounted()
でページロード時にコードを実行し、updated()
でコンポーネント操作後にコードを実行するので、Roy jとvue lifecycle hooksの両方を組み合わせれば完璧なソリューションになります。
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
}
jqueryのouterHeight(true)
のようなものを使用している場合は、正しい値を取得していることを確認するために、ウィンドウイベント内で使用することをお勧めします。
window.addEventListener('load')の代わりに、
document.readyState`を使う方法もあるので、上記のようにすることができます。
mounted() {
document.onreadystatechange = () => {
if (document.readyState == "complete") {
// run code here
}
}
},
これまでに見つけた最も信頼できる方法は、$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を併用すると厄介なことになるので、先に進む前に必ずテストしてください。
MutationObserver]1も試してみてください。
ロードイベント]1を使用して、すべてのリソースのロードが完了するまで待ちます。
<script>
window.addEventListener("load", function(event) {
// here is the Vue code
});
</script>
さらに詳しい説明。
DOMContentLoadedは、HTMLが解析され、レンダリングされ、DOMが構築されたときに発生するイベントです。 レンダリングされ、DOMが構築されたときに発生するイベントです。これは通常、アプリのライフタイムの中で、かなり早い段階で発生します。 このイベントは、アプリのライフタイムの中で、かなり速く発生します。一方、
loadは以下の場合にのみ発生します。 全てのリソース(画像、スタイルシートなど)がネットワークから取得されて 一方、
load`は、すべてのリソース(画像、スタイルシートなど)がネットワークから取得され、ブラウザで利用可能になったときにのみ発行されます。
また、特定のスクリプトに対するloadイベントを使用することもできます。