---

前文提要

本人僅做個人學習記錄，如有錯誤，請多包涵

---

數據代理的概念

使用一個對象代理對另一個對象中屬性的操作。

MVVM模型和Vue中的數據代理

Vue框架是建立在MVVM的基礎上開發的。
MVVM框架模型了解：什么是MVVM框架？
第一個M代表Model，模型，也就是數據
第一個V代表View，視圖，也就是呈現出來的效果
最后的VM代表ViewModel，是視圖模型，是抽離出來的部分邏輯代碼，用于構建視圖和模型之間的關聯，能夠借此管理兩部分。

M，模型

Vue中的Model也就是Vue實例中的data中的數據，也就是下文data后大括號中的內容

const vm = new Vue({// el: '#box',data: {name: "這里是name的值",}
})

V，視圖

Vue中的View視圖，則是html中嵌入了Vue框架特殊語法待處理的模版代碼，

<div class="box" id="box"><h1>hello,world{{name}}</h1></div>

例如這里的，div標簽，就是我理解中的Vue里的視圖，

VM，視圖模型

至于VM，視圖模型，則是整個Vue實例。

通過這種關系，也就是通過這種數據代理的方法，將html中的數據和Vue實例中的data數據關聯起來。

在第一個M中的代碼用vm指向整個Vue實例，代碼中的data會在vm上生成一個屬性_data，_data不是Vue實例中的data，但是實例中的data的數據，_data中都有。

接著就是一串代碼

<div class="box" id="box"><h1>hello,world{{name}}</h1></div>

在這兩層大括號中，我們可以直接寫js表達式，也可以寫出Vue實例中含有的各類屬性。
那么Vue實例中有name嗎，按照上面的講述，是不是應該寫成

hello,world{{_data.name}}

才對，寫成_data.name這樣沒錯，但其中Vue中數據代理的體現還體現在，它自動地在vm的身上創建了data中的屬性。
你對data的訪問和修改，實際上操控的都是_data中的數據（這里就是數據代理的體現，用一個對象代理另一個對象的操作），_data和data中的數據又是關聯的。
就可以通過name實現_data.name的操作，目的是編寫代碼更加方便

---

至此，結束。

如果你覺得這篇文章寫的不錯，多多點贊~收藏吧！