# e-vue
**Repository Path**: ymcdhr/e-vue
## Basic Information
- **Project Name**: e-vue
- **Description**: vue2.0、vue3.0 核心原理；snabbdom虚拟dom核心原理，diff算法；vue-router的使用及原理；vuex全局状态的使用；vue ssr 同构应用/服务端渲染的基本使用；
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-16
- **Last Updated**: 2021-10-27
## Categories & Tags
**Categories**: Uncategorized
**Tags**: Vue
## README
# e-vue
#### 介绍
vue示例demo
#### 项目说明
1. xxxx
2. xxxx
3. xxxx
# vue3.0 和 vue2.0 的区别
1. 源码组织形式的变化
- 采用 TS 重写
- 使用 Monorepo 管理项目源码结构
2. Compositon API
3. 性能提升，因为使用 Proxy 的原因数据渲染、服务端渲染性能都有提升
4. Vite
#### vue3.0 不同构件版本
1. packages/vue 中查看：
2. 根据关键字区分版本：
- cjs：
- global：
- runtime：
- prod：生产版本，代码被压缩
- browser：可以通过 导入
- bundler：配合打包工具使用的版本，vue.runtimeesm-bundle.js
#### Compositon API 使用场景
1. 官方文档：https://v3.cn.vuejs.org/guide/composition-api-introduction.html#%E4%BB%80%E4%B9%88%E6%98%AF%E7%BB%84%E5%90%88%E5%BC%8F-api
2. 设计动机：
- vue3.0 新增 api，且是一组基于函数的 api
- compositon API 可以灵活的组织组件的逻辑，而 vue2.0 的 options api 由于结构的问题会导致代码量大时查看起来会比较麻烦（data、methods、声明周期函数各自组织在一个代码块里面；如果子模块函数很多的情况下结构会变得复杂）。
3. 示例 demo
```js
Document
x: {{ x }}
y: {{ y }}
```
#### Vue3.0 性能提升
1. 响应式系统的升级
- 可以监听动态新增的属性
- 可以监听删除的属性
- 可以监听数组的索引和 length 属性
2. 虚拟 DOM 编译优化
- vue2.0 中通过标记静态根节点，优化diff过程
- vue3.0 中标记和提升所有的静态节点，diff的时候只需要对比动态节点内容
- （1）Fragments（vscode 需要升级 vetur 插件，vue2.0模板中只能有唯一根节点，vue3.0可以有同级根节点）
- （2）静态提升（将静态节点的代码单独提升出来，并标记动态节点）
- （3）Patch flag（标记动态节点，在 diff 的时候跳过静态节点，只更新动态节点）
- （4）缓存事件处理函数（将事件处理函数做一个缓存，同一个事件同样的参数直接从缓存取；类似于闭包实现的那种缓存）
3. 源码体积的优化
- 移除一些不常用的 api，例如：inline-template、filter
- 很多模块都支持 tree-shaking
#### Vite 构建工具
1. Vite 工具的特点
- 关于 ES Moudle 的特性：https://gitee.com/ymcdhr/e-task/wikis?sort_id=4087755
- Vite 使用的 ES Module 模式来打包
- Vite 对比 Vue-CLI
- （1）快速冷启动：因为默认支持 ES Module，所以开发模式下不需要打包，不编译源码；
- （2）按需编译/即时编译：因为 Vite 启动了本地 Web 服务器对源文件进行转发；所以在访问到模块时才会对其进行编译，不需要像 Webpack 那样对整个项目打包；
- （3）模块热更新：当修改访问的模块源码时，立即编译该文件；而 webpack 会重新 build 并加载所有依赖，所以速度慢；
- （4）构建打包：生产环境下使用 Rollup 打包，Vue-CLI 使用 Webpack；
- 使用 webpack 打包的两个主要原因：
- （1）浏览器环境不支持模块化（ES Module）
- （2）零散的模块会产生大量的http请求
- Vite 如何解决以上两个问题：
- （1）现在的浏览器对 ES Module 支持越来越好
- （2）http2 可以复用链接
2. Vite 创建项目：
3. Vite 的核心原理（参考示例源码）
- Vite 使用 koa 实现静态 WEB 服务器，把当前运行 Vite 的目录作为服务器根目录（Vue 的代码页面、静态资源等也在 Vite 目录）；
- 启动 Vite 工具，例如访问地址为：http://localhost:3000；
- 访问 http://localhost:3000，实际上是请求了 Vue 的首页：index.html。
- 服务器将首页 js（index.html 中引入 main.js）加载的资源、模块做解析（例如 main.js 中 import 的模块），还有一些其它的操作；最后将文件发送给浏览器。
- 服务器将 App.vue 等单文件组件进行编译，然后返回给浏览器；
- css 文件类似的处理；
- 热更新原理？在client端， webSocket监听了一些更新的类型；在server端，通过watcher监听页面改动？
4. Vite 的优点的原因
- 快速冷启动 => vite 创建了一个 web 静态服务；不需要本地打包，有请求到 vite 静态服务器才会做出编译
- 按需编译 => 同上原因
- 模块热更新 => 暂时未知
# Composition API
#### 基本使用
1. 代码结构
```
Document
x: {{ x }}
y: {{ y }}
```
2. 响应式数据（参考源码）
- toRefs
- ref
3. 注意：reactive 返回的对象，结构时的属性数据不是响应式的，为什么？
-
#### 基本的api
1. Computed（参考源码）
- 用法1：
- 用法2：
2. Watch（参考源码）
- 三个参数
- 返回值：函数（用于取消监听）
3. WatchEffect（Watch 的简化版本）
# vue3.0 响应式原理
#### vue2.0 响应式数据的特点
#### vue3.0 响应式原理
总的来说，Vue3.0 使用的是类似于发布订阅模式来实现数据的响应式系统；它的数据绑定核心换成了 Proxy，然后存储依赖和更新处理函数的容器换成了 targetMap、depsMap、dep。在 getter 中将订阅添加到容器，在 setter 中发布更新的通知。
1. 数据处理：
- reactive 方法：使用 Proxy 代理对象，将对象转换成响应式数据；
- ref 方法：将值类型的数据转换成响应式对象；
- toRefs 方法：将对象的属性转换成响应式对象；
2. 添加依赖：
- Proxy 代理对象时候：getter 里面添加依赖，调用 track 方法；
- track 方法添加依赖：将目标对象以及目标对象的属性和更新之后的处理函数分别存储到 targetMap、depsMap、dep。
3. 触发更新：
- Proxy 代理对象的时候：setter 里面触发更新，调用 trigger 方法；
- trigger 方法执行更新：根据对象和属性从 targetMap、depsMap、dep 中找到对应的更新处理函数；然后执行更新处理。
#### 核心方法
1. reactive/ref/toRefs/computed
2. effect
3. track
4. trigger
#### 理解 Proxy 中的 Reflect、receiver 等
#### 理解 reactive
1. reactive 的功能
- 接受一个参数，判断参数是否是对象
- 创建拦截器对象 handler，设置get/Set/deleteProperty
- 返回 Proxy 对象
2. reactive 的实现（参考源码）
3. effect 的实现
- 注意：WeakMap 数据类型
4. ref 和 reactive 的区别？
如果数据属性比较多的时候，适合使用 reactive
5. toRefs
6. Vue3 ref、reactive、toRef、toRefs的区别
https://blog.csdn.net/u010059669/article/details/112287552