Vue.js
ライフサイクルフック
サーチ…
Vue 1.xのフック
init
created
$el
設定の前に行われますが、data observation
た後、computed properties
、watch/event callbacks
、およびmethods
が設定されました。
beforeCompile
compiled
directives
はリンクされていますが、まだ$el
が利用可能になる前にあります。
ready
$el
が完了し、インスタンスが初めてDOMに注入されます。
attached
directive
によって$el
がDOMに接続されるか、インスタンスが$appendTo()
呼び出したときに発生します。
detached
$el
がDOMまたはインスタンスメソッドから削除/切り離されたときに呼び出されます。
beforeDestroy
destroyed
bindings
とdirectives
はすでにバインドされておらず、子インスタンスも破棄されています。
インスタンス内での使用
内のすべてのライフサイクルフックのでVue.js
ちょうどあるfunctions
は、インスタンスdeclaractionで直接それらのいずれかを配置することができます。
//JS
new Vue({
el: '#example',
data: {
...
},
methods: {
...
},
//LIFECYCLE HOOK HANDLING
created: function() {
...
},
ready: function() {
...
}
});
共通の落とし穴: `ready()`フックからDOMにアクセスする
ready()
フックの一般的な使用例は、DOMにアクセスすることです。たとえば、Javascriptプラグインを開始したり、要素のサイズを取得したりするなどです。
問題
Vueの非同期DOM更新メカニズムにより、 ready()
フックが呼び出されたときにDOMが完全に更新されたことは保証されません。これは、要素が未定義であるため、通常はエラーになります。
ソリューション
この状況では、 $nextTick()
インスタンスメソッドが役に立ちます。このメソッドは、次のティック後まで、指定されたコールバック関数の実行を延期します。つまり、すべてのDOM更新が完了することが保証されているときに起動されます。
例:
module.exports { ready: function () { $('.cool-input').initiateCoolPlugin() //fails, because element is not in DOM yet. this.$nextTick(function() { $('.cool-input').initiateCoolPlugin() // this will work because it will be executed after the DOM update. }) } }
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow