前言
本文是针对Vue2正在向Vue3迁移的用户准备的，本文不会完全照搬Vue3官网上的内容，而是对官网上面的内容进行归纳，总结并加以自己的理解和实现总结出来的知识，本文知识点的讲解顺序和官网是一样的，但只会针对Vue3相当于Vue2有区别的地方才会加以讲解，对于相对于Vue2没啥变化的内容会略过，但不管你看没看过官网，这篇文章都会对你有点帮助
必备知识
在了解这篇文章之前，你最好需要具备以下知识点
- 了解Vue2的常用的Api
- 基本了解ES6 --- Proxy必须了解
基础知识点
响应式基础
Vue3对比Vue2响应式不同的点就是Vue3大部分都是使用的Proxy做的响应式的处理，那我们就说下基于Proxy设计的第一个函数: reactive
reactive用于返回一个Proxy对象，这里是Vue2的data差不多，只不过Proxy能拦截到对象的删除还有数组的操作，但reactive也会有些限制
- 仅对对象类型有效，对原始类型无效
- 将对象的属性解构或赋值时，声明的对象不再具有响应式
- 仅当解构出来的对象是原始值时，因为reactive默认会做深层次的响应式，所以如果赋值或解构出来的是一个对象的话，还是具有响应式的，并和原有的对象保持连接
- 对对象的重新赋值触发不了响应式
const state = reactive({ raw: { count: 1 } })
const { raw } = state
raw.count++
console.log(state.raw.count) // 2
后来针对reactive的一些缺陷，开发了一个新的函数ref，ref定义的属性要通过ref.value的形式才能够访问到，其实本质就相当于reactive({ value: ref })这种感觉，把值用一层对象进行再包装
侦听器
为了在数据变化时执行副作用，如网络请求，数据改变等，我们一般使用watch函数，在Vue3中你可以用watch监听ref对象和reactive对象，还可以传入一个getter函数，getter函数会在内部的响应式对象改变时触发更新并执行相应的副作用，一般用来监听props的变化会多一点
但在使用watch监听ref对象时会有一个要注意的点，当ref内部是一个对象时，直接监听ref对象是不行的，必须监听ref.value
const state = ref({ count: 1 })
// 这样是监听不到count变化的，必须监听state.value
watch(state, () => {
console.log(88888888)
})
state.value.count = 4
但如果要把ref对象的value给重新赋值的话，必须要监听整个ref对象
const state = ref({ count: 1 })
// 这样是监听不到value的变化的，必须监听state
watch(state.value, () => {
console.log(88888888)
})
state.value = { count: 3 }
针对于回调的时机，比如你可能想在数据变化后对DOM做一些操作，但是因为Vue中数据是异步更新的，如果你想要获取DOM更新后的值，你要设置flush: 'post
零碎知识点
组合式函数
组合式函数是一个比较重要的知识点，它相当于是Vue2中mixin的一种更高级的方案，这部分因为涉及到较多的代码设计，建议直接看文档
v-model的变化
在组件上使用v-model传入的prop变成了modelValue，还可以采用修饰符进行额外操作
render函数
render函数一般作为渲染复杂动态模板时使用，说说比较注意的点
- render函数不能在
setup语法糖脚本中写 - 第一个参数如果是字符串默认为原生元素，也可以为组件，全局注册的组件可以使用
resolveComponent来解决 - 如果第一个参数是组件的话，那么第三个参数最好是
slot对象不然会包警告，如果没有props的话，第二个参数要为null
结语
如果你是完整看过Vue2的官方文档的，那么本文中列举的知识点能够适用于大部分的Vue3的使用场景了，但还是建议大家看一下Vue3的官网，像本文中没有介绍到的watchEffect，createApp，unRef等Api，和一些设计的原理官网都有介绍
