数据响应式原理之手写 Vue，了解它的精髓

前端

2023-09-05 22:47:43

Vue的设计思想

Vue 是一个 MVVM 框架，它的设计思想是将数据、视图和模型分离，通过数据绑定来实现视图和数据的同步更新。

数据响应式：Vue 框架的核心是数据响应式，它通过数据劫持和发布-订阅模式来实现。当数据发生变化时，视图会自动更新。
模板引擎：Vue 提供了模板引擎，它可以将模板中的数据解析为 HTML。
渲染：Vue 将模板编译成虚拟 DOM，然后将虚拟 DOM 渲染成真实的 DOM。

实现数据响应式原理

Vue 的数据响应式原理主要通过数据劫持和发布-订阅模式实现的。

数据劫持：Vue 将数据对象中的每一个属性都劫持为一个 getter 和一个 setter，当数据属性发生变化时，setter 会触发更新。
发布-订阅模式：Vue 框架使用发布-订阅模式来管理数据变化的通知。当数据发生变化时，会发布一个事件，视图组件订阅这个事件，并在收到事件后更新视图。

手写 Vue 代码

下面我们来实现一个简易版的 Vue 框架，以便更直观地理解 Vue 的原理。

// 定义一个 Vue 类
class Vue {
  constructor(options) {
    this.$data = options.data;
    this.observe(this.$data);
    this.compile(options.el);
  }

  // 监听数据变化
  observe(data) {
    Object.keys(data).forEach(key => {
      this.defineReactive(data, key, data[key]);
    });
  }

  // 定义响应式数据
  defineReactive(data, key, val) {
    let that = this;
    Object.defineProperty(data, key, {
      get() {
        return val;
      },
      set(newVal) {
        if (val === newVal) return;
        val = newVal;
        that.compile(options.el);
      }
    });
  }

  // 编译模板
  compile(el) {
    let nodes = document.querySelectorAll(el);
    nodes.forEach(node => {
      if (node.nodeType === 1) {
        this.compileElement(node);
      } else if (node.nodeType === 3) {
        this.compileText(node);
      }
    });
  }

  // 编译元素
  compileElement(node) {
    let attrs = node.attributes;
    for (let i = 0; i < attrs.length; i++) {
      let attr = attrs[i];
      if (attr.name.indexOf('v-') === 0) {
        this.compileDirective(node, attr.name.substring(2), attr.value);
      }
    }
  }

  // 编译文本
  compileText(node) {
    let text = node.textContent;
    if (/\{\{(.*)\}\}/.test(text)) {
      this.compileTextExpression(node, RegExp.$1);
    }
  }

  // 编译文本表达式
  compileTextExpression(node, exp) {
    let that = this;
    let updater = function(val) {
      node.textContent = val;
    };
    this.bind(this.$data, exp, updater);
  }

  // 绑定数据
  bind(data, exp, updater) {
    let val = this.get(data, exp);
    updater(val);
  }

  // 获取数据
  get(data, exp) {
    let keys = exp.split('.');
    for (let i = 0; i < keys.length; i++) {
      data = data[keys[i]];
    }
    return data;
  }
}

// 创建一个 Vue 实例
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});