加入CODE CHINA

· 不限速    · 不限空间    · 不限人数    · 私仓免费

免费加入
    README.md

    EN / CN

    mini-vue

    Implement the simplest vue3 model for in-depth study of vue3 source code

    Usage

    Bilibili Provides a video explaining how to use it

    Can follow my Bilibili,Interpretation of live source code from time to time

    Discuss

    You can join the group to discuss the vue3 source code

    image.png

    with WeChat

    Service

    Provide one-to-one video teaching services, and take you to see the mini-vue source code hand in hand

    Can add group communication

    Why

    When we need to learn vue3 in depth, we need to look at the source code to learn, but like this kind of industrial-level library, there are a lot of logic in the source code for processing edge cases or compatible processing logic, which is not conducive to our learning.

    We should focus on the core logic, and the purpose of this library is to separate the core logic from the vue3 source code, leaving only the core logic for everyone to learn.

    How

    Based on the function points of vue3, split it out bit by bit

    The code naming will remain consistent with the source code, so that you can find logic in the source code through naming.

    Tasking

    • support component type
    • support element type
    • init props of component
    • context can get props and context in setup
    • support component emit
    • support proxy
    • can get the object returned by setup in the render function
    • Implementation of nextTick
    • support getCurrentInstance
    • support provide/inject
    • support basic slots
    • support text type

    roadmap

    • support english
    • normalize console.log

    build

    yarn build

    example

    Open index.html under example/* use server

    Recommended Use Live Server

    Initialization

    flow chart

    初始化流程图

    Key function call graph

    关键函数调用图1

    关键函数调用图2

    The source code content can be quickly searched based on the function name

    update

    flow chart

    update流程图

    Key function call graph

    update关键函数调用图

    The source code content can be quickly searched based on the function name

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/cuixiaorui/mini-vue

    发行版本

    当前项目没有发行版本

    贡献者 4

    春去春又来 @春去春又来
    W wuyangfan @wuyangfan
    D dependabot[bot] @dependabot[bot]

    开发语言

    • TypeScript 66.2 %
    • JavaScript 24.4 %
    • HTML 9.4 %