最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

前言

之前公司招人，面試了一些的前端同學(xué)，因為公司使用的前端技術(shù)是Vue，所以免不了問到其響應(yīng)式原理和Vue的雙向數(shù)據(jù)綁定。但是這邊面試到的80%的同學(xué)會把兩者搞混，通常我要是先問響應(yīng)式原理再問雙向數(shù)據(jù)綁定原理，來面試的同學(xué)大都會認為是一回事，那么這里我們就說一下二者的區(qū)別。

響應(yīng)式原理

是Vue的核心特性之一，數(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，當我們訪問data.key時會被這個方法攔截到
   get: function getter () {
       //我們在這里收集依賴
       return obj[key];
   },
   //攔截set，當我們?yōu)閐ata.key賦值時會被這個方法攔截到
   set: function setter (newVal) {
       //當數(shù)據(jù)變更時，通知依賴項變更UI
    }  
})
復(fù)制代碼

我們通過Object.defineProperty為對象obj添加屬性，可以設(shè)置對象屬性的getter和setter函數(shù)。之后我們每次通過點語法獲取屬性都會執(zhí)行這里的getter函數(shù)，在這個函數(shù)中我們會把調(diào)用此屬性的依賴收集到一個集合中 ；而在我們給屬性賦值(修改屬性)時，會觸發(fā)這里定義的setter函數(shù)，在次函數(shù)中會去通知集合中的依賴更新，做到數(shù)據(jù)變更驅(qū)動視圖變更。

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

let nObj=new Proxy(obj,{
 //攔截get，當我們訪問nObj.key時會被這個方法攔截到
 get: function (target, propKey, receiver) {
   console.log(`getting ${propKey}!`);
   return Reflect.get(target, propKey, receiver);
 },
 //攔截set，當我們?yōu)閚Obj.key賦值時會被這個方法攔截到
 set: function (target, propKey, value, receiver) {
   console.log(`setting ${propKey}!`);
   return Reflect.set(target, propKey, value, receiver);
 }
})
復(fù)制代碼

Proxy的詳細使用方法參考ES6教程。

Vue的響應(yīng)式原理的實現(xiàn)細節(jié)相信大多數(shù)同學(xué)已經(jīng)很熟悉了，這里就不在展開細談了，如果還想更詳細的了解，或者想要做一個簡易的Vue實現(xiàn)，可以參考這篇Vue原理，相信你會有不小收獲。

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

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

復(fù)制代碼

上述的組件就相當于如下代碼

復(fù)制代碼

因此當我們修改input輸入框中的值時，我們通過v-model綁定的值也會同步修改，基于上述原理，我們可以很容易的實現(xiàn)一個數(shù)據(jù)雙向綁定的組件。

v-model實踐

首先我們定義一個Vue組件，相信大家已經(jīng)很熟悉了。

 
click me {{value}}



復(fù)制代碼

上面的組件定了我們通過在props中添加value屬性，并且在值更新時觸發(fā)input事件。created鉤子和watch中為localvalue賦值是為了同步父組件狀態(tài)到子組件中。通過上面的組件定義，我們就可以在組件上使用v-model指令做雙向數(shù)據(jù)綁定了。