vue2 双向数据绑定实现

最新推荐文章于 2024-06-10 20:16:53 发布

soul g

最新推荐文章于 2024-06-10 20:16:53 发布

阅读量401

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/Y2ANGAO/article/details/126207548

版权

vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

vue2 双向数据绑定实现

1. html 文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue2双向数据绑定实现</title>
</head>

<body>
  <div id="app">
    <input type="text" v-model="name.firstName" placeholder="姓氏"><span>姓氏：{{name.firstName}}</span><br>
    <input type="text" v-model="name.lastName" placeholder="名称"><span>名称：{{name.lastName}}</span><br>
    <input type="text" v-model="phone" placeholder="手机号"><span>手机号：{{phone}}</span>
  </div>
  <!-- 自定义 vue.js 文件 -->
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        name: {
          firstName: '张',
          lastName: '三'
        },
        phone: '12312'
      }
    })
    console.log(vm);
  </script>
</body>

</html>

2. vue.js 文件

class Vue {
  constructor(obj_instance) {
    this.$data = obj_instance.data;
    this.$el = document.querySelector(obj_instance.el);
    Observer(this.$data);
    Compile(this);
  }
}

// 数据劫持 - 监听实例里的数据
function Observer(data_instance) {
  // 递归出口
  if (!data_instance || typeof data_instance !== 'object') return;
  const dependency = new Dependency();
  // 循环为每个属性进行劫持
  Object.keys(data_instance).forEach(key => {
    let value = data_instance[key];
    Observer(value); // 递归实现子属性数据劫持
    Object.defineProperty(data_instance, key, {
      // configrable 描述属性是否配置，以及可否删除
      configurable: true,
      // enumerable 描述属性是否会出现在for in 或者 Object.keys()的遍历中
      enumerable: true,
      get() {
        // 将订阅者加入依赖示例的数据
        Dependency.temp && dependency.addSub(Dependency.temp);
        return value;
      },
      set(newValue) {
        value = newValue;
        Observer(newValue);
        dependency.notify();
      }
    });
  });
}

// HTML 模板解析 - 替换 DOM 内容
function Compile(vm) {
  // 创建文档碎片
  const fragment = document.createDocumentFragment();
  let child;
  while ((child = vm.$el.firstChild)) {
    fragment.append(child);
  }
  // 替换文档碎片内容
  function fragment_compile(node) {
    const pattern = /{{\s*(\S+)\s*}}/;
    if (node.nodeType === 3) {
      const regex = pattern.exec(node.nodeValue);
      const xxx = node.nodeValue;
      if (regex) {
        const value = regex[1]
          .split('.')
          .reduce((pre, current) => pre[current], vm.$data);
        // 替换
        node.nodeValue = xxx.replace(pattern, value);
        // 创建订阅者
        new Watcher(vm, regex[1], newValue => {
          node.nodeValue = xxx.replace(pattern, newValue);
        });
      }
      return;
    }
    if (node.nodeType === 1 && node.nodeName.toLowerCase() === 'input') {
      let key = node.attributes['v-model'].nodeValue;
      const value = key
        .split('.')
        .reduce((pre, current) => pre[current], vm.$data);
      node.value = value;
      // 创建订阅者
      new Watcher(vm, key, newValue => {
        node.value = newValue;
      });
      // 为 input 节点添加 input 监听事件
      node.addEventListener('input', e => {
        const keyArr = key.split('.');
        const arr = keyArr.reduce((pre, current) => {
          if (!pre[current] || typeof pre[current] !== 'object') {
            return pre;
          }
          return pre[current];
        }, vm.$data);
        arr[keyArr[keyArr.length - 1]] = e.target.value;
      });
    }
    node.childNodes.forEach(child => fragment_compile(child));
  }
  // 开始替换
  fragment_compile(fragment);
  // 将整理好的文档碎片加入文档中
  vm.$el.appendChild(fragment);
}

// 依赖 - 收集和通知订阅者
class Dependency {
  constructor() {
    this.subscribers = [];
  }
  addSub(sub) {
    this.subscribers.push(sub);
  }
  notify() {
    this.subscribers.forEach(sub => sub.update());
  }
}

// 订阅者
class Watcher {
  constructor(vm, key, callback) {
    this.vm = vm;
    this.key = key;
    this.callback = callback;
    // 临时属性 - 触发getter
    Dependency.temp = this;
    key.split('.').reduce((pre, current) => pre[current], vm.$data);
    Dependency.temp = null;
  }
  update() {
    const value = this.key
      .split('.')
      .reduce((pre, current) => pre[current], this.vm.$data);
    this.callback(value);
  }
}