深入学习vue3.0核心实现原理

写在前面，作为一个有追求的前端工程师，我们当然不满足于vue API调用工程师。所以我们需要学习的vue 源码，来提高自己的逼格， 从而走上人生巅峰，赢取白富美。但是学习vue3.0 相关源码又无从下手，真是愁死了。不要担心，mini-vue3.0 大大简化了vue3.0 源码实现。 我们只需专注核心逻辑实现，让你轻松入门。我相信，通过阅读mini-vue3.0（有相关文章分别介绍各个部分，代码也有详细的注释，包看懂）😏 你再去看源码, So Easy（捂脸!）。

源码仓库地址 mini-vue3.0.

mini-vue3.0

一个极简版本的vue3.0源码学习库，通过学习vue3.0核心实现逻辑，从而快速掌握vue3.0核心原理。当别人还在蹒跚学步，你已健步如飞.

mini-vue3.0主要涵盖5个功能点：模板编译、数据响应式、组件挂载和更新、指令编译、组件异步调度更新：

1. 模板编译原理
2. 数据响应式原理
3. 组件更新原理
4. 指令编译及执行
5. 组件调度更新

Todo-list

• vue3.0 组件模板动静分离优化原理

vue 架构图

简单一点渲染过程图

复杂一点渲染过程图

Demo

在线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')