1. Vue3 动机 和 新特性
动机与目的:
-
更好的逻辑复用 与 代码组织 (composition组合式api)
optionsAPI(旧) => compositionAPI（新）, 效果: 代码组织更方便了, 逻辑复用更方便了 非常利于维护!!
-
更好的类型推导 (typescript支持)
vue3 源码用 ts 重写了, vue3 对 ts 的支持更友好了 (ts 可以让代码更加稳定, 类型检测! )
vue3新特性：
-
数据响应式原理重新实现 (ES6 proxy 替代了 ES5 的 Object.defineProperty)
解决了: 例如数组的更新检测等bug, 大大优化了响应式监听的性能
(原来检测对象属性的变化, 需要一个个对属性递归监听) proxy 可以直接对整个对象劫持
- 虚拟DOM - 新算法 (更快 更小)
vue2 双端算法, 先比较开头结尾) vue3编译器优化patchFlags, 标记更新(判断是文本更新还是属性更新, 样式更新)
-
提供了composition api, 可以更好的逻辑复用
-
模板可以有多个根元素, 因为引入了fragment概念, 如果发现组件是多根的, 就会创建一个fragment节点, 把多个根节点作为它的children, 将来patch的时候, 如果发现他是一个fragment节点, 则直接遍历children 创建或更新 为什么只能有一个根节点? 因为VDOM是一个单根树形结构, patch方法在遍历的时候, 会从根节点开始遍历, 他要求只有一个根节点, 组件也会转换为VDOM,
-
源码用 typescript 重写, 有更好的类型推导 (类型检测更为严格, 更稳定)
-
Teleport 传送门, 将其插槽内容渲染到 DOM 结构外层中的另一个位置。 传送组件到to的位置
-
Suspense 用于协调对组件树中嵌套的异步依赖的处理。
接受两个插槽：#default 和 #fallback。它将在内存中渲染默认插槽的同时展示后备插槽内容。
如果在渲染时遇到异步依赖项 (异步组件和具有 async setup() 的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。
等待异步组件时渲染一些额外的内容 , 让应用有更好的用户体验
2. Vite 的使用
webpack => 实时打包(服务器) => 浏览器运行
vite => 直接编译输出 => 将一部分模块化依赖加载解析的功能 交给了浏览器
Vite 是否需要先打包才能提供服务？
-
开发阶段: vite不需要像webpack一样先对代码打包完成, 再启动服务器,
-
上线阶段: webpack基于node.js的打包工具, vite借助esbuild打包的能力, 基于go语言开发, 打包速度更快
-
使用webpack能否创建vue3的项目？ webpack也能构建 vue3
3. vue-router4
vue-router4的语法和3的版本语法基本一致，但是有一些细微的修改。由于组件中无法访问this,因为无法访问this.router和this.route
4. Pinia
Pinia 的 API 设计非常接近 Vuex 5 的提案。
(1. pinia中没有mutations , 2. 没有命名空间模块, 3. 使用插件扩展 Pinia 功能: pinia plugin persistedState永久存储)
就像setup 中的props 一样，我们不能对其进行解构：为了从 Store 中提取属性同时保持其响应式，您需要使用storeToRefs()。
const { status, countdown } = defineProps<{
status?: OrderStatus countdown?: number
}>()
开启解构Props响应式转换功能，vite.config.ts
vue({
reactivityTransform: true
}),
在插件中调用 $subscribe
pinia.use(({ store }) => {
store.$subscribe(() => {
// 在存储变化的时候执行
})
store.$onAction(() => {
// 在 action 的时候执行
})
})
