vue筆記-vue項目中對象數組數據變化,但視圖未更新的解決方案?

時間  2019-11-26
標籤 vue 筆記 項目 對象 數組 數據 變化 視圖 更新 解決 方案 简体版
原文   原文鏈接

前言

在負責的後臺管理系統中,個人添加人員與編輯人員兩個功能共用了一個組件,可是碰見一個問題.一樣是用v-for去渲染一些標籤,在使用編輯人員功能時,刪除對象數組元素,對應的標籤在頁面上也會消失.可是在使用添加人員功能時,刪除對象數組元素,對應的標籤卻不會在頁面上消失.html

我的問題遺留:

this.$set(this.numbers,index,++this.numbers[index]);
this.$set(this.numbers,index,1);
貌似沒必要每次都要用this.$set去接收改變的數據,以爲掛一次就能夠啦吧?
複製代碼
Object.defineProperty()和響應式原理 仍是須要細細研究一下,還有Object.defineProperty()的數據屬性和瀏覽器屬性
複製代碼

問題描述:vue

  • 首先進入添加人員頁面

  • 點擊添加部門

  • 點擊肯定,用v-for渲染去push到的數組數據

  • 而後就完犢子啦!點擊X號,數組元素減小啦,可是頁面上的部門一個都不減小.由於我在data中只是定義了person爲空對象,在確認事件觸發時用了this.person.deparmentList = deparmentListArray去接收了部門選擇頁面的數組數據,this.object.deparmentList只是個響應式對象的普通屬性,根本不是響應式的,也就不會被vue檢測到,視圖也未能更新.應該用this.$set(this.person, deparmentList, deparmentListArray);我果真是個渣!只會喊數據驅動視圖.

demo1:對象數組

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
  <style>
    li:hover {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <ul>
      <li v-for="item,index in items" v-on:click="handle(index)">
        <span>{{item.name}}</span>
        <span>{{numbers[index]}}</span>
      </li>
    </ul>
  </div>
  <script>
    var vm = new Vue({
      el: ".wrap",
      data: {
        numbers: [],
        items: [
          {name: 'jjj'},
          {name: 'kkk'},
          {name: 'lll'},
        ]
      },
      methods: {
        handle: function (index) {
          // WHY: 更新數據，view層未渲染，但經過console這個數組能夠發現數據確實更新了
           if (typeof(this.numbers[index]) === "undefined" ) {
             this.numbers[index] = 1;
           } else {
             this.numbers[index]++;
           }
           console.log(this.numbers);
        }
      }
    });
  </script>
</body>
</html>
複製代碼

這裏的實現目的很明確 --- 我但願在點擊li時先檢測是否存在，固然是不存在的，因此就將值設置爲1， 若是再次點擊，就讓數字累加。可是出現的問題是： 點擊以後數字並無在view層更新，而經過console打印發現數據確實更新了，只是view層沒有及時的檢測到， 而我一直以來的想法就是： 既然vue實現的時數據雙向綁定，那麼在model層發生了變化以後爲何就沒有在view層更新呢?segmentfault

首先，我就考慮了這是否是數組的問題，因而，我測試了下面的例子：數組

demo2: 非對象數組

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
  <style>
    li:hover {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <ul>
      <li v-for="item,index in items" v-on:click="handle(index)">
        <span>{{item.name}}</span>
        <span>{{numbers[index]}}</span>
      </li>
    </ul>
  </div>
  <script>
    var vm = new Vue({
      el: ".wrap",
      data: {
        numbers: [],
        items: [
          {name: 'jjj'},
          {name: 'kkk'},
          {name: 'lll'},
        ]
      },
      methods: {
        handle: function (index) {
          // 不是數組，這裏更新數據就能夠直接在view層渲染
          this.items[index].name += " success";
        }
      }
    });
  </script>
</body>
</html>
複製代碼

這時，我再測試時就發現，這裏的model層發生了變化時，view層就能及時、有效的獲得更新。瀏覽器

而數組爲何不能夠呢？bash

因而在文檔上的一個不起眼的地方找到了下面的說明：異步

其中最重要的一句話就是 --- 若是對象是響應式的，確保屬性被建立後也是響應式的，同時觸發視圖更新，這個方法主要用於避開Vue不能檢測到屬性被添加的限制。

Vue實例的根數據對象:data是Vue 實例的根數據對象,Vue 將會遞歸將 data 的屬性轉換爲 getter/setter，從而讓 data的屬性可以響應數據變化。推薦在建立實例以前，就聲明全部的根級響應式屬性.(那我在data中掛載一個對象,也要把這個對象的屬性整一個初始值嘍?此處有待實踐論證!)ide

首先，咱們要了解Vue是如何實現數據的雙向綁定的！

把一個普通 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象全部的屬性，並使用 Object.defineProperty 把這些屬性所有轉爲getter/setter。Object.defineProperty 是僅 ES5 支持，且沒法 shim 的特性，這也就是爲何Vue 不支持 IE8以及更低版本瀏覽器的緣由。函數

訪問器屬性不能直接定義，必須是用Object.defineProperty()來定義。性能

參考文章:

何爲Object.defineProperty()

數據屬性與訪問器屬性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
</head>
<body>
  <script>
    var book={
        _year:2004,
        edition:1
    };
    Object.defineProperty(book,"year",{
        get:function(){
            return this._year;
        },
        set:function(newValue){
            if(newValue>2004){
                this._year=newValue;
                this.edition+=newValue-2004;
            }
        }
    });
    console.log(book.year); // 2004  在讀取訪問器屬性時會調用get函數
    book.year=2005;  // 在給訪問器屬性賦值時會調用set函數
    console.log(book.edition); // 2
  </script>
</body>
</html>
複製代碼

這個例子應該能夠很好的理解訪問器屬性了。

因此，當對象下的訪問器屬性值發生了改變以後（vue會將屬性都轉化爲訪問器屬性，以前提到了）， 那麼就會調用set函數，這時vue就能夠經過這個set函數來追蹤變化，調用相關函數來實現view視圖的更新。

每一個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程當中把屬性記錄爲依賴，以後當依賴項的 setter 被調用時，會通知 watcher 從新計算，從而導致它關聯的組件得以更新。

即在渲染的過程當中就會調用對象屬性的getter函數，而後getter函數通知wather對象將之聲明爲依賴，依賴以後，若是對象屬性發生了變化，那麼就會調用settter函數來通知watcher，watcher就會在從新渲染組件，以此來完成更新。

OK！既然知道了原理，咱們就能夠進一步瞭解爲何出現了以前數組的問題了！

變化檢測問題

收到現代JavaScript瀏覽器的限制，其實主要是 Object.observe() 方法支持的很差，Vue不能檢測到對象的添加或者刪除。然而Vue在初始化實例時就對屬性執行了setter/getter轉化過程，因此屬性必須開始就在對象上，這樣才能讓Vue轉化它。

因此對於前面的例子就不難理解了 --- 數組中index均可以看作是屬性，當咱們添加屬性並賦值時，Vue並不能檢測到對象中屬性的添加或者刪除，可是其的確是添加或刪除了，故咱們能夠經過console看到變化，因此就沒有辦法作到響應式； 而在第二個例子中，咱們是在已有的屬性的基礎上進行修改的，這些屬性是在最開始就被Vue初始化實例時執行了setter/getter的轉化過程，因此說他們的修改是有效的，model的數據能夠實時的在view層中獲得相應。

補充知識： 什麼是 Object.observe() ？

 在介紹以前，不得不殘忍的說，儘管這個方法能夠在某些瀏覽器上運行，但事實是這個方法已經廢棄！

 概述：此方法用於異步地監視一個對象的修改。當對象的屬性被修改時，方法的回調函數會提供一個有序的修改流，然而這個接口已經從各大瀏覽器移除，可使用通用的 proxy 對象。  

 方法:

Object.observe(obj, callback[, acceptList])

  其中obj就是被監控的對象， callback是一個回調函數，其中的參數包括changes和acceptList， changes一個數組，其中包含的每個對象表明一個修改行爲。每一個修改行爲的對象包含:

  • name: 被修改的屬性名稱。
  • object: 修改後該對象的值。
  • type: 表示對該對象作了何種類型的修改，可能的值爲"add", "update", or "delete"。
  • oldValue: 對象修改前的值。該值只在"update"與"delete"有效。

acceptList在給定對象上給定回調中要監視的變化類型列表。若是省略， ["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"] 將會被使用。

var obj = {
  foo: 0,
  bar: 1
};

Object.observe(obj, function(changes) {
  console.log(changes);
});

obj.baz = 2;
// [{name: 'baz', object: <obj>, type: 'add'}]

obj.foo = 'hello';
// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}]

delete obj.baz;
// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}]
複製代碼

參考文檔:Object.ovserve()

推薦閱讀文章：Object.observe() 引爆數據綁定革命

解決方法

使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上。 還可使用 vm.$set 實例方法，這也是全局 Vue.set 方法的別名。

解決代碼示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
  <style>
    li:hover {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <ul>
      <li v-for="item,index in items" v-on:click="handle(index)">
        <span>{{item.name}}</span>
        <span>{{numbers[index]}}</span>
      </li>
    </ul>
  </div>
  <script>
    var vm = new Vue({
      el: ".wrap",
      data: {
        numbers: [],
        items: [
          {name: 'jjj'},
          {name: 'kkk'},
          {name: 'lll'},
        ]
      },
      methods: {
        handle: function (index) {
          // WHY: 更新數據，view層未渲染，但經過console這個數組能夠發現數據確實更新了
           if (typeof(this.numbers[index]) === "undefined" ) {
             this.$set(this.numbers, index, 1);
           } else {
             this.$set(this.numbers, index, ++this.numbers[index]);
           }
        }
      }
    });
  </script>
</body>
</html>
複製代碼

這樣，咱們就能夠實現最終的目的了！

上面一部分是指在data下的數組，而若是是在store中的數組，通常能夠這樣：

[ADD_ONE] (state, index) {
      if ( typeof state.numbers[index] == "undefined") {
        Vue.set(state.numbers, index, 1)
      } else {
        Vue.set(state.numbers, index, ++state.numbers[index])
      }
    }
複製代碼

便是用 Vue.set() 的方式來改變、增長。

注意：這裏是肯定index的增長和減小，因此用 Vue.set() 的方式

若是是在store的actions中咱們須要對stroe中的數組進行填充

方法以下：

state內容：

kindnames: []

Mutations內容：

[ADD_KIND_NAME] (state, name) {
      state.kindnames.push(name);
    } 
複製代碼

注意： 這裏直接使用push的方式

固然，除了push,咱們還能夠shift等各類方式。

actions的內容：

commit(ADD_KIND_NAME, state.items[index++].name);
複製代碼

這裏，state.items[index++].name獲取到的是一個一個的字符串。

注：一樣能夠參考文檔 --- 細節與最佳實踐

原做者連接:www.cnblogs.com/zhuzhenwei9…

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程