共计 2897 个字符，预计需要花费 8 分钟才能阅读完成。
https://v3.cn.vuejs.org/guide…
1: Vue3 的新个性 & Compiler 原理 & 扩大？
* 性能晋升背面显著进步 1.3~2.x 倍
* mount 晋升 50%, 内存占用小 120%
* 外围代码 + Composition API: 13.5kb , 最小 11.75kb
* 所有的 Runtime: 22.5kb (Vue2: 32kb)1.1：为什么会有这么高的性能晋升？
动态的 Node 不再做更新解决，包含动态 Node 绑定的 class、id
[Vue 在 mount 的过程中 template 会编译成 AST 语法树，它会给内容动静的打上一个 patchFlag，在打包或编译的过程中会对内容进行动静和动态的剖析，依据动静的内容去做一个动静的解决]事件的监听器 Cache 缓存解决 cacheHandlers
[比方说在组件上定义自定义事件，在组件反复渲染的过程中它不会屡次实例化，对内存的优化是十分好的，这十分像是一种享元模式(机构化的一种设计模式，次要就是通过缩小创建对象的数量，以缩小内存的一个占用，进步性能)]1.2: 响应式原理？
* Proxy 代替了 Object.defineProperty()
* Proxy 对象用于定义基本操作的自定义行为(如属性查找、赋值、枚 举 函 数调用等）* 拦挡性能、提供对象的拜访、能够重写属性或者构造函数比拟 Vue2 原理：
1. 将一个一般的 javascript 对象传入 Vue 的 data 选项，Vue 将遍历此对象的所有 property，并且 Object.defineProperty 将这些属性转换为 getter/setter
2. Object.defineProperty 是 es5 无奈 shim 的一个个性, 所以 Vue 不反对 ie8 以及版本更低的浏览器
3. getter/setter 能让 Vue 实现追踪依赖，在 property 在拜访和批改的时候可能告诉变更
4. 每一个实例组件都对应一个 wacther 实例，它在组件渲染的过程中，把接触过的数据 property 记记录为依赖，之后当依赖项的 setter 触发时，会告诉 watcher, 从而使它所关联的属性从新渲染
5. 遍历
1.3: Composition API？
* setup (props, ctx) {return {} }
* props 是响应式的，不能应用 es6 进行解构，否则会丢失响应式能够借助于 const {title} = toRefs(props)
* ctx 是能够解构的, {emit, attrs, slots}比拟 Vue2
1. Vue2 对于简单的逻辑组件，在前期变得越来越难以保护，逻辑拆分为 components、props、data、computed、methods 等生命前期办法
2. Vue2 中代码复用办法，比方 Mixin、Filter 有肯定的缺点，包含命名空间的抵触、逻辑的混入、配置项繁多、代码决裂、性能差等
3. Vue2 对 Ts 反对不充沛，Vue3 曾经回升到框架层面，全局进步代码的品质
4. 有 this 的牵绊，抽离起来会很难办，不能很好的达到逻辑的复 1.4: 新增个性？
Fragment、Teleport、Suspense
suspense.vue 重点介绍
<template>
{{msg}}
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({async setup () {
// eslint-disable-next-line
const promise: Promise<string> = new Promise((resolve, reject) => {setTimeout(() => {resolve('success message')
}, 2000)
})
const msg = await promise
console.log('msg' + msg)
return {msg}
}
})
</script><template>
<Suspense>
<template #default>
<User />
</template>
<template #fallback>
loading
</template>
</Suspense>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import User from './views/suspense.vue'
export default defineComponent({
name: 'App',
components: {User}
})
</script>1.5: reactive？
* 返回 [对象] 的响应式正本(返回的响应式正本外面的数据是[深度响应式]，即递归监听对象的所有属性) & (shallowReactive 非深度响应式，响应式一级)
* reactive 包裹的对象返回是 Proxy 对象，reactive 实现原理是基于 es5 Proxy 的实现的
* reactive 传入的如果是 [非对象] 的话，则原始之不会被包装，也没有响应性的特点
*【倡议应用响应式 Proxy，防止依赖原始对象】1.6: 生态？
Vuex API 根本没变动 ….
import {createStore, createLogger} from 'vuex'
const debug= Process.env.NODE_ENV !== 'production'
export default createStore({state: {},
mutations: {
},
actions: {
},
modules: {
},
plugin: debug ? [createLogger()] : []}) 1.7: Vue3 环境搭建?
vue create project-name
1.8：生命周期具体比拟？
1.9: vite(扩大)？
npm init vite-app project-name
* 初始化的速度特地快
* 能够间接引入 ts 类型的文件
* 应用 npm run dev 会起启动一个 http server, 跳过甚至没有编译的这么一个过程(冷启动)
1.9.1: 启用 ts ?
1. 拷贝 v3 的 tsconfig.json 到 我的项目根目录 , 并设置 "isolatedModules": true
2. 拷贝 v3 的 shims-vue.d.ts 到 src 目录下
3. 批改 main.js => main.ts & html 文件的引入后缀
4. 组件外部应用 <script lang="ts>1.9.2: 启用 scss?
1. yarn add -D sass
2. <style lang="scss>1.9.3: 启用 router?
1. yarn add vue-router 1.9.4: 其余同理 …
2: 旧我的项目降级
* 小规模尝试，小我的项目尝试
* Vue2.0 如果趋于稳定，【不举荐】更新3: 我的项目 demo
https://github.com/jiankang-w…
4: 公众号（共同进步）[暂未同步]
正文完