Object.defineProperty
數(shù)據(jù)響應(yīng)式使用的底層API是Object.definePorperty
Object.definePorperty中可以定義set和get方法，對(duì)對(duì)象屬性進(jìn)行攔截。設(shè)置對(duì)象屬性的值時(shí)，會(huì)自動(dòng)觸發(fā)set方法；獲取對(duì)象屬性的值時(shí)，會(huì)自動(dòng)觸發(fā)get方法。
核心思想是：set方法中實(shí)現(xiàn)dom更新的邏輯，從而實(shí)現(xiàn)數(shù)據(jù)值一旦變化就能更新dom的目的，也就是從model到view的更新。
以data對(duì)象為例：
let data = {
name: "柴柴老師",
age: 29
}
第一步，通過Object.defineProperty逐個(gè)定義data中所有的key，完成所有屬性值變化時(shí)的攔截功能
第二步，為了更精準(zhǔn)的實(shí)現(xiàn)某一個(gè)屬性值變化時(shí)只更新綁定了該屬性名稱的dom元素值，則需要使用發(fā)布訂閱功能。
發(fā)布訂閱的實(shí)現(xiàn)：頁面渲染完成后，先遍歷所有dom對(duì)象，找到有v-text或v-model屬性的dom節(jié)點(diǎn)上，并且將v-tex或v-model屬性值作為key，將該dom節(jié)點(diǎn)的賦值函數(shù)作為數(shù)組的元素，存儲(chǔ)成一個(gè)map。
第三步，在set方法中，調(diào)用該key值對(duì)應(yīng)的dom更新函數(shù)集。當(dāng)data某個(gè)屬性name變化時(shí)，則直接執(zhí)行對(duì)應(yīng)key值name的函數(shù)集，實(shí)現(xiàn)精準(zhǔn)更新需要更新的dom。
第四步，v-text是單向綁定，v-model是input組件的雙向綁定。從視圖view到model的綁定，則要在第二步中找到有v-model屬性的dom節(jié)點(diǎn)時(shí)，給該節(jié)點(diǎn)上增加監(jiān)聽值變化的事件，將新值賦值給data對(duì)應(yīng)的屬性
代碼截圖為bilibili上柴柴老師的視頻：
v-model
組件身上添加v-model ，一般用于組件內(nèi)部有可輸入的控件，比如說input textarea內(nèi)容編輯，目的是為了實(shí)現(xiàn)雙向綁定
一旦組件身上寫了v-model之后相當(dāng)于：1.名稱為value的自定義屬性的綁定2.名稱為input自定義事件的綁定 ，如editor組件寫了v-model：
<Editor v-model="content"/>
等價(jià)于
<Editor :value="content" @input=""/>
以上可以總結(jié)為2點(diǎn)：
1、子組件Editor可以通過定義名為value的props來接收參數(shù)
2、子組件通過觸發(fā)$emit（'input'，‘子組件數(shù)據(jù)'）實(shí)現(xiàn)將子組件的數(shù)據(jù)傳到父組件中
特別注意：V-model語法糖下 我們并不需要父組件中定義接受傳入實(shí)參的方法
