前言

• 版本换代需要我们花更多的时间适应学习，但升级是为了更好，让你的前端项目更快更好更紧跟前端时代。

vue2.0核心思想

• Vue.js是一个提供MVVM数据双向绑定的库，专注于UI层面，核心思想是：数据驱动、组件系统。

数据驱动：

• Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性。
  watcher
• watcher：每一个指令都会有一个对应的用来观测数据的对象，叫做watcher，比如v-text="msg", {{ msg }}，即为两个watcher，watcher对象中包含了待渲染的关联DOM元素。
  基于依赖收集的观测机制原理：
• 1、将原生的数据改造成 “可观察对象”，通常为，调用defineProperty改变data对象中数据为存储器属性。一个可观察对象可以被取值getter，也可以被赋值setter。
• 2 、在解析模板，也就是在watcher的求值过程中，每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者，并成为当前watcher的一个依赖。
• 3、当一个被依赖的可观察对象被赋值时，它会通知notify所有订阅自己的watcher重新求值，并触发相应的更新，即watcher对象中关联的DOM改变渲染。

组件系统：

• 应用类UI可以看作全部是由组件树构成的。
  核心选项
• 1、Template（模板）声明了数据和最终展现给用户的DOM之间的映射关系。
• 2、data（初始数据)
• 3、props(接受的外部参数)
• 4、methods（方法）
• 5、lifecycle hooks（生命周期钩子函数）
• 6、assets（私有资源）

最核心最优秀的来了

• vue2.0为何可以从ag、react中杀出来，因为vue2.0允许将模板、样式、逻辑三要素整合在同一个文件中，以.vue文件后缀形成单文件组件格式，方便项目架构和开发引用。配以完善的中文文档，这简直太友善了，符合国内大多数前端开发的使用习惯。

为何要升级呢？已经如此优秀了鸭？

• 答案是： 因为有react优秀在前，如果vue2.0不能跟上这个优秀的框架还固步自封的话，必将没落。

Vue2.0的缺点是他的敌人比他更加优秀。

• 性能比react低。（低在dom渲染上，低在watcher的监听不如react设计得高效）
• 打包文件没有react轻简。
• 对未来必然流行的TS没有react支持得好
• 等等等各方面都开始被react领跑，这就是为啥尤一要开发3.0的原因。

Vue3.0的核心思想

• 你们可以去看看B站的尤一的一手视频，免得被转换。英文不好的我给你们找好了对应翻译的帖子。
  视频地址 https://www.bilibili.com/video/av837839066/
  视频文字辅助 https://juejin.cn/post/6844904134303301645

对比vue2.0的区别

• 1、性能更比Vue 2.0强。
• 2、打包更科学不再打包没用到的模块
• 3、Composition API（组合API）
• 4、Fragment, Teleport, Suspense
• 5、更友好的支持兼容TS
• 6、Custom Renderer API（自定义渲染API）

我会挑几个讲一下，反正都是只知皮毛，各位可以自行深度学习。

Composition API

• 英文好的同学可以去瞅瞅 composition-api.vuejs.org/#summary

Fragment（碎片）

• 你不用再必须用一个template标签包起整个组件，一个文本一个标签，多个tempate都可以。

Teleport（传送门）

• 对标的是React的 Portal，有兴趣的可以去了解一下。
  https://www.jianshu.com/p/16d5cf2e48cf
• 但因为Chrome有个提案，会增加一个名为Portal的原生element，为避免命名冲突，改为Teleport
• 想知道什么是teleport的可以查看这个文章，我选出来的比较浅显易懂的。https://www.jianshu.com/p/1ecf5006b1ae

Suspense(悬念)

• 可在嵌套层级中等待嵌套的异步依赖项
• 支持async setup()
• 支持异步组件

Custom Renderer API

• 正在进行NativeScript Vue集成
• 用户可以尝试WebGL自定义渲染器，与普通Vue应用程序一起使用（Vugel）。

意味着以后可以通过 vue， Dom 编程的方式来进行 webgl 编程 。感兴趣可以看这里：Getting started vugel

Vuex Router Cli

• Vuex: 都别慌，尤一说了，Vuex的下一个版本目前还放不出来，vue3.0以目前的API为主去适配，所以暂时不会改动很大。
• Router: 适应vue3的已经出来了，后续我也得去跟进学习下，项目里已经用了，但是改版的区别没仔细分析。
• Cli 很超前的做了vue3的工作，目前项目可以直接用cli创建，非常感谢这些团队给我们这些小白减低了很大的学习难度。