vue 是一個漸進式的 javascript 框架
????雙向綁定通過對 數(shù)據(jù)的 劫持 結(jié)合 發(fā)布訂閱模式的方法來實現(xiàn)雙向綁定;即是 數(shù)據(jù)發(fā)生變化, 視圖跟著發(fā)生變化; 數(shù)據(jù)與視圖是同步進行?
????vue 3之前是依靠的 Object.defineProperty() 這個語法 ; 該方法會直接在一個對象上定義一個新屬性藤树,或者修改一個對象的現(xiàn)有屬性栈虚,并返回此對象搭幻。
Object.defineProperty() 這個方法里面有三個參數(shù), 分別為?
Object.defineProperty(obj , prop , descriptor)
obj: 要定義屬性的對象
prop: 要定義修改的屬性的名稱或 Symbol
descriptor:要定義或修改的屬性描述符
返回值: 被傳遞給函數(shù)的對象袁翁。
(注 :在ES6中竖席,由于 Symbol類型的特殊性怕午,用Symbol類型的值來做對象的key與常規(guī)的定義或修改不同因块,而Object.defineProperty?是定義key為Symbol的屬性的方法之一。)
Object.definedProperty 的基本使用
let obj = {? name:'小明" ; age:"15" };? ?let?temp?=?obj.age;
Object.defineProperty( obj , 'age',{
get(){ console.log('你進行了對小明年齡的劫持') return temp };
set(){ console.log('你進行了小明年齡的西瓜')? return temp = value}
})
?console.log(obj.age)?//?進行了obj.age?的獲取,?返回了?temp?的值? ?
?obj.age?=?20?//?進行了obj.age的設(shè)置,?設(shè)置了temp的值,?改成了?20
?console.log(obj.age)?//?進行了?obj.age?的獲取,?返回了?temp?的值?20?
v-model 指令的第三方實現(xiàn)
? ? v-model 其實是vue 提供的一個語法糖(簡易方法)
<input v-model="text" >? 本質(zhì)上就是 <input:value="text"@input="text=>$event.target.value> </input>
v-model 基礎(chǔ)(可以看下)
進階的看下這個大佬的??
?Vue之v-model 進階?(有點深奧)