數據更新關于監視
- 我們之前講過，我們在data當中配置的屬性，最終會掛載在vue實例身上，而data這個配置項，最終也會在vue身上成為一個新的屬性 == _data
文章插圖
- 當我們在頁面DOM當中 ， 去使用data當中的屬性的時候，屬性值發生變化 ， 頁面是不是會自動更新？ 為什么會這樣？
- 你可以理解為 Vue底層默認有一個監視器，負責監視這些屬性的變化
- 與watch和computed不同 ， 這個監視是全局的 ， watch與computed是針對單獨的，或者一些屬性
檢測數據的原理這個概念是非常重要的，所以這節課是不能跳過的，否則有一天會為這個行為買單（謝謝，已經買過了）
我們先來做個需求吧，這個需求不演示不行
- 你寫一段代碼，這個代碼你需要修改data當中的數據
- 修改數據的行為，不能被vue檢測到 ， 也就是卡bug 。
- 請你實現這個功能
文章插圖
文章插圖
button按鈕呢，設置了一個點擊事件，這個點擊事件用來單獨修改 馬冬梅這個對象的信息
文章插圖
測試結果可以看到，在這種賦值的情況下 ， 我們成功的對 馬冬梅 進行了修改數據
并且在vue當中也能檢測到
文章插圖
卡bug，引出問題既然是 對馬冬梅進行修改，我們換一種方式來對他進行修改
文章插圖
為什么這次數據修改不成功了 ， 這是為什么？
總結
- 當我點擊這個按鈕的時候，在內存當中 ， persons[0]的數據確實發生改變了
- 但是，這次修改并沒有被vue所檢測到
- 至于控制臺的數據到底修補修改 ， 取決于你什么時候打開開發者工具
文章插圖
vue是如何檢測對象數據改變的
- 我們先回顧一下關于vue的數據監測，詳細博文
- 我現在data這里有一個屬性name和屬性persons
文章插圖
- 打開控制臺 ， 在vue實例身上也有這倆屬性
文章插圖
- 我們都知道，為什么這倆data當中屬性會出現在vue實例身上 ， 是因為做了數據代理
- 在vue身上有個_data，這個下劃線data當中包含著我們上圖配置的data的所有數據，并且還對這個配置項data做了加工
文章插圖
- 因為如果只是 將 data的值，賦給_data ， 那么二者的內容應該是相等的才是
- 但是現在顯然不是，說明這里做了加工
- 為啥他要加工？
- 它加工了就可以做響應式了
- 之前說過，vue的數據代理與 definedProperty 這個API有關
- 那么其內部是如何進行數據代理的呢？
- 如果不使用 vue框架，我們能實現數據代理嗎？
- 我們來測試一下
- 按照正常的理解，如果我們需要對age這個屬性進行數據代理
- 讓頁面能夠檢測到數據的改變，那么就需要使用這個接口（defined......）
- 那么這個接口的調用，需要如下幾個配置
- 需要給誰添加屬性
- 屬性名是什么
- 配置項（getter和setter）
- 那么對getter而言，如果該屬性被訪問到了，那么就需要返回該屬性的值
文章插圖
- 對setter而言 ， 當屬性值，發生修改，那么將接收到的修改的屬性值，重新賦值給該屬性
推薦閱讀
- 簡筆畫如何畫漫畫羊（簡筆畫羊的畫法大全簡單)
- 簡單的綿羊怎么畫（如何畫簡單的綿羊)
- 如何快速高效地煲耳機（自然煲耳機方法)
- 藍牙耳機如何煲機（新耳機要如何正確煲機)
- 如何煲機，煲耳機有什么方法（耳機最科學的煲機方法)
- 如何在.NET程序崩潰時自動創建Dump？
- 華為藍牙耳機如何煲機（華為藍牙耳機煲機歌單)
- 網絡不穩定老是掉線怎么辦（網絡不穩定如何解決)
- 怎么看主板型號（如何看電腦主板型號)
- 優雅的寫好Vue項目代碼 — 路由拆分、Vuex模塊拆分、element按需加載