溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)vue 數(shù)據(jù)雙向綁定怎么實(shí)現(xiàn)的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
實(shí)現(xiàn)簡易版的數(shù)據(jù)雙向綁定
本文要實(shí)現(xiàn)的效果如下圖所示：
本文用到的HTML和JS主體代碼如下：
<div id="app"> <h2 v-text="msg"></h2> <input type="text" v-model="msg"> <div> <h2 v-text="msg2"></h2> <input type="text" v-model="msg2"> </div> </div>
let vm = new Vue({
el: "#app",
data: {
msg: "hello world",
msg2: "hello xiaofei"
}
})我們將按照下面三個(gè)步驟來實(shí)現(xiàn)：
第一步：將data中的數(shù)據(jù)同步到頁面上，實(shí)現(xiàn) M ==> V 的初始化；
第二步：當(dāng)input框中輸入值時(shí)，將新值同步到data中，實(shí)現(xiàn) V ==> M 的綁定；
第三步：當(dāng)data數(shù)據(jù)發(fā)生更新的時(shí)候，觸發(fā)頁面發(fā)生變化，實(shí)現(xiàn) M ==> V 的綁定。
首先，我們要?jiǎng)?chuàng)造一個(gè)Vue類，這個(gè)類接收一個(gè) options 對象，同時(shí)，我們要對 options 對象中的有效信息進(jìn)行保存；
然后，我們有三個(gè)主要模塊：Observer、Compile、Wathcer，其中，Observer用來數(shù)據(jù)劫持的，Compile用來解析元素，Wathcer是觀察者。可以寫出如下代碼：（Observer、Compile、Wathcer這三個(gè)概念，不用細(xì)究，后面會(huì)詳解講解）。
class Vue {
// 接收傳進(jìn)來的對象
constructor(options) {
// 保存有效信息
this.$el = document.querySelector(options.el);
this.$data = options.data;
// 容器: {屬性1: [wathcer1, wathcer2...], 屬性2: [...]}，用來存放每個(gè)屬性觀察者
this.$watcher = {};
// 解析元素: 實(shí)現(xiàn)Compile
this.compile(this.$el); // 要解析元素, 就得把元素傳進(jìn)去
// 劫持?jǐn)?shù)據(jù): 實(shí)現(xiàn) Observer
this.observe(this.$data); // 要劫持?jǐn)?shù)據(jù), 就得把數(shù)據(jù)傳入
}
compile() {}
observe() {}
}在這一步，我們要實(shí)現(xiàn)頁面的初始化，即解析出v-text和v-model指令，并將data中的數(shù)據(jù)渲染到頁面中。
這一步的關(guān)鍵在于實(shí)現(xiàn)compile方法，那么該如何解析el元素呢？思路如下：
首先要獲取到el下面的所有子節(jié)點(diǎn)，然后遍歷這些子節(jié)點(diǎn)，如果子節(jié)點(diǎn)還有子節(jié)點(diǎn)，那我們就需要用到遞歸的思想；
遍歷子節(jié)點(diǎn)找到所有有指令的元素，并將對應(yīng)的數(shù)據(jù)渲染到頁面中。
代碼如下：（主要看compile那部分）
class Vue {
// 接收傳進(jìn)來的對象
constructor(options) {
// 獲取有用信息
this.$el = document.querySelector(options.el);
this.$data = options.data;
// 容器: {屬性1: [wathcer1, wathcer2...], 屬性2: [...]}
this.$watcher = {};
// 2. 解析元素: 實(shí)現(xiàn)Compile
this.compile(this.$el); // 要解析元素, 就得把元素傳進(jìn)去
// 3. 劫持?jǐn)?shù)據(jù): 實(shí)現(xiàn) Observer
this.observe(this.$data); // 要劫持?jǐn)?shù)據(jù), 就得把數(shù)據(jù)傳入
}
compile(el) {
// 解析元素下的每一個(gè)子節(jié)點(diǎn), 所以要獲取el.children
// 備注: children 返回元素集合, childNodes返回節(jié)點(diǎn)集合
let nodes = el.children;
// 解析每個(gè)子節(jié)點(diǎn)的指令
for (var i = 0, length = nodes.length; i < length; i++) {
let node = nodes[i];
// 如果當(dāng)前節(jié)點(diǎn)還有子元素, 遞歸解析該節(jié)點(diǎn)
if(node.children){
this.compile(node);
}
// 解析帶有v-text指令的元素
if (node.hasAttribute("v-text")) {
let attrVal = node.getAttribute("v-text");
node.textContent = this.$data[attrVal]; // 渲染頁面
}
// 解析帶有v-model指令的元素
if (node.hasAttribute("v-model")) {
let attrVal = node.getAttribute("v-model");
node.value = this.$data[attrVal];
}
}
}
observe(data) {}
}這樣，我們就實(shí)現(xiàn)頁面的初始化了。
因?yàn)閕nput帶有v-model指令，因此我們要實(shí)現(xiàn)這樣一個(gè)功能：在input框中輸入字符，data中綁定的數(shù)據(jù)發(fā)生相應(yīng)的改變。
我們可以在input這個(gè)元素上綁定一個(gè)input事件，事件的效果就是：將data中的相應(yīng)數(shù)據(jù)修改為input中的值。
這一部分的實(shí)現(xiàn)代碼比較簡單，只要看標(biāo)注那個(gè)地方就明白了，代碼如下：
class Vue {
constructor(options) {
this.$el = document.querySelector(options.el);
this.$data = options.data;
this.$watcher = {};
this.compile(this.$el);
this.observe(this.$data);
}
compile(el) {
let nodes = el.children;
for (var i = 0, length = nodes.length; i < length; i++) {
let node = nodes[i];
if(node.children){
this.compile(node);
}
if (node.hasAttribute("v-text")) {
let attrVal = node.getAttribute("v-text");
node.textContent = this.$data[attrVal];
}
if (node.hasAttribute("v-model")) {
let attrVal = node.getAttribute("v-model");
node.value = this.$data[attrVal];
// 看這里！！只多了三行代碼！！
node.addEventListener("input", (ev)=>{
this.$data[attrVal] = ev.target.value;
// 可以試著在這里執(zhí)行:console.log(this.$data),
// 就可以看到每次在輸入框輸入文字的時(shí)候,data中的msg值也發(fā)生了變化
})
}
}
}
observe(data) {}
}至此，我們已經(jīng)實(shí)現(xiàn)了：當(dāng)我們在input框中輸入字符的時(shí)候，data中的數(shù)據(jù)會(huì)自動(dòng)發(fā)生更新；
本小節(jié)的主要任務(wù)是：當(dāng)data中的數(shù)據(jù)發(fā)生更新的時(shí)候，綁定了該數(shù)據(jù)的元素會(huì)在頁面上自動(dòng)更新視圖。具體思路如下：
1) 我們將要實(shí)現(xiàn)一個(gè) Wathcer 類，它有一個(gè)update方法，用來更新頁面。觀察者的代碼如下：
class Watcher{
constructor(node, updatedAttr, vm, expression){
// 將傳進(jìn)來的值保存起來，這些數(shù)據(jù)都是渲染頁面時(shí)要用到的數(shù)據(jù)
this.node = node;
this.updatedAttr = updatedAttr;
this.vm = vm;
this.expression = expression;
this.update();
}
update(){
this.node[this.updatedAttr] = this.vm.$data[this.expression];
}
}2) 試想，我們該給哪些數(shù)據(jù)添加觀察者？何時(shí)給數(shù)據(jù)添加觀察者？
在解析元素的時(shí)候，當(dāng)解析到v-text和v-model指令的時(shí)候，說明這個(gè)元素是需要和數(shù)據(jù)雙向綁定的，因此我們在這時(shí)往容器中添加觀察者。我們需用到這樣一個(gè)數(shù)據(jù)結(jié)構(gòu)：{屬性1: [wathcer1, wathcer2...], 屬性2: [...]}，如果不是很清晰，可以看下圖：
可以看到：vue實(shí)例中有一個(gè)$wathcer對象，$wathcer的每個(gè)屬性對應(yīng)每個(gè)需要綁定的數(shù)據(jù)，值是一個(gè)數(shù)組，用來存放觀察了該數(shù)據(jù)的觀察者。（備注：Vue源碼中專門創(chuàng)造了Dep這么一個(gè)類，對應(yīng)這里所說的數(shù)組，本文屬于簡易版本，就不過多介紹了）
3) 劫持?jǐn)?shù)據(jù)：利用對象的訪問器屬性getter和setter做到當(dāng)數(shù)據(jù)更新的時(shí)候，觸發(fā)一個(gè)動(dòng)作，這個(gè)動(dòng)作的主要目的就是讓所有觀察了該數(shù)據(jù)的觀察者執(zhí)行update方法。
總結(jié)一下，在本小節(jié)我們需要做的工作：
實(shí)現(xiàn)一個(gè)Wathcer類；
在解析指令的時(shí)候（即在compile方法中）添加觀察者；
實(shí)現(xiàn)數(shù)據(jù)劫持（實(shí)現(xiàn)observe方法）。
完整代碼如下：
class Vue {
// 接收傳進(jìn)來的對象
constructor(options) {
// 獲取有用信息
this.$el = document.querySelector(options.el);
this.$data = options.data;
// 容器: {屬性1: [wathcer1, wathcer2...], 屬性2: [...]}
this.$watcher = {};
// 解析元素: 實(shí)現(xiàn)Compile
this.compile(this.$el); // 要解析元素, 就得把元素傳進(jìn)去
// 劫持?jǐn)?shù)據(jù): 實(shí)現(xiàn) Observer
this.observe(this.$data); // 要劫持?jǐn)?shù)據(jù), 就得把數(shù)據(jù)傳入
}
compile(el) {
// 解析元素下的每一個(gè)子節(jié)點(diǎn), 所以要獲取el.children
// 拓展: children 返回元素集合, childNodes返回節(jié)點(diǎn)集合
let nodes = el.children;
// 解析每個(gè)子節(jié)點(diǎn)的指令
for (var i = 0, length = nodes.length; i < length; i++) {
let node = nodes[i];
// 如果當(dāng)前節(jié)點(diǎn)還有子元素, 遞歸解析該節(jié)點(diǎn)
if (node.children) {
this.compile(node);
}
if (node.hasAttribute("v-text")) {
let attrVal = node.getAttribute("v-text");
// node.textContent = this.$data[attrVal];
// Watcher在實(shí)例化時(shí)調(diào)用update, 替代了這行代碼
/**
* 試想Wathcer要更新節(jié)點(diǎn)數(shù)據(jù)的時(shí)候要用到哪些數(shù)據(jù)?
* e.g. p.innerHTML = vm.$data[msg]
* 所以要傳入的參數(shù)依次是: 當(dāng)前節(jié)點(diǎn)node, 需要更新的節(jié)點(diǎn)屬性, vue實(shí)例, 綁定的數(shù)據(jù)屬性
*/
// 往容器中添加觀察者: {msg1: [Watcher, Watcher...], msg2: [...]}
if (!this.$watcher[attrVal]) {
this.$watcher[attrVal] = [];
}
this.$watcher[attrVal].push(new Watcher(node, "innerHTML", this, attrVal))
}
if (node.hasAttribute("v-model")) {
let attrVal = node.getAttribute("v-model");
node.value = this.$data[attrVal];
node.addEventListener("input", (ev) => {
this.$data[attrVal] = ev.target.value;
})
if (!this.$watcher[attrVal]) {
this.$watcher[attrVal] = [];
}
// 不同于上處用的innerHTML, 這里input用的是vaule屬性
this.$watcher[attrVal].push(new Watcher(node, "value", this, attrVal))
}
}
}
observe(data) {
Object.keys(data).forEach((key) => {
let val = data[key]; // 這個(gè)val將一直保存在內(nèi)存中,每次訪問data[key],都是在訪問這個(gè)val
Object.defineProperty(data, key, {
get() {
return val; // 這里不能直接返回data[key],不然會(huì)陷入無限死循環(huán)
},
set(newVal) {
if (val !== newVal) {
val = newVal;// 同理,這里不能直接對data[key]進(jìn)行設(shè)置,會(huì)陷入死循環(huán)
this.$watcher[key].forEach((w) => {
w.update();
})
}
}
})
})
}
}
class Watcher {
constructor(node, updatedAttr, vm, expression) {
// 將傳進(jìn)來的值保存起來
this.node = node;
this.updatedAttr = updatedAttr;
this.vm = vm;
this.expression = expression;
this.update();
}
update() {
this.node[this.updatedAttr] = this.vm.$data[this.expression];
}
}
let vm = new Vue({
el: "#app",
data: {
msg: "hello world",
msg2: "hello xiaofei"
}
})至此，代碼就完成了。
感謝各位的閱讀！關(guān)于“vue 數(shù)據(jù)雙向綁定怎么實(shí)現(xiàn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼