Vue3

1.声明式VS命令式

声明式:标签内的值的设置并不是显式的，具体如何实现是不可知的，是Vue框架内部设定的

<div>{{msg}}</div>

命令式:标签内的值的设置是显示的，可以通过document.getElementByTags('div').innerHTML=${msg}进行设置

document.getElementByTags('div').innerHTML = 'msg'

我们从可维护性和性能上进行两者的比较：

声明式具有更好的代码可维护性和编码效率，但是声明式的实现依赖于命令式，在性能上是比命令式差的。

命令式在可维护性和编码效率上要低于声明式，但在性能上优于声明式。

2.企业开发与设计原则

项目成本和开发体验是企业开发所重点关注的

项目成本：项目开发周期

良好的可维护性可以降低企业的开发周期，降低项目维护难度，从而节省了开发成本

声明式的开发体验更好

Vue封装了命令式的逻辑，暴露出了声明式的接口

3.Vue设计的三个核心概念

运行时 runtime

编译时 compiler

运行时+编译时 runtime + compiler

响应性 Reactivity

4.副作用

使用setter或getter会影响到DOM对象的修改，这就是副作用

5.Vue项目结构

rollup打包，类似webpack

项目核心在package

compiler-core 编译器的核心代码

compiler-dom 编译器中与浏览器相关的

compiler-ssr 服务端渲染的核心模块

compiler-sfc 单文件组件，.vue模块的编译模块

reactivity 响应性的核心模块

runtime-core 运行时的核心代码

runtime-dom 与浏览器相关的运行时代码

runtime-test 运行时的测试案例

server-renderer 服务端渲染器

sfc-playground 单文件组件工具

shared 公用工具

vue 项目打包后的dist文件会在这里。测试实例。src暴露入口方法。

vue-compat vue兼容性和合并代码

6.运行Vue源代码

使用pnpm安装依赖包

npm run build构建项目，会在package的vue中生成dist文件

对vue中的reactive和effect方法进行测试

在build指令中添加-s即可设置sourcemap，并生成map文件。方便后续Debugger。可以在浏览器的source中看到源码。