一个极简版本的vue3.0源码学习库,通过学习vue3.0核心实现逻辑,从而快速掌握vue3.0核心原理。当别人还在蹒跚学步,你已健步如飞。
写在前面,作为一个有追求的前端工程师,我们当然不满足于vue API调用工程师。需要学习vue 源码来提高自己的逼格。 走上人生巅峰,赢取白富美。然而学习vue3.0 源码又无从下手,真是愁死了。不要担心,mini-vue3.0 大大简化了vue3.0 源码实现。 我们只专注核心逻辑实现,让你轻松入门。我相信,通过mini-vue3.0学习,你再去看源码, So Easy.
mini-vue3.0 主要涵盖5个功能点:模板编译、数据响应式、组件挂载和更新、指令编译、组件异步调度更新:
Todo-list
- vue3.0 组件模板动静分离优化原理
vue 架构图
简单一点渲染过程图
复杂一点渲染过程图
在线demo地址: mini-vue3.0 在线Demo演示
html 页面代码
<!-- 模板代码, id=app 为元素挂载点 -->
<div id="app"></div>
<!-- 引入mini-vue3.0 -->
<script src="./mini-vue.js" type="text/javascript"></script>
<!-- 引入demo.js 代码 -->
<script src="./demo.js" type="text/javascript"></script>
demo.js 代码
// 子组件
const childComp = {
props: {
class: String
},
render() {
return {
type: 'div',
props: {
class: this.class,
},
children: [
{
type: 'text',
props: {
value: 'Hello Wrold'
}
}
]
}
}
}
// 启动App
const app = createApp({
template: ` <div class="parent">
<div style="text-align: center;margin-bottom: 20px">
<span v-show="propsData.show">响应式定时改变元素样式名,从而改变背景色</span>
</div>
<child-comp :class="propsData.class"></child-comp>
</div>`,
setup() {
// 响应式
const propsData = reactive({
class: 'before',
show: true
})
// 定时改变类名
setInterval(() => {
propsData.class = propsData.class === 'after' ? 'before' : 'after'
propsData.show = !propsData.show
}, 1000)
return {
propsData
}
}
})
// 注册全局组件
app.component('ChildComp', childComp)
// 挂载App,渲染App
app.mount('#app')