Vue3相比于Vue2进行了哪些更新

1、响应式原理

vue2

  vue2中采用 defineProperty 来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，结合发布订阅模式实现响应式。

存在的问题：

• 检测不到对象属性的添加和删除
• 数组API方法无法监听到
• 需要对每个属性进行遍历监听，如果嵌套对象，需要深层监听，造成性能问题

Vue3

  vue3采用proxy重写了响应式系统，proxy的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作。
  proxy可以直接监听数组的变化。

2、语法API

vue2

  Options API，即选项API。以vue为后缀的文件，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑。
  然而，当组件变得复杂，导致对应属性的列表也会增长，这可能会导致组件难以阅读和理解。

Vue3

  Composition API，即组合式API。组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合）。
  即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有 API。

3、Vue3支持多个根节点

  Vue2中，组件只能有一个根节点；
  Vue3中，组件可设置多个根节点；

4、生命周期

  Vue 3 新增了 setup() 函数，替代了 Vue 2 的 beforeCreate 和 created 钩子函数。在 setup() 函数中，我们可以直接访问组件的实例属性和方法，以及通过 next() 函数来访问父组件中的属性和方法。

5、Tree Shaking

  tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术。主要是借助ES6模块的静态编译思想，在编译时就能确定模块的依赖关系，以及输入和输出的变量。
  Vue3源码引入tree shaking特性，将全局 API 进行分块。如果您不使用某些功能，它们将不会包含在您的基础包中。

6、Diff算法优化

Vue2

  当数据发生变化，它就会新生成一个DOM树，并和之前的DOM树进行比较，找到不同的节点然后更新。但这比较的过程是全量的比较，也就是每个节点都会彼此比较。但其中很显然的是，有些节点中的内容是不会发生改变的，那我们对其进行比较就肯定消耗了时间。

Vue3

  在创建虚拟DOM树的时候，会根据DOM中的内容会不会发生变化，添加一个静态标记。那么之后在与上次虚拟节点进行对比的时候，就只会对比这些带有静态标记的节点。

7、静态提升

  Vue2中无论元素是否参与更新，每次都会重新创建，然后再渲染。
  Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用。这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用。
  例子：

<span>你好</span>
<div>{{ message }}</div>

  没有做静态提升之前

export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(_Fragment, null, [_createVNode("span", null, "你好"),_createVNode("div", null, _toDisplayString(_ctx.message), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */))
}

  做了静态提升之后

const _hoisted_1 = /*#__PURE__*/_createVNode("span", null, "你好", -1 /* HOISTED */)export function render(_ctx, _cache, $props, $setup, $data, $options) {return (_openBlock(), _createBlock(_Fragment, null, [_hoisted_1,_createVNode("div", null, _toDisplayString(_ctx.message), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */))
}// Check the console for the AST

  静态内容_hoisted_1被放置在render 函数外，每次渲染的时候只要取 _hoisted_1 即可。
  同时 _hoisted_1 被打上了 PatchFlag ，静态标记值为 -1 ，特殊标志是负整数表示永远不会用于 Diff。

8、事件监听缓存

  默认情况下绑定事件行为会被视为动态绑定，所以每次都会去追踪它的变化。但是因为是同一个函数，所以没必要去追踪它的变化。开启事件侦听器缓存后，没有了静态标记，下次diff算法的时候直接使用提升性能。

9、TypeScript

  Vue3是基于typeScript编写的，提供了更好的类型检查，能支持复杂的类型推导。

以上就是个人的一些见解，如有不足或补充，欢迎一起探讨！！！