Vue 的響應(yīng)式原則與雙向數(shù)據(jù)綁定
反應(yīng)性原則
它是 Vue.js 的核心特性之一，一個(gè)數(shù)據(jù)驅(qū)動(dòng)的視圖，我們修改數(shù)據(jù)視圖來響應(yīng)更新，非常優(yōu)雅。
Vue2.x 使用 Object.defineProperty() 實(shí)現(xiàn)，而 Vue3.x 使用 Proxy 實(shí)現(xiàn)。 我們先來看看2.x的實(shí)現(xiàn)。
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function getter () {
return obj[key];
},
set: function setter (newVal) {
}
})
我們通過Object.defineProperty給對象obj添加屬性，可以設(shè)置對象屬性的getter和setter函數(shù)。
之后，我們每通過點(diǎn)語法獲取一個(gè)屬性，就會(huì)執(zhí)行這里的getter函數(shù)。 在這個(gè)函數(shù)中，我們會(huì)將調(diào)用這個(gè)屬性的依賴收集到一個(gè)集合中； 當(dāng)我們給屬性賦值時(shí)，這個(gè)定義就會(huì)被觸發(fā)。 setter函數(shù)，在輔助函數(shù)中，會(huì)通知集合中的依賴更新，讓數(shù)據(jù)變化驅(qū)動(dòng)視圖變化。
3.x的核心思想和2.x一樣，只是在數(shù)據(jù)劫持上使用了Proxy而不是Object.defineProperty，但是在處理數(shù)組和響應(yīng)式處理新屬性時(shí)Proxy比Object.defineProperty更方便 .
let nObj=new Proxy(obj,{
get: function (target, propKey, receiver) {
console.log(`getting ${propKey}!`);
return Reflect.get(target, propKey, receiver);
},
set: function (target, propKey, value, receiver) {
console.log(`setting ${propKey}!`);
return Reflect.set(target, propKey, value, receiver);
}
})
Vue響應(yīng)式原理的實(shí)現(xiàn)細(xì)節(jié)相信大部分人已經(jīng)很熟悉了，這里不再贅述。
雙向數(shù)據(jù)綁定
雙向數(shù)據(jù)綁定通常是指我們使用的 v-model 指令的實(shí)現(xiàn)。 它是 Vue 的一個(gè)特性，也可以說是輸入事件和值的語法糖。 Vue 通過 v-model 指令為組件添加輸入事件處理和值屬性賦值。
<template>
<input v-model='localValue'/>
</template>
上面的組件等價(jià)于下面的代碼。
<template>
<input @input='onInput' :value='localValue' />
<span>{{localValue}}</span>
</template>
<script>
export default{
data(){
return {
localValue:'',
}
},
methods:{
onInput(v){
this.localValue=v.target.value;
console.log(this.localValue)
}
}
}
</script>
因此，當(dāng)我們修改輸入框的值時(shí)，我們通過v-model綁定的值也會(huì)同步修改。 基于以上原理，我們可以輕松實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定組件。
v-model實(shí)踐
首先，我們定義一個(gè)Vue組件：
<tempalte>
<div class="count" @click="addCount">click me {{value}}</div>
</template>
<script>
export default{
props:{
value:{
type:Number,
default:0
}
},
watch:{
value(v){
this.localvalue=v;
}
},
methods:{
addCount(){
this.localvalue++;
this.$emit('input',this.localvalue);
}
},
data(){
return{
localvalue:0
}
},
created(){
this.localvalue=this.value;
}
}
</script>
上面的組件指定我們在 props 中添加 value 屬性，并在 value 更新時(shí)觸發(fā) input 事件。 在創(chuàng)建的 hook 和 watch 中對 localvalue 的賦值是將父組件的狀態(tài)同步到子組件。
通過上面的組件定義，我們可以使用 v-model 指令對組件進(jìn)行雙向數(shù)據(jù)綁定。
<template>
<add-one v-model="count"></add-one>
<span>The parent component{{count}}</span>
</tempalte>
<script>
export default{
data() {
return {
count: 0,
};
},
methods: {
},
created(){
}
}
</script>
以下是實(shí)際效果。
當(dāng)然，我們也可以不使用 value 和 input 事件的組合。 為了讓組件的定義更加語義化，我們還可以自定義屬性和事件，實(shí)現(xiàn)雙向綁定。 我們可以在組件的模型選項(xiàng)中設(shè)置值和事件。 如下：
export default{
model:{
value:'count',
event:'change'
},
props:{
count:{
type:Number,
default:0
}
},
methods:{
addCount(){
this.localvalue++;
this.$emit('change',this.localvalue);
}
},
}
由上述組件定義。
<add-one v-model="count"></add-one>
相當(dāng)于：
<template>
<add-one @change='onChange' :count='count'></add-one>
<span>{{count}}</span>
</template>
<script>
export default{
data(){
return {
count:0,
}
},
methods:{
onChange(v){
this.count=v;
console.log(this.count)
}
}
}
</script>
只是v-model指令幫我們做了上面的事件添加、屬性綁定和狀態(tài)同步操作。
最后
以上就是今天全部內(nèi)容，謝謝你的閱讀。如果你覺得有用，請記得點(diǎn)贊我，關(guān)注我，感謝感謝。
