Vueスコープフレッシュ

Question

私はvue.jsをjqueryで使用します。私の状況は、jqueryを使ってmain.htmlにサイドバーのHTMLコード（内部でvue構文を使用）を注入しようとしました。しかし、sidebar.htmlをmain.htmlに注入した後、vue.jsは、注入されたもののvueの構文をコンパイルできませんでした。だから誰も私がその問題を解決するのを助けることができる？ vueはangle scope.applyのような機能を持っていますか？

Answer 1

問題の最も簡単な解決方法は、jueで注入した後にvueインスタンスを要素にマウントすることです。これは、elオプションを持つvueコンストラクタで指定することによって行われます。または使用することによって$mount

jue（そのhtml部分）をvue.jsでスムーズに動かすのは難しいですが、私はすべての方法でvueを使うことをお勧めします。 1つの簡単な方法は、すべてのvueテンプレートを一度にロードしてから、データを変更することです。

Answer 2

vueにangle scope.applyのような機能がありますか？

hereと言うとおり、VueはDOMアップデートを非同期で実行します。データの変更が観察されるたびに、キューを開き、同じイベントループで発生するすべてのデータ変更をバッファします。次のイベントループ "tick"では、Vueはキューをフラッシュして実際の作業を実行します。

データ変更後にVue.jsがDOMの更新を完了するまで待つために、データが変更された直後にVue.nextTick（コールバック）を使用できます。コールバックは、DOMが更新された後に呼び出されます。これは$ apply（）でコードをラップし$ダイジェストサイクルを開始するAngularJSに似ています。

コード例：

HTML

<div id="example">{{ message }}</div> 

JS

var vm = new Vue({ 
    el: '#example', 
    data: { 
    message: '123' 
    } 
}) 
vm.message = 'new message' // change data 
vm.$el.textContent === 'new message' // false 
Vue.nextTick(function() { 
    vm.$el.textContent === 'new message' // true 
}) 

あなたのコードは動作しませんでしたなぜコードだけを見た後に診断することができます。