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点缺陷：
- 组件变得庞大复杂时，代码可阅读性大大降低了;
- 代码复用有比较明显的缺陷;
- 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?
- 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
