面試題你能寫乙個Vue的雙向資料繫結嗎？

在目前的前端面試中，vue的雙向資料繫結已經成為了乙個非常容易考到的點，即使不能當場寫出來，至少也要能說出原理。本篇文章中我將會仿照vue寫乙個雙向資料繫結的例項，名字就叫myvue吧。結合注釋，希望能讓大家有所收穫。

1、原理

vue的雙向資料繫結的原理相信大家也都十分了解了，主要是通過object物件的defineproperty屬性，重寫data的set和get函式來實現的,這裡對原理不做過多描述，主要還是來實現乙個例項。為了使**更加的清晰，這裡只會實現最基本的內容，主要實現v-model，v-bind 和v-click三個命令，其他命令也可以自行補充。

新增網上的一張圖

2、實現

頁面結構很簡單，如下

包含：乙個input，使用v-model指令

乙個button，使用v-click指令

乙個h3，使用v-bind指令。

我們最後會通過類似於vue的方式來使用我們的雙向資料繫結，結合我們的資料結構新增注釋

data: ,

methods: ,}})

首先我們需要定義乙個myvue建構函式：

function myvue(options)

為了初始化這個建構函式，給它新增一個_init屬性

function myvue(options) 
myvue.prototype._init = function (options) 
this.$methods = options.methods; // this.$methods = }
}

並改造_init函式

myvue.prototype._obverse = function (obj) 
var value;
for (key in obj) 
object.defineproperty(this.$data, key, `);
return value;
},set: function (newval) `);
if (value !== newval) }})
}}} myvue.prototype._init = function (options)

接下來我們寫乙個指令類watcher，用來繫結更新函式，實現對dom元素的更新

function watcher(name, el, vm, exp, attr) 
watcher.prototype.update = function ()

更新_init函式以及_obverse函式

myvue.prototype._init = function (options) ;   //_binding儲存著model與view的對映關係，也就是我們前面定義的watcher的例項。當model改變時，我們會觸發其中的指令類更新，保證view也能實時更新
//...
} myvue.prototype._obverse = function (obj) 
_directives: 
};//...
var binding = this._binding[key];
object.defineproperty(this.$data, key, `);
if (value !== newval) )}}
})}}}

那麼如何將view與model進行繫結呢？接下來我們定義乙個_compile函式，用來解析我們的指令（v-bind,v-model,v-clickde）等，並在這個過程中對view與model進行繫結。

myvue.prototype._init = function (options) 
var _this = this;
var nodes = root.children;
for (var i = 0; i < nodes.length; i++) 
if (node.hasattribute('v-click')) )();
}if (node.hasattribute('v-model') && (node.tagname == 'input' || node.tagname == 'textarea')) 
_this._binding[attrval]._directives.push(new watcher(
'input',
node,
_this,
attrval,
'value'
))return function() 
})(i));
}if (node.hasattribute('v-bind')) }}

至此，我們已經實現了乙個簡單vue的雙向繫結功能，包括v-bind, v-model, v-click三個指令。效果如下圖

附上全部**，不到150行

text-align: center;
}

面試題你能寫乙個Vue的雙向資料繫結嗎？

乙個面試題

乙個面試題

乙個面試題

面試題 你能寫乙個Vue的雙向資料繫結嗎？

乙個面試題

乙個面試題

乙個面試題

相關推薦

面試題你能寫乙個Vue的雙向資料繫結嗎？