溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關Vue 2.0中實現雙向綁定的原理是什么，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
1、定義構造函數
function Vue(option){
this.$el = document.querySelector(option.el); //獲取掛載節點
this.$data = option.data;
this.$methods = option.methods;
this.deps = {}; //所有訂閱者集合 目標格式（一對多的關系）：{msg: [訂閱者1, 訂閱者2, 訂閱者3], info: [訂閱者1, 訂閱者2]}
this.observer(this.$data); //調用觀察者
this.compile(this.$el); //調用指令解析器
}2、定義指令解析器
Vue.prototype.compile = function (el) {
let nodes = el.children; //獲取掛載節點的子節點
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (node.children.length) {
this.compile(node) //遞歸獲取子節點
}
if (node.hasAttribute('l-model')) { //當子節點存在l-model指令
let attrVal = node.getAttribute('l-model'); //獲取屬性值
node.addEventListener('input', (() => {
this.deps[attrVal].push(new Watcher(node, "value", this, attrVal)); //添加一個訂閱者
let thisNode = node;
return () => {
this.$data[attrVal] = thisNode.value //更新數據層的數據
}
})())
}
if (node.hasAttribute('l-html')) {
let attrVal = node.getAttribute('l-html'); //獲取屬性值
this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一個訂閱者
}
if (node.innerHTML.match(/{{([^\{|\}]+)}}/)) {
let attrVal = node.innerHTML.replace(/[{{|}}]/g, ''); //獲取插值表達式內容
this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一個訂閱者
}
if (node.hasAttribute('l-on:click')) {
let attrVal = node.getAttribute('l-on:click'); //獲取事件觸發的方法名
node.addEventListener('click', this.$methods[attrVal].bind(this.$data)); //將this指向this.$data
}
}
}3、定義觀察者
Vue.prototype.observer = function(data){
for(var key in data){
(function(that){
let val = data[key]; //每一個數據的屬性值
that.deps[key] = []; //初始化所有訂閱者對象{msg: [訂閱者], info: []}
var watchers = that.deps[key];
Object.defineProperty(data, key, { //數據劫持
get: function(){
return val;
},
set: function(newVal){ //設置值(說明有數據更新)
if(val !== newVal){
val = newVal;
}
// 通知訂閱者
watchers.forEach(watcher=>{
watcher.update()
})
}
})
})(this)
}
}4、定義訂閱者
function Watcher(el, attr, vm, attrVal) {
this.el = el;
this.attr = attr;
this.vm = vm;
this.val = attrVal;
this.update(); //更新視圖
}5、更新視圖
Watcher.prototype.update = function () {
this.el[this.attr] = this.vm.$data[this.val]
}以上代碼定義在一個Vue.js文件中，在需要使用雙向綁定的地方引入即可。
嘗試使用一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<!--
實現mvvm的雙向綁定，是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。就必須要實現以下幾點：
1、實現一個數據監聽器Observer，能夠對數據對象的所有屬性進行監聽，如有變動可拿到最新值并通知訂閱者
2、實現一個指令解析器Compile，對每個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
3、實現一個Watcher，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個屬性變動的通知，執行指令綁定的相應回調函數，從而更新視圖
4、mvvm入口函數，整合以上三者
-->
<div id="app">
<input type="text" l-model="msg" >
<p l-html="msg"></p>
<input type="text" l-model="info" >
<p l-html="info"></p>
<button l-on:click="clickMe">點我</button>
<p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "恭喜發財",
info: "好好學習, 天天向上"
},
methods: {
clickMe(){
this.msg = "我愛敲代碼";
}
}
})
</script>
</body>
</html>Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。
關于Vue 2.0中實現雙向綁定的原理是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
