ホームページ >ウェブフロントエンド >jsチュートリアル >vue配列の更新方法の詳しい説明
vue配列の更新方法の詳しい説明
- 小云云オリジナル
- 2017-12-18 09:00:152673ブラウズ
この記事では主に VUE 配列の更新の問題について説明します。必要な方は参考にしていただければ幸いです。 ：1. データメソッドの分類: データ (1) 元の配列が変更されました
Push
PopUNSHIFT
Shift Reverse
sort
Splice
(2) 元の配列は変更されておらず、新しい配列
Slice
フィルター
元の配列を変更する方法は、ビューを直接更新することができます。
元の配列が変更されないメソッドの場合、元の配列を新しい配列に置き換えてビューを変更できます。
サンプルコード:
<!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)。
元の配列を変更したくない場合は、次のように計算されたプロパティを使用して配列をフィルターできます:
<!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 はデータの変更をどのように監視するのでしょうか?
1) 変更を追跡する方法
各コンポーネント インスタンスには、対応するウォッチャー インスタンス オブジェクトがあり、コンポーネントのレンダリング中にプロパティを依存関係として記録します。後で、依存関係のセッターが呼び出されるときに、ウォッチャーに再計算するように通知されます。更新される関連コンポーネント。
2) 変更検出の問題
最新の JavaScript の制限 (および Object.observe の非推奨) により、Vue はオブジェクト プロパティの追加または削除を検出できません。 Vue はインスタンスの初期化時にプロパティのゲッター/セッター変換プロセスを実行するため、Vue が応答できるように変換するには、プロパティがデータ オブジェクトに存在する必要があります。例:
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的
Vue では、既に作成されたインスタンスに新しいルートレベルのリアクティブ プロパティを動的に追加することはできません。ただし、Vue.set(object, key, value) メソッドを使用して、ネストされたオブジェクトに応答プロパティを追加することは可能です:
Vue.set(vm.someObject, 'b', 2)
また、グローバル メソッドのエイリアスでもある vm.$set インスタンス メソッドを使用することもできます。 Vue.setメソッド、
以上がvue配列の更新方法の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。