第一文詳解Vue的響應(yīng)式原則與雙向數(shù)據(jù)綁定目錄反應(yīng)性原則雙向數(shù)據(jù)綁定v-model實踐

反應(yīng)性原則

它是Vue.js的核心特性之一，一個數(shù)據(jù)驅(qū)動的視圖，我們修改數(shù)據(jù)視圖來響應(yīng)更新，非常優(yōu)雅。

Vue2.x使用Object.defineProperty()實現(xiàn)，而Vue3.x使用Proxy實現(xiàn)。我們先來看看2.x的實現(xiàn)。

Object.defineProperty(obj,key,{

enumerable:true,

configurable:true,

get:functiongetter(){

returnobj[key];

set:functionsetter(newVal){

})

我們通過Object.defineProperty給對象obj添加屬性，可以設(shè)置對象屬性的getter和setter函數(shù)。

之后，我們每通過點(diǎn)語法獲取一個屬性，就會執(zhí)行這里的getter函數(shù)。在這個函數(shù)中，我們會將調(diào)用這個屬性的依賴收集到一個集合中；當(dāng)我們給屬性賦值時，這個定義就會被觸發(fā)。setter函數(shù)，在輔助函數(shù)中，會通知集合中的依賴更新，讓數(shù)據(jù)變化驅(qū)動視圖變化。

3.x的核心思想和2.x一樣，只是在數(shù)據(jù)劫持上使用了Proxy而不是Object.defineProperty，但是在處理數(shù)組和響應(yīng)式處理新屬性時Proxy比Object.defineProperty更方便.

letnObj=newProxy(obj,{

get:function(target,propKey,receiver){

console.log(`getting${propKey}!`);

returnReflect.get(target,propKey,receiver);

set:function(target,propKey,value,receiver){

console.log(`setting${propKey}!`);

returnReflect.set(target,propKey,value,receiver);

})

Vue響應(yīng)式原理的實現(xiàn)細(xì)節(jié)相信大部分人已經(jīng)很熟悉了，這里不再贅述。

雙向數(shù)據(jù)綁定

雙向數(shù)據(jù)綁定通常是指我們使用的v-model指令的實現(xiàn)。它是Vue的一個特性，也可以說是輸入事件和值的語法糖。Vue通過v-model指令為組件添加輸入事件處理和值屬性賦值。

template

inputv-model='localValue'/

/template

上面的組件等價于下面的代碼。

template

input@input='onInput':value='localValue'/

span{{localValue}}/span

/template

script

exportdefault{

data(){

return{

localValue:'',

methods:{

onInput(v){

this.localValue=v.target.value;

console.log(this.localValue)

/script

因此，當(dāng)我們修改輸入框的值時，我們通過v-model綁定的值也會同步修改?；谝陨显恚覀兛梢暂p松實現(xiàn)一個雙向數(shù)據(jù)綁定組件。

v-model實踐

首先，我們定義一個Vue組件：

tempalte

div@click="addCount"clickme{{value}}/div

/template

script

exportdefault{

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更新時觸發(fā)input事件。在創(chuàng)建的hook和watch中對localvalue的賦值是將父組件的狀態(tài)同步到子組件。

通過上面的組件定義，我們可以使用v-model指令對組件進(jìn)行雙向數(shù)據(jù)綁定。

template

add-onev-model="count"/add-one

spanTheparentcomponent{{count}}/span

/tempalte

script

exportdefault{

data(){

return{

count:0,

methods:{

created(){

/script

以下是實際效果。

當(dāng)然，我們也可以不使用value和input事件的組合。為了讓組件的定義更加語義化，我們還可以自定義屬性和事件，實現(xiàn)雙向綁定。我們可以在組件的模型選項中設(shè)置值和事件。如下：

exportdefault{

model:{

value:'count',

event:'change'

props:{

count:{

type:Number,

default:0

methods:{

addCount(){

this.localvalue++;

this.$emit('change',this.localvalue);

}

由上述組件定義。

add-onev-model="count"/add-one

相當(dāng)于：

template

add-one@change='onChange':count='count'/add-one

span{{count}}/span

/template

script

exportdefault{

data(){