All Projects → TTiip → my-mini-vue

TTiip / my-mini-vue

Licence: other
vue3的一些核心逻辑,自己实现的vue3简易版(核心逻辑)框架。

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects
HTML
75241 projects

Labels

Projects that are alternatives of or similar to my-mini-vue

v-intl
Add i18n to your awesome Vue 3 app 🔉
Stars: ✭ 13 (-75%)
Mutual labels:  vue3
vue-responsive-video-background-player
Play your own videos in background responsively in different resolutions.
Stars: ✭ 212 (+307.69%)
Mutual labels:  vue3
vue-qqmap
基于Vue3的腾讯地图地址可视化拾取、描点,路径规划插件
Stars: ✭ 21 (-59.62%)
Mutual labels:  vue3
v-code-diff
A vue code diff display plugin, support Vue2 / Vue3
Stars: ✭ 93 (+78.85%)
Mutual labels:  vue3
fearless
A dashboard scaffolding based on Vue.js 3.x & TypeScript created by Vite.
Stars: ✭ 1,156 (+2123.08%)
Mutual labels:  vue3
fluent-vue
Internationalization plugin for Vue.js
Stars: ✭ 137 (+163.46%)
Mutual labels:  vue3
g2plot-vue
g2plot for vue, both 2 and 3
Stars: ✭ 106 (+103.85%)
Mutual labels:  vue3
VueJs-Soft-UI-Dashboard
🍏 This is Soft UI Dashboard in Vue Js.
Stars: ✭ 61 (+17.31%)
Mutual labels:  vue3
vite-vue3-tailwind
Boilerplate at vue 3 whit firebase, vue notus, typesctip, vite, tailwind
Stars: ✭ 21 (-59.62%)
Mutual labels:  vue3
seal-vue
本项目为 https://github.com/hequan2017/seal 项目 前端vue版本 基于 iview-admin 2.5.0 支持 动态菜单 本项目已停止开发!因长时间未对代码进行维护,可能会造成项目在不同环境上无法部署、运行BUG等问题,请知晓!项目仅供参考!
Stars: ✭ 16 (-69.23%)
Mutual labels:  vue3
vue-composition-api-ts-todo
ToDo List with Vue 3 Composition API and TypeScript
Stars: ✭ 69 (+32.69%)
Mutual labels:  vue3
vue3-oop
使用类和依赖注入写vue组件
Stars: ✭ 90 (+73.08%)
Mutual labels:  vue3
janak
Your next vue.js package!
Stars: ✭ 26 (-50%)
Mutual labels:  vue3
vue3-element-admin
🎉 基于 vite2 + vue3 + element-plus 的后台管理系统vue3-element-admin;使用vue-cli可以切换webpack分支
Stars: ✭ 79 (+51.92%)
Mutual labels:  vue3
vue3-tutorial
Vue3.2、Vite、setup、echarts、composition API
Stars: ✭ 302 (+480.77%)
Mutual labels:  vue3
vitailse
Opinionated Vite starter template with TailwindCSS
Stars: ✭ 95 (+82.69%)
Mutual labels:  vue3
nuxt3-tailwind
nuxt3 boilerplate with tailwind and dynamic routes.
Stars: ✭ 52 (+0%)
Mutual labels:  vue3
vue-unstated
A tiny state management library for Vue Composition API.
Stars: ✭ 30 (-42.31%)
Mutual labels:  vue3
vue3-charts
Vue3-Charts is an SVG-based charting library that is very easy to use and highly customizable
Stars: ✭ 86 (+65.38%)
Mutual labels:  vue3
vue
Vue integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores
Stars: ✭ 25 (-51.92%)
Mutual labels:  vue3

mini-vue

实现最简 vue3 模型,用于深入学习 vue3
这个是配套的笔记 搭配起来食用更佳哟

Why

当我们需要深入学习 vue3 时,我们就需要看源码来学习,但是像这种工业级别的库,源码中有很多逻辑是用于处理边缘情况或者是兼容处理逻辑,是不利于我们学习的。

我们应该关注于核心逻辑,而这个库的目的就是把 vue3 源码中最核心的逻辑剥离出来,只留下核心逻辑,以供大家学习。

How

基于 vue3 的功能点,一点一点的拆分出来。

代码命名会保持和源码中的一致,方便大家通过命名去源码中查找逻辑。

Tasking

runtime-core

  • 支持组件类型
  • 支持 element 类型
  • 初始化 props
  • setup 可获取 props 和 context
  • 支持 component emit
  • 支持 proxy
  • 可以在 render 函数中获取 setup 返回的对象
  • nextTick 的实现
  • 支持 getCurrentInstance
  • 支持 provide/inject
  • 支持最基础的 slots
  • 支持 Text 类型节点
  • 支持 $el api

reactivity

目标是用自己的 reactivity 支持现有的 demo 运行

  • reactive 的实现
  • ref 的实现
  • readonly 的实现
  • computed 的实现
  • track 依赖收集
  • trigger 触发依赖
  • 支持 isReactive
  • 支持嵌套 reactive
  • 支持 toRaw
  • 支持 effect.scheduler
  • 支持 effect.stop
  • 支持 isReadonly
  • 支持 isProxy
  • 支持 shallowReadonly
  • 支持 proxyRefs

runtime-dom

  • 支持 custom renderer

build

yarn build

example

通过 server 的方式打开 example/* 下的 index.html 即可

� 推荐使用 Live Server

初始化

流程图

初始化流程图

关键函数调用图

关键函数调用图2

可以基于函数名快速搜索到源码内容

update

流程图

image

关键函数调用图

image

可以基于函数名快速搜索到源码内容

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].