ホームページ >ウェブフロントエンド >jsチュートリアル >VUE配列更新の詳しい説明
vue 配列の更新に関して、この記事では主に vue がデータの変更を監視する方法を紹介します。必要な方は参考にしていただければ幸いです。
1. データメソッドの分類:
(1) 元の配列が変更されます
push
Pop
unshift
Shift
reverse
sort
splice
(2) 元の配列は変更されず、新しい配列が生成されます
スライス
concat
filter
元の配列を変更する方法は、ビューを直接更新することができます。
元の配列が変更されないメソッドの場合、元の配列を新しい配列に置き換えてビューを変更できます。
サンプルコード:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>vue示例</title> </head> <body> <p id="app"> <ul> <template v-for="book in books"> <li>书名:{{book.name}}</li> <li>作者:{{book.author}}</li> </template> </ul> </p> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { books: [{ name: 'vuejs', author: 'a' }, { name: 'js高级', author: 'b' }, { name: 'java', author: 'c' } ] } }); //直接可以使得视图改变 //app.books.push({name: 'c++',author: 'd'}); //需要更新原数组 app.books = app.books.concat([{name: 'c++',author: 'd'}]); </script> </body> </html>
注: 以下はビューの更新をトリガーしません。
(1) インデックスで項目を直接設定します。
(2) 配列の長さを変更します (app.books.length=1)。
元の配列を変更したくない場合は、次のような計算プロパティを使用して配列をフィルターできます。
各コンポーネント インスタンスには、対応するウォッチャー インスタンス オブジェクトがあり、コンポーネントのレンダリング プロセス中に依存関係としてプロパティを記録します。後で、依存関係のセッターが呼び出されるときに、ウォッチャーに通知されます。再計算され、関連するコンポーネントが更新されます。 2) 変更検出の問題
最新の JavaScript の制限 (および Object.observe の非推奨) により、Vue はオブジェクト プロパティの追加または削除を検出できません。 Vue はインスタンスの初期化時にプロパティのゲッター/セッター変換プロセスを実行するため、Vue が応答できるように変換するには、プロパティがデータ オブジェクトに存在する必要があります。例:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>vue示例</title> </head> <body> <p id="app"> <ul> <template v-for="book in filterBooks"> <li>书名:{{book.name}}</li> <li>作者:{{book.author}}</li> </template> </ul> </p> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { books: [{ name: 'vuejs', author: 'a' }, { name: 'js高级111', author: 'b' }, { name: 'java33333', author: 'c' } ] }, computed:{ filterBooks:function(){ return this.books.sort(function(a,b){ return a.name.length>b.name.length?1:-1 }) } } }); </script> </body> </html>
Vue では、既に作成されたインスタンスに新しいルートレベルのリアクティブ プロパティを動的に追加することはできません。ただし、Vue.set(object, key, value) メソッドを使用して、ネストされたオブジェクトに応答プロパティを追加できます:
var vm = new Vue({ data:{ a:1 } }) // `vm.a` 是响应的 vm.b = 2 // `vm.b` 是非响应的
以上がVUE配列更新の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。