1. 区别
（1）双向数据绑定原理不同，vue2利用了ES5的API Object.defineProperty()，vue3利用ES6的API Proxy
详细：vue2利用Object.defineProperty()对数据进行劫持，并且结合发布订阅模式来实现，vue3利用了Proxy对数据代理
优点：Object.defineProperty()只能监听某个属性，不能对全对象进行监听
可以省去for in，闭包等内容来提升效率（直接绑定整个对象即可）
可以监听数组，不用再去对数组进行特异性操作，vue3可以检测到数组内部数据的变化
（2）vue3支持碎片，vue2不支持
详细：vue3组件可以有多个根节点，vue2只能有一个
（3）vue3使用合成型API（Composition API），vue2使用的是选项型API（Options API）
详细：vue2的选项型API在代码里分割了不同的属性（data，computed，methods等），vue3的合成型API能让我们用方法（function）来分割，相比于vue2的使用属性来分组，vue3代码会更加简便和整洁
（4）建立数据，vue3使用setup()方法，vue2直接把数据放在data属性中
详细：vue2中数据直接放在data里，vue3中我们用setup()方法，此方法在组件初始化构造的时候触发，
vue3建立反应性数据的步骤：
1）从vue3中引入reactive
2）使用reactive()方法来声明我们的数据为响应性数据
3）使用setup方法来返回我们的响应性数据
（5）生命周期勾子
vue2，vue3生命周期勾子对比 vue2 vue3 说明 beforeCreate -> setup() 组件创建之前执行的函数 created -> setup() 组件创建完成执行的函数 beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数 mounted -> onMounted 组件挂载完成后执行的函数 beforeUpdate -> onBeforeUpdate 组件更新之前执行的函数 updated -> onUpdated 组件更新完成之后执行的函数 beforeDestroy -> onBeforeUnmount 组件卸载之前执行的函数 destroyed -> onUnmounted 组件卸载完成后执行的函数 ----------------<keep-alive>独有的两个勾子------------------- activated -> onActivated 组件被激活时执行的函数 deactivated -> onDeactivated 组件离开时执行的函数
（6）父子传参不同，setup()函数特性
详细：
1）setup()函数，接收两个参数(props, context(包含 attrs, slots, emit))
2）setup函数是处在 befortCreate和created两个勾子之前的函数，执行 setup() 时，组件尚未被创建，所以this并不是指向vue，Vue为了避免错误的使用，直接将setup函数内部的this改成了undefined
3）vue3.2之前，在setup() 函数中定义的 变量和方法最后都是需要return出去的，不然无法在模版中使用
4）使用渲染函数：返回一个渲染函数，可以直接用在同一作用域中生命的响应式状态
注意事项：
1）setup() 中不能使用this
2）setup() 中的 props 是响应式的，props更新时，因为是响应式的，所以不能用ES6去解构，因为会消除props的响应式，如果需要解构，需要使用vue 中的toRefs 来完成
3）vue3传参
import { toRefs } from 'vue'
setup(props, { arrts, slots, emit }) {
// 父传子 props，解构用 toRefs
const { title } = toRefs(props)
// 子传父 直接用setup第二个参数中包含的emit
const login = () => {
emit('login', {
username: state.username,
password: state.password
})
}
}
4）setup() 中使用响应性数据的时候，需要通过 .value 使用数据，但是setup()返回的对象上的property返回在模版中使用的时候，将自动展开内部值，不需要在模版中追加.value
import { ref, toRefs } from 'vue'
setup(props, { arrts, slots, emit }) {
const num = ref(0)
console.log(num.value)
}
5）setup() 只能同步不能异步
（7）vue3有Teleport组件，vue2没有。
详细：vue3有瞬移组件，也是一个独立组件，可以把你写的组件挂在到任何你想挂载的DOM上，所以也称为独立组件
如果以之前vue2的方式引入，他跟普通的组件是一样的，但是父组件的DOM结构和css都可能对组件产生影响，为了解决这种问题，我们要用Teleport，像是一个传送门，把组件传送到任何地方。
使用方法：
1）在根目录下的index.html文件中添加一个id节点
<div id="model"></div>
2）使用 to属性 挂在到DOM节点下面
<template to="#model"></template>
