Vue3
Vue3作为Vue2的升级，区别还有有很大的变化的。
双向绑定
Vue2时通过object原型对象中的defineprototy方法来对属性进行监听。而Vue3则不是，而是通过Proxy。
为什么要更换definePrototy呢，因为defineProperty有三个缺点：
object.defineProperty会递归所有对象的所有属性，会影响性能object.defineProperty只能运用在对象上，不能作用在数组object.defineProperty只能监听定义时的属性，对于新增的属性不做监听
Proxy是在目标对象操作前提供了拦截，类似于请求拦截器，请求拦截器会在请求前对请求进行处理，Proxy可以对外界的操作进行过滤和改写，修改某些操作的默认行为，这样就可以不直接去操作对象本身，而是通过操作对象的代理对象来间接操作对象，来达到预期的目的。
同 object.defineProperty一样，Proxy也是通过get、set来进行操作。
Vue2中的双向绑定通过在data中定义数据，在view层中通过{
{data}}来实现
//vue2
<div>
<template>
{
{
data}}
</template>
</div>
<script>
export default {
data(){
return{
data:'vue2.0'
}
}
}
</script>
Vue3中通过引入ref来双向绑定基本数据类型，引用数据类型通过reactive来实现双向绑定。读取ref的数据需通过value来获取如item.value，而访问reactive的数据不需要通过value。
//vue3
<template>
<div>
{
{
item}}
<div>
</template>
<script lang="ts" setup>
import {
reactive, ref } from 'vue'
let item = ref('123')
let obj= reactive({
a:123})
item.value = '321' //通过value来读取ref的值
item.a = 23
</script>
下图为console.log(obj)的结果，可知通过reactive所包裹的变量，其生成的变量是由Proxy对象。
生命周期
Vue2的钩子函数有8个，其详解可看Vue2.0生命周期的详解
在Vue3中，新增了setup生命周期函数，setup执行的时间在beforeCreate之前执行，因为这个原因，其在setup
中不可以通过this来获取实例。同时对beforeDestroy改名为beforeUnmount,destroyed改名为unmounted,因此Vue3有以下生命周期函数：
- beforeCreate（建议使用setup代替）
- created（建议使用setup代替）
- setup
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeUnmount
- unmounted
以及对生命周期操作的钩子函数：
- setup() 开始创建之前，在beforeCreate和created之前执行
- onBeforeMount() 组件挂载到节点之前，即为编译模板的时候
- onMounted() 组件|模板完成挂载，此时可以对真实dom进行操作
- onBeforeUpdate() 组件更新之前执行的函数
- onUpdated() 组件更新完成后执行的函数
- onBeforeUnmount() 组件卸载前执行的函数
- onUnmounted() 组件卸载完成执行的函数
- onDeactivated() 组件被切换时执行的函数
- onErrorCaptured 捕获到子组件异常执行的函数
同时，在Vue3.2后，其新增了语法糖<script setup></script>简化了以往的组合API的必须返回return的写法。
获取DOM
在Vue2中，通过在标签定义ref属性，在js中通过this.$refs.refName来获取dom
而在Vue3中不是，在Vue3中通过在标签中定义ref属性，在ts中通过定义变量+ref来获取。
<template>
<div ref='refName'>
<div>
</template>
<script lang='TS' setup>
const refName = ref()
refName.value //通过value来获取
</script>
当然Vue3的新特性肯定不止以上这些，本人刚学习通过Vue3来开发项目，会对其进行实时更新。