手撸一个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实例

  1. 把script文本变成script运行
  2. 把原始data变成reactive的形式，增加依赖收集
  3. 解析template,扣出来指令，属性，方法，子组件等为了区分指令前缀使用@而不是v-
  4. 挂载style样式增加
  5. 替换当前实例挂载的元素，目前为止所有的元素（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

水平有限，本文只是为了学习分享简单的示例，目的是为了了解运作机制，如果有纰漏请联系我

手撸一个Vue(看不懂可以举报)的更多相关文章

  1. 使用Java Socket手撸一个http服务器

    原文连接:使用Java Socket手撸一个http服务器 作为一个java后端,提供http服务可以说是基本技能之一了,但是你真的了解http协议么?你知道知道如何手撸一个http服务器么?tomc ...

  2. 第二篇-用Flutter手撸一个抖音国内版，看看有多炫

    前言 继上一篇使用Flutter开发的抖音国际版 后再次撸一个国内版抖音,大部分功能已完成,主要是Flutter开发APP速度很爽,  先看下图 项目主要结构介绍 这次主要的改动在api.dart 及 ...

  3. 纯手工撸一个vue框架

    前言 vue create 真的很方便,但是很多人欠缺的是手动撸一遍.有些人离开脚手架都不会开发了. Vue最简单的结构 步骤 搭建最基本的结构 打开空文件夹,通过 npm init 命令生成pack ...

  4. C#基于Mongo的官方驱动手撸一个Super简易版MongoDB-ORM框架

    C#基于Mongo的官方驱动手撸一个简易版MongoDB-ORM框架 如题,在GitHub上找了一圈想找一个MongoDB的的ORM框架,未偿所愿,就去翻了翻官网(https://docs.mongo ...

  5. 手撸一个SpringBoot-Starter

    1. 简介 通过了解SpringBoot的原理后,我们可以手撸一个spring-boot-starter来加深理解. 1.1 什么是starter spring官网解释 starters是一组方便的依 ...

  6. Golang：手撸一个支持六种级别的日志库

    Golang标准日志库提供的日志输出方法有Print.Fatal.Panic等,没有常见的Debug.Info.Error等日志级别,用起来不太顺手.这篇文章就来手撸一个自己的日志库,可以记录不同级别 ...

  7. 【手撸一个ORM】MyOrm的使用说明

    [手撸一个ORM]第一步.约定和实体描述 [手撸一个ORM]第二步.封装实体描述和实体属性描述 [手撸一个ORM]第三步.SQL语句构造器和SqlParameter封装 [手撸一个ORM]第四步.Ex ...

  8. 如何使用 js 写一个正常人看不懂的无聊代码

    如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...

  9. 通过 Netty、ZooKeeper 手撸一个 RPC 服务

    说明 项目链接 微服务框架都包括什么? 如何实现 RPC 远程调用? 开源 RPC 框架 限定语言 跨语言 RPC 框架 本地 Docker 搭建 ZooKeeper 下载镜像 启动容器 查看容器日志 ...

  10. 手撸一个springsecurity，了解一下security原理

    手撸一个springsecurity,了解一下security原理 转载自:www.javaman.cn 手撸一个springsecurity,了解一下security原理 今天手撸一个简易版本的sp ...

随机推荐

  1. JavaScript入门笔记day2

    文章目录 常用互动方法 1. document.write() 直接向页面输出内容 2. `alert();`弹出消息对话框 3. confirm消息对话框 4. prompt弹出消息对话框,用于需要 ...

  2. WindowsPE文件格式入门02.选项头其它和节表

    https://www.bpsend.net/thread-444-1-1.html 选项头 IMAGE_OPTIONAL_HEADER:以供操作系统加载PE文件使用,32位必选. 重要字段: DWO ...

  3. Qt 图片轮播

    最近研究了一下图片轮播,主要是用到了QPropertyAnimation这个类,具体代码示例如下: main.cpp #include <QApplication> #include &q ...

  4. WPF绑定与通知属性到界面

    绑定与通知属性到界面 本文同时为b站WPF课程的笔记,相关示例代码 前言 在上一篇文章C#代码事件里面,我们介绍了利用给控件命名的方式,在后端代码中访问并修改属性.这样子直截了当,但是这样后端代码依赖 ...

  5. .NET 9中的异常处理性能提升分析：为什么过去慢，未来快

    一.为什么要关注.NET异常处理的性能 随着现代云原生.高并发.分布式场景的大量普及,异常处理(Exception Handling)早已不再只是一个冷僻的代码路径.在高复杂度的微服务.网络服务.异步 ...

  6. 书籍赠送丨《Flink jm、tm启动过程和资源分配》直播预告

    5月20日晚19点,袋鼠云数栈技术研发团队开发工程师--吹雪,将会为大家直播分享<Flink jm.tm启动过程和资源分配>. 课程内容主要包括以下三点: 1.flink jm启动过程2. ...

  7. DRF之Response源码分析

    DRF之Response源码分析 [一]响应类的对象Response源码 [1]路由 from django.contrib import admin from django.urls import ...

  8. Blazor学习之旅(2)第一个Blazor应用

    本篇我们来构建第一个Blazor Web应用,这里我们选择Blazor Server类型,后面我们再学习Blazor WebAssembly类型. 话外音:有人问我西门子在用Blazor吗?是的,西门 ...

  9. Office 无法插入ActiveX控件的一个解决办法。

    微软4月中旬公告,基于安全考量,微软将默认关闭Microsoft 365及Office 2024中的ActiveX.造成"开发工具"下无法插入ActiveX控件. 想再打开Acti ...

  10. 地震储层预测笔记—AVO近似公式总结

    地震储层预测笔记-AVO近似公式总结 (一).Zeoppritz方程 AVO地球物理基础是平面弹性波在层状介质下推倒得出的Zeopprizt方程,在两层介质下(如图1所示)其Zeopprizt方程可以 ...