一、Vue3简介

vue3已经成为默认版本，所以学习vue3的组合式api，已经十分必要了

  1. 1、setup  入口函数 ref,计算属性
  2. 2、reactive,toRefs
  3. 3、自定义hook
  4. 4、watch
  5. 5、生命周期
  6. 6、生命周期和http请求
  7. 7、vuex和计算属性
  8. 8、vue3.x和路由跳转
  9. 9、鼠标跟踪器

  • Vue3与vue2的区别(What)

    1. 1、Performance 性能更强
    2. 2、Composition API:组合式API
    3. 3、Fragment,Teleport,Suspense
    4. 4、Better TypeScript support:更优秀的TS支持
    5. 5、Custom Renderer API:暴露自定义渲染API

  • 为何要大版本迭代(why)

    1. 1、当中主流浏览器对新的JavaScript语言特性的普遍支持
    2. 2、Vue2.x代码库随时间推移，暴露出了设计和架构体系的问题

  • Vue3.x如何提升(How)

1、响应式系统的提升：使用Proxy提升了响应式的性能和功能。vue2.x使用Object.defineProperty是缺陷的如

  • 深度监听，需要递归到底，一次性计算量大
  • 无法监听新增属性/删除属性(需要额外配置Vue.set Vue.delete)
  • 无法原生监听数组，需要特殊处理

那么Proxy解决了这些问题
2、 编译优化：标记和提升所有静态节点,diff时只需要对比动态节点内容
3、事件缓存: 提供了事件缓存对象cacheHandlers,无需重新创建函数直接调用缓存的事件回调。
4、打包和体积优化: 按需导入，Tree Shaking支持(ES Module)
在 vue 3 中不会把所有的 api 都打包进来，只会 打包你用到的 api

  1. //vue2
  2. import Vue from 'vue'
  3. Vue.nextTick(()=>{
  4. })
  1. //vue3
  2. import Vue,{nextTick} from 'vue'
  3. nextTick(()=>{
  4. })