对于熟悉vue2的小伙伴来说，如何在vue2的基础上快速全面地理解和掌握vue3呢？

Q: 相对于vue2来说，vue3做了哪些改变?

分为两个层面来说，一个是实现层面，一个是运用层面。

实现层面

1. 响应式原理的实现方式

使用 proxy 代替 defineProperty（proxy不兼容IE）

vue2的缺陷：
1 defineProperty无法监听数组方法变化，但是vue2对数组的八个方法做了hack
2 defineProperty可以监控数组下标变化，只是考虑到性能的问题，vue2放弃了这个特性，所以 arr[1] = 3 在vue2并不会触发数据更新
3 defineProperty无法监听数组长度变化
4 defineProperty无法检测到对象属性的新增或删除，vue2使用this.$set/this.$delete来解决

2. Diff算法的提升

  • 将一个模板分成由结构指令分隔的嵌套“块”，当我们更新块中的节点时，我们不再需要递归遍历DOM树 - 该块内的动态绑定可以在一个平面数组中跟踪。
  • 检测模板中的静态节点、子树甚至数据对象，在生成的代码中将它们提升到渲染函数之外。
  • 为每个具有动态绑定的元素生成一个优化标志，运行时将获取这些标志提示并采用专用的快速路径。

3. 更好的Tree-shaking

一些全局API改为按需引入

4. 更好的Typescript支持

1 vue3是用TypeScript编写的库，可以享受到自动的类型定义提示
2 支持TSX

运用层面

1. Composition API

混入(mixin) 将不再作为推荐使用，Composition API可以实现更灵活且无副作用的复用代码。

  • setup()
  • reactive、ref 与 toRefs
  • 生命周期
  • watch 与 watchEffect
    …

2. Fragment

template中允许写多个根节点。

3. Teleport

可以将组件渲染的内容传送到任何指定的地方。

4. Suspense

异步请求组件。

参考：
https://juejin.cn/post/6940454764421316644
https://juejin.cn/post/6844904134303301645
https://juejin.cn/post/6976400439793172487
https://v3.vuejs.org/guide/composition-api-introduction.html#standalone-computed-properties