刚刚发布的3.0（1） 太过 突兀本文 主要是简单剖析一下 3.0相对2.0的优势和相关信息
一.VUE3.0的开始
1.为什么要开始学习Vue3.0?
- 因为正式版已经发版一段时间 逐渐趋于稳定
- 新年到来公司企业都会 有一些改革规划 新技术必不可少
- 当然学习也不是一蹴而就 对于新版本的 开发社区 正在逐步完善
+现在的努力只为了服务于未来 不能临时抱佛脚
2.如何学习Vue3.0?
- 不用全力以赴
+ 因为上线项目暂时还不会用
+ 因为相关生态还有待完善
- 先学习Vue2.x
+ Vue3.0并不是推倒从来, 很多2.X内容依然被保留
- 先学习TypeScript
+ Vue3.0采用TS重写, 想知其然知其所以然必须学习TS
二.VUE3.0的优势
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是如何变快的?
- 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，就不需要创建对象，然后根据对象渲染。
三.Vue3.0-快速上手的几种方式
- 创建Vue3的3种方式
+ Vue-CLI
+ Webpack
+ Vite
- 什么是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