手撸一个Vue(看不懂可以举报)

技术分享 7个月前 (08-08) 0 999+

关注

手撸一个Vue

背景

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);     });   }