Vue3.0 And Vite

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

defineExpose()

在setup 语法糖通过ref 执行子组件的方法时

用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>