手撸一个Vue
背景
vue是啥，有哪些基本功能，模板，script, style, 双向绑定一大堆，太多东西了，太难了，直接开始动手吧
仓库
https://github.com/listen80/two-way-binding
体验一下（pc上使用）
https://listen80.github.io/two-way-binding/public/
单文件
通过ajax获取类似.vue .html .tpl文件
js
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）都已经使用上来了
js
// ...上面还有
/**
* 创建组件，加载组件脚本、样式和模板，并进行渲染
*/
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
水平有限，本文只是为了学习分享简单的示例，目的是为了了解运作机制，如果有纰漏请联系我