記錄vue不能檢測數組和對象變動的方法。

Clect 發布于2019-08-23 15:54 / 2199人閱讀

摘要：當然按照官方文檔的解釋，檢測不到的主要問題是導致的。下列代碼，是解決數組檢測不到的問題。

測試數據：

  items: [
    {name: "業務狀態", id: "taskState", data: [{name:"全部", id: 0},{name:"進行中", id: 1},{name:"已完成", id: 2},{name:"已歸檔", id: 3},{name:"已終止", id: 4}]},
    {name: "業務狀態", id: "taskState", data: [{name:"全部", id: 0},{name:"進行中", id: 1},{name:"已完成", id: 2},{name:"已歸檔", id: 3},{name:"已終止", id: 4}]},
    {name: "業務狀態", id: "taskState", data: [{name:"全部", id: 0},{name:"進行中", id: 1},{name:"已完成", id: 2},{name:"已歸檔", id: 3},{name:"已終止", id: 4}]},
    {name: "業務狀態", id: "taskState", data: [{name:"全部", id: 0},{name:"進行中", id: 1},{name:"已完成", id: 2},{name:"已歸檔", id: 3},{name:"已終止", id: 4}]},
  ]

難點：

items是個數組，里面嵌套著許多層對象。當然數據是不一樣的，我這里只是舉例說明。

這里面存在著二個難點，第一，直接改變items數量，vue是檢測不到的。第二，增加items[i]里的對象屬性。vue也是檢測不到。

當然按照vue官方文檔的解釋，檢測不到的主要問題是JavaScript導致的。（尤雨溪大佬你說的算）

代碼：

// 解決辦法    
this.$set(this.items, 0, Object.assign({}, this.items[0], { active: 0, defaultActive: 0 }))

// 實際應用
this.items.forEach((r, row) => { // 變量數組，給每個對象附上默認值
    this.$set(this.items, row, Object.assign({}, this.items[row], {
      thisActive: r.thisActive ? r.thisActive : 0,
      defaultActive: r.defaultActive ? r.defaultActive : 0,
      data: r.data ? r.data : [],
      pageIndex: r.pageIndex ? r.pageIndex : 1,
      pageSize: r.pageSize ? r.pageSize : 20,
      options: r.options ? r.options : {scrollbar: true, pullUpLoad: true},
      ref: r.ref ? r.ref : "scroll" + row
    }))
})

這里解釋一下，下列代碼，是解決對象不能檢測的問題，這里是一次性添加多個屬性的方法。

let test = Object.assign({}, this.items[0], { active: 0, defaultActive: 0 })

下列代碼，是解決數組檢測不到的問題。(對象也可以用這個方法)
index--索引 "age"|| 13 分別代表對象里的鍵||值

this.$set(this.items, index, test)) // 數組方法
this.$set(this.items[index], "age", 13)) // 對象方法

以上解決方法代碼，來自vue官方文檔鏈接描述, 看不懂就自己按照文檔的去敲一下。

云服務器 GPU云服務器數組變動檢測 js 創建數組和對象人臉檢測的方法建立對象的方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102521.html

記一次思否問答的問題思考：Vue為什么不能檢測數組變動

摘要：這里加了個簡單判斷，只看數組元素的，然后寫了一個簡單案例，主要測試使用改變數組元素能不能被監測到，并響應式的渲染頁面運行頁面可以看到，運行了次，我們數組長度為，也就是說數組被遍歷了兩遍。問題來源：https://segmentfault.com/q/10... 問題描述：Vue檢測數據的變動是通過Object.defineProperty實現的，所以無法監聽數組的添加操作是可以理解的...

raoyi 2019-08-23 10:24 評論0 收藏0
vue 關于數組和對象的更新

摘要：在日常開發中，我們用的最多的就是綁定數據內容如果你有的開發經驗，假設你要更新數據了但是這在中并不會起到作用，并沒有觸發變化。如果對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。在日常開發中，我們用的最多的就是綁定數據如果你有ng的開發經驗，假設 data 你要更新數據了 this.data=res.data; 但是這在vue中并不會起到作用，DOM并沒有觸發變化。 ...

番茄西紅柿 2019-04-23 13:16 評論0 收藏0
vue總結系列--數據驅動和響應式

摘要：由于是需要兼容的后臺系統，該項目并不能使用到等技術，因此我在上的經驗大都是使用原生的編寫的，可以看見一個組件分為兩部分視圖部分，和數據部分。在公司里幫項目組里開發后臺系統的前端項目也有一段時間了。 vue這種數據驅動，組件化的框架和react很像，從一開始的快速上手基本的開發，到后來開始自定義組件，對element UI的組件二次封裝以滿足項目需求，期間也是踩了不少坑。由于將來很長一...

AbnerMing 2019-08-22 18:26 評論0 收藏0
從數組入手淺析Vue響應式原理

摘要：響應式原理為了探究這一切的原因，我再次點開了的官網。在官網很下面的位置，找到了關于響應式原理的說明。因此，新添加到數組中的對象中的屬性，就成了非響應式的屬性了，改變它自然不會讓組件重新渲染。響應式屬性的對象，有這個對象就代表是響應式的。 ??最近在用Vue開發一個后臺管理的demo，有一個非常常規的需求。然而這個常規的需求中，包含了大量的知識點。有一個產品表格，用來顯示不同產品的信息。...

dkzwm 2019-08-26 10:10 評論0 收藏0
用vue框架的基本原理，簡單實現一個todo-list

摘要：前言最近在學習框架的基本原理，看了一些技術博客以及一些對源碼的簡單實現，對數據代理數據劫持模板解析變異數組方法雙向綁定有了更深的理解。前言最近在學習vue框架的基本原理，看了一些技術博客以及一些對vue源碼的簡單實現，對數據代理、數據劫持、模板解析、變異數組方法、雙向綁定有了更深的理解。于是乎，嘗試著去實踐自己學到的知識，用vue的一些基本原理實現一個簡單的todo-list，完成...

Karrdy 2019-08-20 18:31 評論0 收藏0