实现vue数据双向绑定

关于vue数据双向绑定也是面试很喜欢问的题目了,这里讲下实现方式,效果图、源码、demo在文章末尾

如果文章对你有帮助,关注下我的公众号,二维码在下方,这是对我最好的支持,感恩

首先看下vue的基本结构

<div id="app">
    <div>{{a.b.c}}</div>
</div>
new Vue({
    el: '#app',
    data: {
        a: { b: { c: 1 } }
    },
});

上面是一个非常非常简单的模板,我们来一步步达到数据双向绑定的效果

数据劫持:

export class Observer {
    observe (data) {
        for(const key in data) {
            let val = data[key];
            // 递归劫持子对象
            this.observe(val);
            Object.defineProperty(data, key, {
                enumerable: true,
                configurable: true,
                get () {
                    console.log('get', val);
                    return val;
                },
                set (newVal) {
                    if (newVal !== val) {
                        console.log('set', val);
                        val = newVal;
                    }
                }
            })
        }
    }
}

创建一个观察者类用来劫持data数据,使用Object.defineProperty劫持data中的对象,并通过递归的方式劫持对象中的子对象(如果是数组则劫持改变数组的函数比如splice、push等这里不展开)

举个例子,如果对data中的数据赋值会触发set,取值会触发get

 const data = {
     a: { b: { c: 1 } }
 };
 const observer = new Observer();
 observe(data);
const n = data.a.b.c // 触发get打印 get 1
data.a.b.c = 2 // 触发set打印 set 2

解析模板:

解析{{}}中的数据,创建它们的AST抽象语法树,比如

 <div>{{a.b.c}}</div>

那解析成简单AST长这个样子,也是我们所称之为的虚拟dom

 {
     el: $el,
     variable: 'a.b.c',
     value: 1,
     vue
 }

el就是该虚拟dom所对应的真实dom(这里就是对应这个div了),variable存储绑定的变量字符串,value存储绑定变量的值,vue存储vue实例,如何变成这个样子呢,继续往下

 compile(node) {
      const reg = /(?<=\{\{)[^\}\}]+/g;
      for (let i = 0; i < node.childNodes.length; i++) {
          const childNode = node.childNodes[i];
          // 文本节点并且匹配{{}}
          if (this.isTextNode(childNode) && reg.test(childNode.textContent)) {
              childNode.textContent.match(reg).forEach(val => {
                  // 创建虚拟dom
                  this.createVdom(childNode, null, val);
              });
          }
          // 如果存在子节点继续递归解析
          if (childNode.childNodes && childNode.childNodes.length) {
              this.compile(childNode);
          }
      }
  }
 
  // 判断当前节点类型
  isTextNode(node) {
      return node.nodeType === 3;
  }
    ```
compile方法传入一颗dom树(vue中绑定的是#app),对这颗树循环和递归,解析出各个子节点,由于双括号{{}}属于文本节点,需要做一层判断是否属于文本节点,之后调用createVdom方法创建对应的虚拟dom
```javascript
 createVdom(node, dir, variable) {
      const vdom = new VDom(this.vue, node, dir, variable);// 将虚拟dom和观察者中的数据关联起来
      vdom.bindObserver();// 更新数据
      vdom.update();
  }

创建虚拟dom,传入的参数分别为vue实例、虚拟dom对应的真实dom、指令(如果没有则为null,{{}}传null,如果是v-model就传v-model字符串)、绑定的变量。所以双大括号的需要传给虚拟dom的值长这样

<div>{{a.b.c}}</div>
const vdom = new VDom(this.vue, $div, null, 'a.b.c');

之后分别触发虚拟dom的bindObserver、update方法,现在看下VDom这个虚拟dom类的实现,我们一步步分析

let target = null;const parsePath = path => {
    const p = path.split('.');
    return data => {
        p.forEach(val => {
            data = data[val];
        });
        return data;
    };
};export class VDom {
    constructor(vue, node, dir, variable) {
        this.vue = vue;
        this.$el = node;
        this.dir = dir;
        this.variable = variable;
        this.value = null;
    }// 触发Observer get,将数据和dom关联
    bindObserver() {
        target = this;
        this.setValue(parsePath(this.variable)(this.vue.$data));
        target = null;
    }setValue(val) {
        this.value = val;
    }update() {
        const reg = new RegExp(`{{${this.variable}}}`, 'g');
        this.$el.textContent = this.value;
    }
}export { target };

先是第一个方法bindObserver,他的作用是用来将当前虚拟dom和观察者数据联系在一起,在细说他的作用之前我们先改造一下观察者代码的get方法

import { Dep } from "./Dep.js";
import { target } from './VDom.js';export class Observer {
    constructor () {}// 数据监听
    observe (data) {
        if (!data || typeof data !== 'object') {
            return;
        }for(const key in data) {
            // 为每个数据创建一个收集对应虚拟dom的类
            const dep = new Dep();
            let val = data[key];
            this.observe(val);
​
            Object.defineProperty(data, key, {
                enumerable: true,
                configurable: true,
                get () {
                    // target是虚拟dom,收集当前数据绑定的虚拟dom
                    target && dep.addTarget(target);
                    return val;
                },set (newVal) {
                    if (newVal !== val) {
                        val = newVal;
                        // 数据变动通知当前数据的虚拟dom,然后更新虚拟dom对应的真实dom
                        dep.notify(newVal);
                    }
                }
            })
        }
    }
}

观察者类中增加target和Dep,target作用是用来和虚拟dom中bindObserver方法相关联,贴下VDom.js下的相关代码

 // 当前都在VDom.js下
let target = null;const parsePath = path => {
    const p = path.split('.');
    return data => {
        p.forEach(val => {
            data = data[val];
        });
        return data;
    };
};
...
export class VDom {
...
    bindObserver() {
         target = this;
         // 触发了观察者get
         this.setValue(parsePath(this.variable)(this.vue.$data));
         target = null;
    }
     
    setValue(val) {
         this.value = val;
    }
...
}export { target };

执行bindObserver方法会先把this赋值给target,然后调用parsePath方法,parsePath方法的作用是把虚拟dom所绑定的变量解析,举个例子

dom上双括号绑定一个变量

<div>{{a.b.c}}</div>
new Vue({
    data: {
        a: { b: { c: 1 } }
    }
});

可以看出绑定变量是a.b.c,解析成虚拟dom后,variable变量就为字符串’a.b.c’(前面说过variable参数用来存储绑定的变量是一个字符串), 之后调用this.setValue(parsePath(this.variable)(this.vue.$data));相当于

this.setValue(parsePath('a.b.c')({ a: { b: { c: 1 } } }));

parsePath方法相当于从对象{ a: { b: { c: 1 } }中取值,取什么值呢,取a.b.c的值,再看下setValue方法

setValue(val) {
     this.value = val;
}

所以这部操作相当于

this.value = a.b.c;

相当于另this.value为1.在梳理一下上述流程,把真实dom上绑定的变量a.b.c,通过解析,变成真实的a.b.c的值,将这个值赋值给value,这里有个巧妙的点,由于这个操作是赋值操作,所以同时也触发了变量a.b.c观察者的get方法,如下

get () {
    target && dep.addTarget(target);
    return val;
},

由于之前给target赋值

target = this;
值为当前a.b.c对应的虚拟dom,所以会调用dep.addTarget(target);收集到a.b.c对应的一个虚拟dom,为什么说是一个呢,因为a.b.c可能出现在多个dom上绑定着,像这样

<div>{{a.b.c}}</div>
<button>{{a.b.c}}</button>

收集完依赖后将target置为null,防止触发get又重复收集,之后调用虚拟dom下的update方法更新真实dom

现在看下Dep收集类的实现

export class Dep {
    constructor() {
        this.vdoms = [];
    }// 将vdom添加进来
    addTarget(vdom) {
        this.vdoms.push(vdom);
    }// 更新视图
    notify(newVal) {
        // 一个数据可能被多个dom绑定
        this.vdoms.forEach(vdom => {
            vdom.setValue(newVal);
            vdom.update();
        });
    }
}

可以看到target触发get的时候会去收集虚拟dom,当数据修改的时候会触发set,通知所有虚拟dom更新对应的真实dom,下面是更新真实dom的方法

update() {
    const reg = new RegExp(`{{${this.variable}}}`, 'g');
    // 更新真实dom
    this.$el.textContent = this.value;
}

v-model的实现也是同理,只不过需要判断一下v-model是在元素节点上的

if (this.isElementNode(childNode) && node.hasAttribute('v-model')) {
    this.createVdom(node, 'v-model', node.getAttribute('v-model'));
}// 判断是元素节点
isElementNode(node) {
    return node.nodeType === 1;
}

可以看到和双括号一样,只不过多取一次v-model对应的变量,而且取更容易,因为我们有getAttribute方法,多传一个变量dir用来标识,dir为’v-model’字符串,在贴一下创建虚拟dom的代码,和刚才双括号一毛一样

<input v-model="number" />
// 创建虚拟dom
createVdom(node, dir, variable) {
    const vdom = new VDom(this.vue, node, dir, variable);
    vdom.bindObserver();
    vdom.update();
    // 指令解析并绑定成事件
    vdom.bindEvent();
}

相当于

const vdom = new VDom(this.vue, $input, 'v-model', 'number');

细心的朋友会发现,这里多一个方法bindEvent,由于v-model的双向绑定是由input框中的onInput事件达到,所以在生成虚拟dom的时候需要追加一步操作,如下

bindEvent() {
    if (this.dir === 'v-model') {
        this.$el.addEventListener('input', e => {
            this.vue.$data[this.variable] = e.target.value;
        });
    }
}

在input输入的时候触发onInput事件,更新vue data中的数据,达到双向绑定,下面贴一张效果图
在这里插入图片描述

demo地址: http://139.9.192.234:5555/

源码地址: https://github.com/hhzzcc/MVVM

关注我的公众号,可以看更多优质文章哦,公众号刚建不久希望大家多多支持我一下,我也会努力更新更多好文章的 😊

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hhzzcc_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值