vue3.x 新特性

vue3.x 新特性

1.Vue3.0六大亮点

• Performance：性能比Vue 2.x快1.2~2倍
• Tree shaking support：按需编译,体积比Vue2.x更小
• Composition API: 组合API(类似React Hooks)
• Better TypeScript support：更好的 Ts 支持
• Custom Renderer API：暴露了自定义渲染API
• Fragment, Teleport(Protal), Suspense：更先进的组件

2.Vue3.0是如何变快的?

https://vue-next-template-explorer.netlify.app/

• diff算法优化:
  • Vue2中的虚拟dom是进行全量的对比
  • Vue3新增了静态标记(PatchFlag)，在与上次虚拟节点进行对比时候，只对比带有patch flag的节点，并且可以通过flag的信息得知当前节点要对比的具体内容

export const enum PatchFlags {
  TEXT = 1,// 动态文本节点
  CLASS = 1 << 1, // 2  // 动态 class
  STYLE = 1 << 2, // 4 // 动态 style
  PROPS = 1 << 3, // 8 // 动态属性，但不包含类名和样式
  FULL_PROPS = 1 << 4, // 16 // 具有动态 key 属性，当 key 改变时，需要进行完整的 diff 比较。
  HYDRATE_EVENTS = 1 << 5, // 32 // 带有监听事件的节点
  STABLE_FRAGMENT = 1 << 6, // 64 // 一个不会改变子节点顺序的 fragment
  KEYED_FRAGMENT = 1 << 7, // 128 // 带有 key 属性的 fragment 或部分子字节有 key
  UNKEYED_FRAGMENT = 1 << 8, // 256 // 子节点没有 key 的 fragment
  NEED_PATCH = 1 << 9, // 512 // 一个节点只会进行非 props 比较
  DYNAMIC_SLOTS = 1 << 10, // 1024 // 动态 slot
  HOISTED = -1, // 静态节点
  // 指示在 diff 过程应该要退出优化模式
  BAIL = -2
}

• hoistStatic 静态提升

  • Vue2中无论元素是否参与更新, 每次都会重新创建, 然后再渲染
  • Vue3中对于不参与更新的元素, 会做静态提升, 只会被创建一次, 在渲染时直接复用即可

• cacheHandlers 事件侦听器缓存

  • 默认情况下onClick会被视为动态绑定, 所以每次都会去追踪它的变化，但是因为是同一个函数，所以没有追踪变化, 直接缓存起来复用即可

vue3.x 安装和使用

方式一

<script src="https://unpkg.com/vue@next"></script>

方式二（推荐）

vite 是尤大大开发出来的一个类似 vue@cli 一个脚手架，可以快速去创建 vue3 项目

https://github.com/vitejs/vite

https://github.com/vitejs/create-vite-app

npm init vite-app [project-name项目名称可选]
cd <project-name>
npm install
npm run dev

方式三

npm install -g @vue/cli 
# OR yarn global add @vue/cli

vue create hello-vue3
# select vue 3 preset