Vue原理
defineproperty
來源 https://www.cnblogs.com/leaf930814/p/6891254.html
節(jié)選
介紹
Object.defineProperty是ES5中的方法，它可以直接在一個對象上定義一個新屬性届垫，或者修改一個對象的現(xiàn)有屬性抄囚， 并返回這個對象。vue.js正式利用這種方法實現(xiàn)數(shù)據(jù)的雙向綁定,以達(dá)到響應(yīng)式的目的辅辩。
語法
Object.defineProperty(object, propertyname, descriptor) //參數(shù)（3個且必須）
參數(shù)詳解
-
object：要在其上添加或修改屬性的對象。
-propertyname：要定義或修改的屬性的名稱娃圆。（存在修改玫锋，不存在，自定義讼呢，設(shè)置屬性和描述配置） -
descriptor:將被定義或修改的屬性描述符撩鹿。(可以包含以下屬性，默認(rèn)情況下悦屏， writable节沦， enumerable，configurable值為false)
value:屬性的值
writable:如果為false础爬，屬性的值就不能被重寫,只能為只讀了甫贯。
enumerable:是否能枚舉，也就是否能在for...in循環(huán)中遍歷出來或在Object.keys中列舉出來看蚜。
configurable:如果為false叫搁，就不能再設(shè)置他的（value，writable供炎，configurable）渴逻。
defineProperty訪問器,可選鍵值
還有兩個方法 ，雙向數(shù)據(jù)綁定正是利用了這兩個方法音诫，即訪問器 get()和 set()
<div id="app"></div>
<button onclick="setValue()">add</button>
<script>
let xx; // 操作的數(shù)據(jù)
const setAppText = () => {
document.querySelector("#app").innerHTML = obj.x;
}
const setValue = () => {
xx++;
// 給obj賦值為增加之后的值
obj.x = xx;
}
var obj = {};
Object.defineProperty(obj, 'x', {
// 每一次obj取x屬性的時候都會調(diào)用get
get () {
// console.log(xx)
return xx;
},
// 每一次在設(shè)置obj的x屬性的時候都會調(diào)用一次
set (newValue) {
// console.log(newValue);
xx = newValue;
console.log(xx);
// 每一次數(shù)據(jù)更新都要重新設(shè)置DOM
setAppText();
}
})
obj.x = 20;
// setAppText();
</script>
流程 ： 斷點測試惨奕，真實的流程、 對于get set進(jìn)入環(huán)境的理解
- 解析html竭钝，初始均無值,div.innerHTML = undefined
- 進(jìn)入腳本(script),聲明let梨撞、const、 const (均為指向蜓氨，不解析)聋袋、var
-
Object.defineProperty() 對象的方法、不解析穴吹、定義或修改對象屬性幽勒、描述符（可枚舉enumerable、可重寫港令、configurable(刪改目標(biāo)屬性)）啥容、get/set方法 -
obj.x = 20 設(shè)置obj.x屬性進(jìn)入definedProperty.set=> xx = 20 =>setAppText() - setAppText() =>
document.querySelector("#app").innerHTML = obj.x;取值操作锈颗，先進(jìn)入definedProperty.get=>return xx =>返回函數(shù)體繼續(xù)執(zhí)行 - 點擊之前的一次解析流程 ，=>點擊后觸發(fā)++函數(shù)
原生實現(xiàn)函數(shù)處理數(shù)據(jù)咪惠，數(shù)據(jù)顯示在DOM击吱，改變后的數(shù)據(jù)在js中操作。即簡易的雙向綁定
proxy (ES6)
代理
暫不了解
v-model
指令：在表單控件或者組件上創(chuàng)建雙向綁定遥昧。(input, textarea,select)
更新數(shù)據(jù)覆醇，本質(zhì)，語法糖炭臭，負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)（永脓，并對極端情況處理。）
- v-model 會忽略所有表單元素的 value鞋仍、checked常摧、selected 特性的初始值而總是將 Vue 實例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過 JavaScript 在組件的 data 選項中聲明初始值威创。
v-model 在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：
- text 和 textarea 元素使用 value 屬性和 input 事件落午；
- checkbox 和 radio 使用 checked 屬性和 change 事件；
- select 字段將 value 作為 prop 并將 change 作為事件肚豺。
Point：由于v-model只是語法糖溃斋，下面三個作用相同
- v-model ————
<input v-model="message">
下面兩種解釋雙向綁定： v-bind可以把data數(shù)據(jù)綁定給value, @input把用戶輸入的值在去賦給data,這樣實現(xiàn)了雙向綁定
需要在Vue實例中操作數(shù)據(jù)
<input v-bind:value="message" v-on:input="message = $event.target.value" />- 簡寫————
<input :value="message" @input="message = $event.target.value" />
