vue配列の更新方法の詳しい説明-jsチュートリアル-php.cn

vue配列の更新方法の詳しい説明

小云云

リリース： 2017-12-18 09:00:15

オリジナル

2672 人が閲覧しました

この記事では主に VUE 配列の更新の問題について説明します。必要な方は参考にしていただければ幸いです。：1. データメソッドの分類: データ (1) 元の配列が変更されました

Push

Pop

UNSHIFT

Shift

Reverse
sort
Splice

(2) 元の配列は変更されておらず、新しい配列

Slice

Concat

フィルター

元の配列を変更する方法は、ビューを直接更新することができます。

元の配列が変更されないメソッドの場合、元の配列を新しい配列に置き換えてビューを変更できます。

サンプルコード:

<!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 サイトの他の関連記事を参照してください。