vue3中reactive和refreactive reactive定义引用数据类型（以对象和数组举例），它能够将复杂数

reactive

reactive定义引用数据类型（以对象和数组举例），它能够将复杂数据类型的内部属性或者数据项声明为响应式数据，所以reactive的响应式是深层次的，其底层是通过ES6的Proxy来实现数据响应式，相对于Vue2的Object.defineProperty，具有能监听增删操作，能监听对象属性的变化等优点

使用reactive定义对象数据类型举例

const paginationConfig = reactive({
    pageNum: 1,
    pageSize: 10
}) // 定义

const onChange = () => {
    paginationConfig.pageNum = 2 // js使用
    paginationConfig.pageSize = 20 // js使用
}

若用reactive定义基本数据类型，Vue3会报警告错误

const str = reactive('我是字符串')

<!-- Vue3模板引用使用 -->
<a-pagination v-model:current="paginationConfig.pageNum"></a-pagination>

ref

使用ref定义基本数据类型时，在脚本里使用时，需要加.value后缀，然而在模板里不需要，这是因为Vue3会自动帮你加上，这就使得ref相比reactive更加简单

let num = ref(0) // 定义
let isShow = ref(false)  // 定义

const onChange = () => {
    num.value++  // js使用
    isShow.value = true  // js使用
}

<!-- Vue3模板引用使用 -->
<a-modal v-model:visible="isShow"></a-modal>