Vue小知识：带着好奇心尝试开发自己的JS框架（二）：首次渲染

2024-01-18 19:17:35

使用Vue的思想，开发一个自己的JS框架（二）：首次渲染

对于前端开发人员来说，掌握JS框架开发技术至关重要。Vue框架是当今最受欢迎的JS框架之一，它以其灵活性、简洁性和可维护性而著称。本文将介绍如何从头开始使用Vue的思想开发自己的JS框架，重点关注首次渲染过程。

步骤一：搭建项目环境

首先，我们需要搭建一个项目环境。我们可以使用Vue CLI脚手架工具来创建项目。具体步骤如下：

安装Vue CLI：

npm install -g @vue/cli

创建项目：

vue create my-framework

cd my-framework

步骤二：编写框架核心代码

接下来，我们需要编写框架的核心代码。这里，我们只关注首次渲染过程。

定义组件类：

class Component {
  constructor(options) {
    this.$options = options;
    this._data = this.$options.data();
    this._el = document.querySelector(this.$options.el);
    this._render();
  }

  _render() {
    this._el.innerHTML = this.$options.template;
  }
}

定义挂载方法：

Component.prototype.$mount = function() {
  this._render();
};

定义数据响应式系统：

class Observer {
  constructor(data) {
    this.data = data;
    this.walk(data);
  }

  walk(data) {
    for (const key in data) {
      if (data.hasOwnProperty(key)) {
        this.defineReactive(data, key, data[key]);
      }
    }
  }

  defineReactive(data, key, value) {
    Object.defineProperty(data, key, {
      get() {
        return value;
      },
      set(newValue) {
        value = newValue;
        this._render();
      }
    });
  }
}

定义编译器：

class Compiler {
  constructor(el, vm) {
    this.$el = el;
    this.$vm = vm;
    this.compile(el);
  }

  compile(el) {
    const childNodes = el.childNodes;
    for (let i = 0; i < childNodes.length; i++) {
      const childNode = childNodes[i];
      if (childNode.nodeType === 1) {
        this.compileElement(childNode);
      } else if (childNode.nodeType === 3) {
        this.compileText(childNode);
      }
    }
  }

  compileElement(el) {
    const attrs = el.attributes;
    for (let i = 0; i < attrs.length; i++) {
      const attr = attrs[i];
      if (attr.name.indexOf('v-') === 0) {
        this.compileDirective(el, attr.name, attr.value);
      }
    }
  }

  compileText(el) {
    const text = el.textContent;
    if (text.indexOf('{{') !== -1) {
      this.compileMustache(el, text);
    }
  }

  compileDirective(el, name, value) {
    switch (name) {
      case 'v-model':
        this.bindModel(el, value);
        break;
    }
  }

  bindModel(el, value) {
    el.value = this.$vm._data[value];
    el.addEventListener('input', (e) => {
      this.$vm._data[value] = e.target.value;
    });
  }

  compileMustache(el, text) {
    const mustache = text.match(/\{\{(.*?)\}\}/g);
    for (let i = 0; i < mustache.length; i++) {
      const mustacheKey = mustache[i].slice(2, -2);
      el.textContent = el.textContent.replace(mustache[i], this.$vm._data[mustacheKey]);
    }
  }
}

定义Vue类：

class Vue {
  constructor(options) {
    this.$options = options;
    this._data = this.$options.data();
    new Observer(this._data);
    new Compiler(this.$options.el, this);
    this.$mount();
  }

  $mount() {
    this.$el = document.querySelector(this.$options.el);
    this.$options.render(this._data);
  }
}

步骤三：测试框架

现在，我们可以测试一下我们的框架了。在main.js文件中，我们可以编写以下代码：

import Vue from './vue.js';

const vm = new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  render(data) {
    return `<div>{{ message }}</div>`;
  }
});