nextTickのVUE

todo简介：

VUEフレームは、彼が角度の利点を組み合わせ、非常に人気があり、MVVMフレームを結合双方向のデータを形成するように反応親しみやすい軽量の特性を有しています。私はそれを使用することを好みます。我々はVUEとき、私たちはしばしば方法がこれです使用します。$ NextTick、私はあなたが使用していると信じています。データ収集を行った後、新しいビューの次の操作または他の操作の必要性は、DOMを取得しないことが判明したときに好きなシーンです。唯一のデータモデルを変更完了割り当ては完全なビューの更新ではありませんので。この時点で、私たちは、この章で説明する機能を使用する必要があります。

例えば：

新しい新しいヴュー（{ 
  EL： '#app' 、
  データ：{ 
    []：リスト
  }、
  マウント：機能（）{
     これに.get（）
  }、
  メソッド：{ 
    GET：機能（）{
       これ。http.get $（ ' / API / Articleこの記事は、でした）。その後、（関数は（RES）{
         この .LIST = res.data.data.list
         @ REFリストは、UL要素を参照し、私は赤のliに最初の色が欲しい
　　　　　
　　　　　　無効//以下の方法
        この refs.list.getElementsByTagName $（ 'リー'）[0] .style.color = '赤'。}）// $参考文献：①注
　　　　　
　　　　　　 //以下の方法が有効である
　　　　　。この$ nextTick（（）=> {。

　　　　　　この。$ refs.list.getElementsByTagName（ 'リー'）[0] .style.color = '赤'}）

　　　　　}）

　　} 
　} 
}）

私は、データモデルの属性リストに割り当てるデータを取得した後、私は赤に変わり、その色の最初の要素を見つけるために、UL李を引用したいと思いますが、実際には、これは誤りであるべきであり、我々はこの刑の執行であることを知っています、ULは以下の李なかった場合は、その割り当てはちょうど起こった、そして現在の更新ビュー層を引き起こしませんでした。したがって、この場合には、VUEは、我々は次の更新操作を表示したい場合は、私達はちょうどこの。$ NextTickメソッドに渡された関数を実行する必要があり、$ nextTick方法を提供してくれ、VUEは、私たちを与えるだろうこの仕事をすることができません。

上記のコードは、両方を示しnextTick正しい使用法を

私は）（Vue.nextTickで必要ないとき

1. C Vueのライフサイクルフックを操作するreated（）DOM機能はVue.nextTick（）コールバック関数を配置する必要があります。それは何ですか、その理由をされ、実際にはDOMのフックは任意のレンダリングをしなかったときに実行する（）関数を作成し、DOM操作をし、この時点ではそれほどのVueに、ここでDOM操作をコードをJSに必ず、無駄に違いはありません。 nextTick（）コールバック関数。され、対応するフック関数取り付けられたフック関数があるため、すべてのDOMおよびレンダリングを実装するために実行される完全なされ、この時点で任意のDOM操作は、フック関数には関係ありません。

2.データの変更後に行われ、この操作は時間のDOM構造を変更するとデータ変更の使用を必要とするアクションでは、この操作はVue.nextTick（）コールバック関数を入れなければなりません。

原理：

データの変更を聞くときVUE更新DOMを非同期に実行され、（objeect.definePropertyを使用する）であるオープンキュー（非同期更新キュー）、そして同じ緩衝液中のイベントループで発生するすべてのデータ変更。

あなたはvm.someData =「新しい値」を設定した場合、コンポーネントは、すぐに再描画されません。リフレッシュキューは、コンポーネントがイベントループになるときは次のアップデートで「カチカチ」。ほとんどの場合、私たちはこのプロセスを気にする必要はありませんが、あなたは少しトリッキーかもしれない何かを、行うには、更新DOMに基づいた状態にしたい場合。けれどもVue.jsは通常、DOMとの直接接触を避けるために、思考の「データ駆動型」の方法を使用する開発者を奨励し、時には我々はしなければなりません。更新DOM Vueのは、変更後のデータを待つ完了するためには、データ変更Vue.nextTick（コールバック）の直後に使用することができます。だから、更新後に呼び出されるコールバック関数は、完全なDOMがあります

ソース分析：

注①：

1、説明：VM $参考文献の目的は、すべてのサブコンポーネント（またはHTML要素）REFのホルダを登録されている;.

　　用途：HTML要素、ref属性を追加し、JSでのVM $、参考文献のプロパティにより取得され;.

　　取得：取得は、サブアセンブリの場合は、サブアセンブリを得て、データREFによって方法することができます。

2、ref属性を追加します。

<DIV ID = "アプリ"> 
    <h1とREF = "h1Ele">这是H1 </ H1> 
    <こんにちはREF = "HO"> </こんにちは> 

    <ボタン@クリック= "getref">获取H1元素</ボタン> 
</ div>

3、すべてのコンポーネントまたは登録REFの属性を取得

方法：{ 
    getRef（）{ 
      // $参考文献から表しは、REF取得した属性値オブジェクト：h1ele DOM要素アセンブリまたは 
       にconsole.log（この$ refs.h1Ele.innerText。）;
        この $のrefs.h1ele.styleを。 =色'赤'; // 変更されたHTML形成

       はconsole.log（この $のrefs.ho.msgを。）; // 取得したデータ・コンポーネント 
       はconsole.log（この $のrefs.ho.testに。）; //は、コンポーネントアプローチを取得
    } 
}

todo简介：

例えば：

私は）（Vue.nextTickで必要ないとき

原理：

ソース分析：

おすすめ