小さな猿サークル解決VUE双方向のデータのデメリットバインディング

VUEは、あなたがそれを知っていた、非常に人気のフロントエンドフレームワーク、今日ですが、また、いくつかの欠点をVUEを持っていますか?以下の小さなサークルのWebフロントエンド類人猿の先生あなたはVUE双方向のデータバインディング欠陥解決するかについて、私たちは、みんなでそれを見てみましょう、あなたの助けのために願っています。

1、VUEインスタンスは再び聞いていない、属性を追加した、作成された後、

あなたはVueのインスタンスを作成すると、それはすべてのDOMオブジェクトを横断して、GETを追加し、各データの属性に設定されます。取得し、あなたが観測されたデータのVueを変更し、更新をトリガすることを可能に設定してください。しかし、Vueのインスタンス化後のプロパティ追加(または削除)場合、この属性はVUEのプロセスではなく、変更して設定します。

あなたは、新しいオブジェクトを作成したくない場合は、オブジェクト属性の新しいセットをVue.set使用することができます。このアプローチは、プロパティに応じてプロパティを作成し、トリガ、ビューの更新ことを保証します。

addToCart機能(ID){
 VARの項目= この.cart.findById(ID); 

IF (項目){ 

item.qty ++ 

} { 

// プロパティに直接追加しないでください、のような1 = item.qty。

// Vueのを使用しています。応答プロパティセット作成

ヴューを。セット(項目、' 数量'1。 

この.cart.push(項目)

} 

} 

addToCart(myProduct.id)。

2、配列

一つの欠点Object.definePropertyは、変更の配列を監視することができません。

索引(インデックス)として使用する場合に配置されたアレイ・エントリは、VUEが検出されません。

app.myArray [インデックス] = newValに。

しかし、文書が言及ヴューヴューを変更のみ以下の8つのメソッドのアレイによって検出される、[indexOfItem] = newValueに、これは検出不可能であるvm.items。

1つの プッシュ()。
2  POP()。
3  
4  シフト();
5  
6  抜き()。
7  
8  スプライス()。
9  
10  ソート()。
11  
12逆()。

同じことがVue.setアレイアイテムを使用して設定することができます。

Vueの。セット(app.myArray、インデックス、newValに)。

3、プロキシ与のDefineProperty

プロキシオブジェクトは、正式に(そのようなプロパティの検索、評価、列挙型、関数呼び出しなど)の基本的な操作を定義するカスタム動作のためにES2015の仕様をリリースしています。

これは、オブジェクトへのアクセス外部のターゲット・オブジェクトの前に「ブロッキング」の層を設定し、この層は、第ので、フィルタリングおよび書き換え外の世界にアクセスするためのメカニズムを提供し、傍受を渡す必要があります。

私たちは、そう思うことができ、プロキシは、ここで見ることができObject.defineProperty特定の文書の完全な範囲の拡張版です。

13の異なる傍受方法アッププロキシが、ownKeysを適用するように限定されるものではないObject.definePropertyが利用できない、のように、deletePropertyを、有しています。

プロキシは、我々は唯一の新しいオブジェクトを操作する目的を達成することができ、新しいオブジェクトを返し、Object.definePropertyは直接変更されたオブジェクトのプロパティを横切ることができます。

ブラウザメーカーのための新しい標準として、プロキシは、それがパフォーマンスのボーナスの伝説的な新しい規格である、継続的なパフォーマンスの最適化の焦点になります。

もちろん、欠点は、そのためのVueの作者が唯一の宣言プロキシ・リライトを使用するための次のメジャーバージョン(3.0)まで待機する必要がある、そのプロキシの互換性の問題である、とポリフィルで研磨することはできません。

 

これらは、彼らが正面を学んでいるか、少しの友人でジョブがまだ理解している結合VUE双方向のデータを共有するための小さなサークルのWebフロントエンド類人猿講師の欠点ですか?私たちは、より小さなパートナーを知りたいあなたがログインすることができます助けたいの公式サイトAPE小さな円を理解。

おすすめ

転載: www.cnblogs.com/xiaoyuanquan/p/10978789.html