手撸一个Vue│js

手撸一个Vue

当前位置：点晴教程→知识管理交流 →『技术文档交流』

freeflydom

2025年8月7日 15:25 本文热度 1102

背景

vue是啥，有哪些基本功能，模板，script, style, 双向绑定一大堆，太多东西了，太难了，直接开始动手吧

仓库

https://github.com/listen80/two-way-binding

体验一下（pc上使用）

https://listen80.github.io/two-way-binding/public/

单文件

通过ajax获取类似.vue .html .tpl文件

const parser = new DOMParser();

export default (template) => {
    const doc = parser.parseFromString(`<body>${template}</body>`, 'text/html');
    const body = doc.querySelector('body')
    return {
        template: body.querySelector('template')?.content,
        script: body.querySelector('script'),
        style: body.querySelector('style'),
    }
};

构建vue实例

把script文本变成script运行
把原始data变成reactive的形式，增加依赖收集
解析template,扣出来指令，属性，方法，子组件等为了区分指令前缀使用@而不是v-
挂载style样式增加
替换当前实例挂载的元素，目前为止所有的元素（html, script, style）都已经使用上来了

  // ...上面还有
  /**
   * 创建组件，加载组件脚本、样式和模板，并进行渲染
   */
  create() {
    // 从配置选项中解构出目标元素和属性
    const { el, props = {} } = this.options
    // 从组件属性中解构出脚本、模板和样式
    const { script, template, style } = this.componentProperties
    // 1. 获取的ES6代码是模
    // 获取脚本标签中的 ES6 模块代码
    const es6ModuleCode = script.textContent;

    // 2. 将代码转为blob URL（模拟模块文件）
    // 创建一个包含 ES6 模块代码的 Blob 对象
    const blob = new Blob([es6ModuleCode], { type: 'text/javascript' });
    // 为 Blob 对象创建一个 URL
    const url = URL.createObjectURL(blob);

    // 3. 用动态import()加载该模块
    // 动态导入模块
    import(url).then(module => {
      // 将样式添加到文档中
      document.head.append(style)
      // console.log(module.default); // 输出 'ES6 Module'
      // 获取模块中的数据，若不存在则使用空对象
      const data = module.default.data || {};
      // 获取模块中的方法，若不存在则使用空对象
      const methods = module.default.methods || {};
      // 获取模块中的子组件，若不存在则使用空对象
      const components = module.default.components || {};
      // 将属性和数据合并到当前实例
      Object.assign(this, props, data);
      // 对当前实例进行数据观测
      observe(this);
      // this.data = data
      // 编译模板并渲染
      compile(template, this, methods, components);
      // 终于明白这里为什么是replace
      // 用模板替换目标元素
      el.replaceWith(template)
    }).catch(err => {
      // 捕获模块加载失败的错误并打印
      console.error('加载模块失败', err);
    });
  }

总结

就这么结束了，是不是很简单，当然其中的细节很多，上文主要是描述核心思想点
本demo是没有使用虚拟dom,是dom跟数据直接绑定的，跟进vue3.6 vapor
水平有限，本文只是为了学习分享简单的示例，目的是为了了解运作机制

转自https://www.cnblogs.com/listen80/p/19026582

该文章在 2025/8/7 15:25:02 编辑过

关键字查询

一个

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。