vue2和vue3的区别

1.双向数据绑定原理发生了变化

vue2双向数据绑定是利用ES5的Object.defineProperty()对数据进行劫持,结合发布订阅模式来实现

vue3中使用ES6的ProxyAPI对数据代理

2.根节点

vue2只有一个根节点

vue3可以有多个根节点

3.vue3.0允许一个组件有多个根节点

vue3.0  AST 对象根节点其实是一个虚拟节点，它并不会映射到一个具体节点，另外它还包含了其他的一些属性，这些属性在后续的 AST 转换的过程中会赋值，并在生成代码阶段用到。

那么，为什么要设计一个虚拟节点呢？

因为 Vue.js 3.0 和 Vue.js 2.x 有一个很大的不同——Vue.js 3.0 支持了 Fragment 的语法，即组件可以有多个根节点，比如：

<img src="./logo.jpg">

<hello :msg="msg"></hello>这种写法在 Vue.js 2.x 中会报错，提示模板只能有一个根节点，而 Vue.js 3.0 允许了这种写法。但是对于一棵树而言，必须有一个根节点，所以虚拟节点在这种场景下就非常有用了，它可以作为 AST 的根节点，然后其 children 包含了 img 和 hello 的节点。

4.API

vue2使用选项类型API(Options API): 用属性来分割组件 vue3使用组合型API(Composition API): 用方法来分割组件

5.生命钩子变化

vue3中的created和beforeCreated在vue3中用setup（）这个钩子函数代替，剩下的6个钩子函数在前面加上on这个单词