VUEで配列更新関数を実装する方法-jsチュートリアル-php.cn

VUEで配列更新関数を実装する方法

亚连

リリース： 2018-06-20 15:07:35

オリジナル

1957 人が閲覧しました

この記事では、Vue がデータの変更を監視する方法を主に紹介します

1. データメソッドの分類:

Push

pop

unshift
shift
reverse
sort
splice

(2)元の配列は変更せず、新しい配列を生成

slice

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: &#39;#app&#39;,
        data: {
          books: [{
              name: &#39;vuejs&#39;,
              author: &#39;a&#39;
            },
            {
              name: &#39;js高级&#39;,
              author: &#39;b&#39;
            },
            {
              name: &#39;java&#39;,
              author: &#39;c&#39;
            }
          ]
        }
      });
      //直接可以使得视图改变
      //app.books.push({name: &#39;c++&#39;,author: &#39;d&#39;});
      //需要更新原数组
      app.books = app.books.concat([{name: &#39;c++&#39;,author: &#39;d&#39;}]);
    </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: &#39;#app&#39;,
        data: {
          books: [{
              name: &#39;vuejs&#39;,
              author: &#39;a&#39;
            },
            {
              name: &#39;js高级111&#39;,
              author: &#39;b&#39;
            },
            {
              name: &#39;java33333&#39;,
              author: &#39;c&#39;
            }
          ]
        },
        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, &#39;b&#39;, 2)

ログイン後にコピー

また、グローバルメソッドのエイリアスでもある vm.$set インスタンスメソッドを使用することもできます。 Vue.setメソッド、

以上がVUEで配列更新関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。