Vue3.0 And Vite

司徒元明

2023-12-01

2020…18 发布Vue3正式发布Vue3.0.0

Vue3.0 新东西

性能提升 1.3～2x，与Vue2.x 相比，mount 提升50%，内存占用小120%
核心代码+Composition API ： 13.5kb，最小11.75kb
所有Runtime：22.5kb（Vue2是32kb）
TS支持，新增：Fragment、Teleport、Suspense
按需加载(配合vite) & 组合API

Compiler 原理篇
尝试地址：https://vue-next-template-explorer.netlify.app
- 优化案例1
  - 静态Node不再作更新处理（hoistStatic -> SSR优化）
  - 静态绑定的class，id不再作更新处理
  - 结合打包标记PatchFlag，进行更新分析(动态绑定)
- 优化案例2
  - 事件监听器Cache缓存处理(cacheHandlers)
  - hoistStatic自动针对多静态节点进行优化，输出字符串
新增功能
- Fragment —— 不受根节点限制，渲染函数可接收Array
- Teleport —— 类似Portal，随用随取，e.g.弹窗，Actions
- Suspense —— 嵌套的异步依赖，e.g.async setup()

Vue3 CompositonAPI (组合API)

优点代码集中化、逻辑高复用
为什么要用Composition API

Vue2对于复杂逻辑组件，在后期变得无法维护
Vue2中代码复用方法，如：Mixin，Filters都有缺陷
Vue2对TS支持不充分

Options API（选项式API）

坏处：代码碎片化、逻辑不复用

Vue2 逻辑服用方式
- Mixin（命名空间冲突、逻辑不清晰、不易复用）
- scoped slot 作用域插槽（配置项多、代码分裂、性能差）

Compiler原理

优化1

静态Node不再做更新处理（hoistStatic -> SSR优化）
静态绑定的class、id不再做更新处理
结合打包标记PatchFlag，进行更新分析（动态绑定）
优化2
事件监听器Cache缓存处理（cacheHandlers）
hoistStatic自动针对多静态节点进行优化，输出字符串

vue3 编译

Vue3 带来的变化

性能提升 1.3～2x
TS支持，新增：Fragment、Teleprot、Suspense
- Fragment — 不受根节点限制，渲染函数可接受Array
- Teleprot — 类似Protal，随用随取。e.g. 弹窗，Actions
- Suspense ---- 嵌套的异步以来，e.g. async setup()
按需加载（配合Vite） & 组合API

补充说明-全家桶

Vuex v4.0.0-beta.11
迁移指南：https://github.com/vuejs/vuex/tree/4.0
Vue-router v4.0.0-beta.4
迁移指南：https://next.router.vuejis.org/guide/migration/#new-features
vue-loader v16.0.0-beta.7

vue3 watch & watchEffect 区别

watch 相当于vue2 的watch 监听具体的某一个变量的变化
watchEffect 监听这个函数里面相关变量的变化

组合式API+setup入口

组合式API主要是为提取可重用的代码段，提高应用的可维护性和灵活性，而setup函数是组合式API的入口

setup调用发生在组件创建之前，props解析完成之后，无法直接使用this
setup选项是一个接受props和context 的函数，setup 返回的所有内容都暴露给组件的其余部分(计算属性、方法、生命周期钩子等等)以及组件的模板
setup组册生命周期钩子，组合式API上的生命周期钩子与选项式API的名称相同，但是前缀为on：即mounted 变成 onMounted

ref、reactive、toRef、toRefs、unref 区别

ref 和 reactive 都是用来定义响应式数据的，ref更推荐定义基础数据类型，reactive 更推荐定义复杂类型
ref 定义的数据，访问是需要多一个。value

const count = ref(0)
const state = reactive({
  foo: 1,
  bar: 2
})
count.value++
state.foo++
console.log(count.value) // 1
console.log(state.foo) // 2

toRefs 与 unref 都是将响应式对象转成普通对象（解构），toRefs针对的是复杂对象，unref针对基础数据类型
roRefs解构完成对象的属性还具有响应式，对象的属性是ref，而unref解构后就不具有响应性

const count = ref(0)
const state = reactive({
  foo: 1,
  bar: 2
})
console.log(unref(count)); // 输出0
const state1 = toRefs(state);
const showFoo = state1.foo; // showFoo是ref对象
showFoo.value++
console.log(state1); //输出state对象

toRef为源响应式对象上的某个property新创建一个ref

const state = reactive({
  foo: 1,
  bar: 2
})
const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2
state.foo++
console.log(fooRef.value) // 3

详情查看官网：https://v3.cn.vuejs.org/api/refs-api.html