Vue 3 框架设计概述 #

根据前面的学习，我们已经了解了：

1. 什么是声明式
2. 什么是命令式
3. 什么是运行时
4. 什么是编译时
5. 什么是运行时 + 编译时
6. 同时也知道了 框架的设计过程本身是一个不断取舍的过程

了解了这些内容后，下面来说一下 vue3的基本框架设计：

对于 vue3 而言，核心大致可以分为三大模块：

• 响应性：reactivity
• 运行时：runtime
• 编译器：compiler

我们参考以下伪代码来尝试简单描述一下三者之间的基本关系：

<template>
	<div>{{proxyTarget.name}}</div>
</template>
<script>
	import { reactive } from 'vue'
    export default {
        setup(){
            const target = {
                name:'张三'
            }
            const proxyTarget = reactive(target)
            return {
                proxyTarget
            }
        }
    }
</script>

• 从vue中接收reactive方法，reactive方法可以接收一个target（复杂数据类型），返回一个proxyTarget（代理对象，target就是被代理对象），proxyTarget触发 set 或 get行为的时候，都会产生副作用
• 编译器会将 template的内容进行解析，解析出来的内容变成render函数
• 在运行时把render函数进行渲染，从而得出真实dom

其实还有别的模块，例如SSR，也可以去了解一下。