快捷導(dǎo)航

Vue 2.0雙向綁定原理的實(shí)現(xiàn)方法

更新時(shí)間：2019年10月23日 16:30:46 作者：前端的小劉老師

這篇文章主要為大家詳細(xì)介紹了Vue 2.0雙向綁定原理的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Object.defineProperty方法

vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)。

具體實(shí)現(xiàn)過(guò)程的代碼如下：

1、定義構(gòu)造函數(shù)

function Vue(option){
 this.$el = document.querySelector(option.el); //獲取掛載節(jié)點(diǎn)
 this.$data = option.data;
 this.$methods = option.methods;
 this.deps = {}; //所有訂閱者集合 目標(biāo)格式（一對(duì)多的關(guān)系）：{msg: [訂閱者1, 訂閱者2, 訂閱者3], info: [訂閱者1, 訂閱者2]}
 this.observer(this.$data); //調(diào)用觀察者
 this.compile(this.$el); //調(diào)用指令解析器
}

2、定義指令解析器

Vue.prototype.compile = function (el) {
 let nodes = el.children; //獲取掛載節(jié)點(diǎn)的子節(jié)點(diǎn)
 for (var i = 0; i < nodes.length; i++) {
 var node = nodes[i];
 if (node.children.length) {
 this.compile(node) //遞歸獲取子節(jié)點(diǎn)
 }
 if (node.hasAttribute('l-model')) { //當(dāng)子節(jié)點(diǎn)存在l-model指令
 let attrVal = node.getAttribute('l-model'); //獲取屬性值
 node.addEventListener('input', (() => {
 this.deps[attrVal].push(new Watcher(node, "value", this, attrVal)); //添加一個(gè)訂閱者
 let thisNode = node;
 return () => {
  this.$data[attrVal] = thisNode.value //更新數(shù)據(jù)層的數(shù)據(jù)
 }
 })())
 }
 if (node.hasAttribute('l-html')) {
 let attrVal = node.getAttribute('l-html'); //獲取屬性值
 this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一個(gè)訂閱者
 }
 if (node.innerHTML.match(/{{([^\{|\}]+)}}/)) {
 let attrVal = node.innerHTML.replace(/[{{|}}]/g, ''); //獲取插值表達(dá)式內(nèi)容
 this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一個(gè)訂閱者
 }
 if (node.hasAttribute('l-on:click')) {
 let attrVal = node.getAttribute('l-on:click'); //獲取事件觸發(fā)的方法名
 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]; //每一個(gè)數(shù)據(jù)的屬性值
 that.deps[key] = []; //初始化所有訂閱者對(duì)象{msg: [訂閱者], info: []}
 var watchers = that.deps[key];
 Object.defineProperty(data, key, { //數(shù)據(jù)劫持
 get: function(){
  return val;
 },
 set: function(newVal){ //設(shè)置值(說(shuō)明有數(shù)據(jù)更新)
  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]
}

以上代碼定義在一個(gè)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>
 <!--
 實(shí)現(xiàn)mvvm的雙向綁定，是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽(tīng)回調(diào)。就必須要實(shí)現(xiàn)以下幾點(diǎn)：
 1、實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽(tīng)器Observer，能夠?qū)?shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽(tīng)，如有變動(dòng)可拿到最新值并通知訂閱者
 2、實(shí)現(xiàn)一個(gè)指令解析器Compile，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)
 3、實(shí)現(xiàn)一個(gè)Watcher，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個(gè)屬性變動(dòng)的通知，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)，從而更新視圖
 4、mvvm入口函數(shù)，整合以上三者
 -->
 <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">點(diǎn)我</button>
 <p>{{msg}}</p>
 </div>

 <script>
 var vm = new Vue({
 el: "#app",
 data: {
 msg: "恭喜發(fā)財(cái)",
 info: "好好學(xué)習(xí), 天天向上"
 },
 methods: {
 clickMe(){
  this.msg = "我愛(ài)敲代碼";
 }
 }
 })
 </script>
</body>
</html>

更多教程點(diǎn)擊《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: