VUE3.0

Vue3.0六大亮点

• Performance：性能比Vue 2.x快1.2~2倍(重写虚拟DOM，优化了模板编译)

• Tree shaking support：按需编译,体积比Vue2.x更小(Vue2大量API挂载到Vue原型上，难以实现TreeShaking)

• Composition API: 组合API(类似React Hooks)
  vue2.0有3点缺陷：

1. 组件变得庞大复杂时，代码可阅读性大大降低了;
2. 代码复用有比较明显的缺陷;
3. TS的支持不是很友好;

• Better TypeScript support：更好的 Ts 支持(Vue2所有属性放在了this对象上，难以推导组件的数据类型)

• Custom Renderer API：暴露了自定义渲染API

• Fragment, Teleport(Protal), Suspense：更先进的组件

Vue3.0是如何变快的?

• diff算法优化: https://vue-next-template-explorer.netlify.app/

  • Vue2中的虚拟dom是进行全量的对比

  • Vue3新增了静态标记(PatchFlag),

    在与上次虚拟节点进行对比时候，只对比带有patch flag的节点

    并且可以通过flag的信息得知当前节点要对比的具体内容

• hoistStatic 静态提升

  • Vue2中无论元素是否参与更新, 每次都会重新创建, 然后再渲染

  • Vue3中对于不参与更新的元素, 会做静态提升, 只会被创建一次, 在渲染时直接复用即可

• cacheHandlers 事件侦听器缓存

  • 默认情况下onClick会被视为动态绑定, 所以每次都会去追踪它的变化

    但是因为是同一个函数，所以没有追踪变化, 直接缓存起来复用即可

• ssr渲染

  • 当有大量静态的内容时候，这些内容会被当做纯字符串推进一个buffer里面，

    即使存在动态的绑定，会通过模板插值嵌入进去。这样会比通过虚拟dmo来渲染的快上很多很多。

  • 当静态内容大到一定量级时候，会用_createStaticVNode方法在客户端去生成一个static node，

    这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。

1.Vue3.0-快速上手

• 创建Vue3的3种方式

  • Vue-CLI

  • Webpack

  • Vite

2.什么是Vite?

1. • Vite是Vue作者开发的一款意图取代webpack的工具

• 其实现原理是利用ES6的import会发送请求去加载文件的特性,

  拦截这些请求, 做一些预编译, 省去webpack冗长的打包时间

• 安装Vite

  npm install -g create-vite-app

• 利用Vite创建Vue3项目

  create-vite-app projectName

• 安装依赖运行项目

  cd projectName

  npm install

  npm run dev

2.Vue3.0兼容Vue2.x

3.Vue3.0-Custom Renderer API

- Webpack

git clone https://github.com/vuejs/vue-next-webpack-preview.git projectName

cd projectName

npm install

npm run dev

• Vue-CLI

npm install -g @vue/cli

vue create projectName

cd projectName

vue add vue-next

npm run serve