Vue原理
defineproperty
來(lái)源 https://www.cnblogs.com/leaf930814/p/6891254.html
節(jié)選
介紹
Object.defineProperty是ES5中的方法，它可以直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性， 并返回這個(gè)對(duì)象。vue.js正式利用這種方法實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,以達(dá)到響應(yīng)式的目的。
語(yǔ)法
Object.defineProperty(object, propertyname, descriptor) //參數(shù)（3個(gè)且必須）
參數(shù)詳解
-
object：要在其上添加或修改屬性的對(duì)象。
-propertyname：要定義或修改的屬性的名稱。（存在修改，不存在，自定義，設(shè)置屬性和描述配置） -
descriptor:將被定義或修改的屬性描述符。(可以包含以下屬性，默認(rèn)情況下， writable， enumerable，configurable值為false)
value:屬性的值
writable:如果為false，屬性的值就不能被重寫(xiě),只能為只讀了。
enumerable:是否能枚舉，也就是否能在for...in循環(huán)中遍歷出來(lái)或在Object.keys中列舉出來(lái)。
configurable:如果為false，就不能再設(shè)置他的（value，writable，configurable）。
defineProperty訪問(wèn)器,可選鍵值
還有兩個(gè)方法 ，雙向數(shù)據(jù)綁定正是利用了這兩個(gè)方法，即訪問(wèn)器 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屬性的時(shí)候都會(huì)調(diào)用get
get () {
// console.log(xx)
return xx;
},
// 每一次在設(shè)置obj的x屬性的時(shí)候都會(huì)調(diào)用一次
set (newValue) {
// console.log(newValue);
xx = newValue;
console.log(xx);
// 每一次數(shù)據(jù)更新都要重新設(shè)置DOM
setAppText();
}
})
obj.x = 20;
// setAppText();
</script>
流程 ： 斷點(diǎn)測(cè)試，真實(shí)的流程、 對(duì)于get set進(jìn)入環(huán)境的理解
- 解析html，初始均無(wú)值,div.innerHTML = undefined
- 進(jìn)入腳本(script),聲明let、const、 const (均為指向，不解析)、var
-
Object.defineProperty() 對(duì)象的方法、不解析、定義或修改對(duì)象屬性、描述符（可枚舉enumerable、可重寫(xiě)、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í)行 - 點(diǎn)擊之前的一次解析流程 ，=>點(diǎn)擊后觸發(fā)++函數(shù)
原生實(shí)現(xiàn)函數(shù)處理數(shù)據(jù)，數(shù)據(jù)顯示在DOM，改變后的數(shù)據(jù)在js中操作。即簡(jiǎn)易的雙向綁定
proxy (ES6)
代理
暫不了解
v-model
指令：在表單控件或者組件上創(chuàng)建雙向綁定。(input, textarea,select)
更新數(shù)據(jù)，本質(zhì)，語(yǔ)法糖，負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件以更新數(shù)據(jù)（，并對(duì)極端情況處理。）
- v-model 會(huì)忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來(lái)源。你應(yīng)該通過(guò) JavaScript 在組件的 data 選項(xiàng)中聲明初始值。
v-model 在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：
- text 和 textarea 元素使用 value 屬性和 input 事件；
- checkbox 和 radio 使用 checked 屬性和 change 事件；
- select 字段將 value 作為 prop 并將 change 作為事件。
Point：由于v-model只是語(yǔ)法糖，下面三個(gè)作用相同
- v-model ————
<input v-model="message">
下面兩種解釋雙向綁定： v-bind可以把data數(shù)據(jù)綁定給value, @input把用戶輸入的值在去賦給data,這樣實(shí)現(xiàn)了雙向綁定
需要在Vue實(shí)例中操作數(shù)據(jù)
<input v-bind:value="message" v-on:input="message = $event.target.value" />- 簡(jiǎn)寫(xiě)————
<input :value="message" @input="message = $event.target.value" />
