⚡ 30 秒速记
- 代理拦截对象操作，读取关联当前副作用
- 写入、删除与遍历依赖分别触发通知
- 代理缓存保持身份，嵌套对象继续响应化
- 原始对象与代理不是同一个引用
- 解构原始值会脱离后续属性访问
Vue 3 的响应式对象通过代理观察操作，把读过某个属性的工作与它关联起来。 受跟踪函数执行时读取会登记依赖，写入或删除再通知相关工作；集合和遍历需要另外处理，不能只写一个简单的取值与赋值拦截。代理通常会被缓存以保持身份。业务尽量沿响应式引用读写，取出一个原始值后再修改局部变量，不会自动回写源对象。
版本校准： 本文出现 Object.defineProperty、Dep、Watcher 和双端 Diff 时，主要描述 Vue 2 实现；Vue 3 使用 Proxy、effect 与新的渲染器路径。Vue 2 已于 2023-12-31 结束维护，新项目应以 Vue 3 为基线，旧项目参考 Vue 2 EOL 官方说明 制定迁移与安全策略。
# 源码结构
源码位置是在
packages文件件内，实际上源码主要分为两部分，编译器和运行时环境
1. 编译器
compiler-core核心编译逻辑compiler-dom针对浏览器平台编译逻辑compiler-sfc针对单文件组件编译逻辑compiler-ssr针对服务端渲染编译逻辑
2. 运行时环境
-
runtime-core运行时核心 -
runtime-dom运行时针对浏览器的逻辑 -
runtime-test浏览器外完成测试环境仿真
-
reactivity响应式逻辑 -
template-explorer模板浏览器 -
vue 代码入口，整合编译器和运行时
-
server-renderer服务器端渲染 -
share公用方法
# Vue 3初探
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hello vue3</title>
<script src="../dist/vue.global.js"></script>
</head>
<body>
<div id='app'><h1>{{message}}</h1></div>
<script>
Vue.createApp({
data: { message: 'Hello Vue 3!' }
}).mount('#app') </script>
</body>
</html>
# Composition API
Composition API字面意思是组合API，它是为了实现基于函数的逻辑复用机制而产生的
