Vue是如何實(shí)現(xiàn)雙向數(shù)據(jù)綁定的？數(shù)據(jù)與視圖的綁定與同步，最終體現(xiàn)在對(duì)數(shù)據(jù)的讀寫處理過程中，也就是 Object.defineProperty() 定義的數(shù)據(jù) set、get 函數(shù)中。Vue 中對(duì)于的函

Vue是如何實(shí)現(xiàn)雙向數(shù)據(jù)綁定的？

數(shù)據(jù)與視圖的綁定與同步，最終體現(xiàn)在對(duì)數(shù)據(jù)的讀寫處理過程中，也就是 Object.defineProperty() 定義的數(shù)據(jù) set、get 函數(shù)中。Vue 中對(duì)于的函數(shù)為 defineReactive，在精簡(jiǎn)版實(shí)現(xiàn)中，我只保留了一些基本特性：

function defineReactive(obj， key， value) {

var dep = new Dep()

Object.defineProperty(obj， key， {

enumerable: true，

configurable: true，

get: function reactiveGetter() {

if (Dep.target) {

dep.depend()

}

return value

}，

set: function reactiveSetter(newVal) {

if (value === newVal) {

return

} else {

value = newVal

dep.notify()

}

}

})

}

在對(duì)數(shù)據(jù)進(jìn)行讀取時(shí)，如果當(dāng)前有 Watcher（對(duì)數(shù)據(jù)的觀察者吧，watcher 會(huì)負(fù)責(zé)將獲取的新數(shù)據(jù)發(fā)送給視圖），那將該 Watcher 綁定到當(dāng)前的數(shù)據(jù)上（dep.depend()，dep 關(guān)聯(lián)當(dāng)前數(shù)據(jù)和所有的 watcher 的依賴關(guān)系），是一個(gè)檢查并記錄依賴的過程。而在對(duì)數(shù)據(jù)進(jìn)行賦值時(shí)，如果數(shù)據(jù)發(fā)生改變，則通知所有的 watcher（借助 dep.notify()）。這樣，即便是我們手動(dòng)改變了數(shù)據(jù)，框架也能夠自動(dòng)將數(shù)據(jù)同步到視圖。

Vue動(dòng)態(tài)生成的input怎么實(shí)現(xiàn)數(shù)據(jù)雙向綁定？

你可以用渲染的時(shí)候讓 h 這種動(dòng)態(tài)生成的方法來加上this.my_variables 下面是例子或者使用$refs，給你的input一個(gè)id，然后獲取到以后，用compute好的值給他賦值；renderHeader: (h)=>{return h("div"，[h("strong"，"序號(hào)")，h("Icon"，{props:{type: this.my_variables}，style: {marginLeft: "5px"}})])}，我也是在學(xué)習(xí)，希望能有所幫助

只有我一個(gè)人感覺Layui和Vue差別不大嗎？

layui基于jquery，當(dāng)然很多地方也是直接操作josn數(shù)據(jù)，綁定數(shù)據(jù)直接顯示，vue底層是操作虛擬dom，實(shí)現(xiàn)數(shù)據(jù)綁定，其實(shí)開發(fā)者不用關(guān)心，寫法vue還需要在dom指定位置上綁定data，甚至要做一些邏輯，比如v-if等，layui其實(shí)是已經(jīng)封裝好的方法直接調(diào)用。

vue有個(gè)最大的問題是，如果頁面很復(fù)雜，dom，data，method這三者因?yàn)椴辉谝粋€(gè)地方，找起來要人命，當(dāng)然vue3解決了，可以把所有邏輯寫一個(gè)function，我個(gè)人還是覺得簡(jiǎn)單的頁面用vue，復(fù)雜的業(yè)務(wù)邏輯多的用jquery