原理：
vue實現雙向資料繫結的原理就是利用了 object.defineproperty() 這個方法重新定義了物件獲取屬性值(get)和設定屬性值(set)的操作來實現的。
它接收三個引數，要操作的物件，要定義或修改的物件屬性名，屬性描述符。重點就是最後的屬性描述符。
屬性描述符是乙個物件，主要有兩種形式：資料描述符和訪問描述符。這兩種物件只能選擇一種使用，不能混合兩種描述符的屬性同時使用。上面說的get和set就是屬於訪問描述符物件的屬性。
在面試中如何應對？
面試官：說一下vue雙向繫結的原理？
答：vue實現雙向資料繫結的原理就是利用了 object.defineproperty() 這個方法重新定義了物件獲取屬性值(get)和設定屬性值(set)的操作來實現的。**演示：defineproperty的用法var obj = ;var name;//第乙個引數：定義屬性的物件。//第二個引數：要定義或修改的屬性的名稱。//第三個引數：將被定義或修改的屬性描述符。
object.defineproperty(obj, 「data」,
,//設定值set: function (val) })
//賦值呼叫 setobj.data = 『aaa』;
//取值呼叫 getconsole.log(obj.data);
什麼是資料雙向繫結？
vue是乙個mvvm框架，即資料雙向繫結，即當資料發生變化的時候，檢視也就發生變化，當檢視發生變化的時候，資料也會跟著同步變化。這也算是vue的精髓之處了。值得注意的是，我們所說的資料雙向繫結，一定是對於ui控制項來說的，非ui控制項不會涉及到資料雙向繫結。 單向資料繫結是使用狀態管理工具（如redux）的前提。如果我們使用vuex，那麼資料流也是單項的，這時就會和雙向資料繫結有衝突，我們可以這麼解決。
為什麼要實現資料的雙向繫結？
在vue中，如果使用vuex，實際上資料還是單向的，之所以說是資料雙向繫結，這是用的ui控制項來說，對於我們處理表單，vue的雙向資料繫結用起來就特別舒服了。
即兩者並不互斥， 在全域性性資料流使用單項，方便跟蹤； 區域性性資料流使用雙向，簡單易操作。
一、訪問器屬性
object.defineproperty()函式可以定義物件的屬性相關描述符， 其中的set和get函式對於完成資料雙向繫結起到了至關重要的作用，下面，我們看看這個函式的基本使用方式。
var obj =
object.defineproperty(obj, 'foo', ,
set: function (newval)
});obj.foo; // 將要讀取obj.foo屬性
obj.foo = 'name'; // 當前值為 name
二、簡單的資料雙向繫結實現方法
輸入：
可以看到，實現乙個簡單的資料雙向繫結還是不難的： 使用object.defineproperty()來定義屬性的set函式，屬性被賦值的時候，修改input的value值以及span中的innerhtml；然後監聽input的keyup事件，修改物件的屬性值，即可實現這樣的乙個簡單的資料雙向繫結。
三、 實現任務的思路
上面我們只是實現了乙個最簡單的資料雙向繫結，而我們真正希望實現的時下面這種方式：
即和vue一樣的方式來實現資料的雙向繫結。那麼，我們可以把整個實現過程分為下面幾步：
輸入框以及文字節點與 data 中的資料繫結
輸入框內容變化時，data 中的資料同步變化。即 view => model 的變化。
data 中的資料變化時，文字節點的內容同步變化。即 model => view 的變化。
四、documentfragment
如果希望實現任務一，我們還需要使用到 documentfragment 文件片段，可以把它看做乙個容器，如下所示：
這樣，我們就可以得到下面的dom樹：
使用文件片段的好處在於：在文件片段上進行操作dom，而不會影響到真實的dom，操作完成之後，我們就可以新增到真實dom上，這樣的效率比直接在正式dom上修改要高很多 。
vue進行編譯時，就是將掛載目標的所有子節點劫持到documentfragment中，經過一番處理之後，再將documentfragment整體返回插入掛載目標。
如下所示：
console.log(dom);
function nodetofragment(node)
return flag;
}
vue雙向資料繫結
話術 vue中v model可以實現雙向繫結，其核心思想通過object.definepropery來對vue的資料進行資料劫持。主要分為四部分 第一部分observer主要是負責對vue資料進行資料劫持，使其資料擁有get和set方法 第二部分指令解析器負責繫結資料和指令，繫結試圖更新方法 第三部...
vue雙向資料繫結
1.資料響應式原理 主要是利用object.defineproterty 來自定義object的getter,setter function observe value,cb function definereactive obj,key,val,cb set newval class vue da...
Vue 的雙向資料繫結
model 如何改變view 從model 到view 的對映 data binding 這樣可以大量節省你人肉來update view的 view 又是如何改變model 的 從view 到 model 的事件監聽 dom listeners 這樣你的model 會隨著view觸發事件而改變 資料...