定义reactive函数变量响应式丢失问题

背景

在vue3中我们可以通过ref和reactive定义响应式对象，当对象的属性发生变化是就会自动更新你渲染的视图。

简单描述

• ref：主要用于简单的响应式数据(如数字、字符串、布尔值)，它将这些普通的javascript的值包装成响应式的引用类型。

对于ref创建的响应式引用在script标签内通过.value属性来访问或修改，在模板template中可以直接使用(因为自解包)。

• reactive：使用于复杂的对象或数组的响应式数据，它将普通的jvascript对象或数组转换为响应式代理对象。

对于reactive创建的对象或数组，可以直接访问或修改其属性，无需.value。

ref和reactive对比

ref	reactive
❌只支持对象和数组(引用数据类型)	✔️支持基本数据类型引用数据类型
✔️在<script>和<template>无差别使用	❌在<script>中通过.value，在<template>直接访问(自动解包)
❌重新分配一个对象会丢失响应式	✔️重新分配一个新的对象不会丢失响应式

// 定义showList响应式对象
let showList = reactive([]) // 改成let shoList = ref()即可
​
const user =async ()=>{
    const getUserList = await userList({
        url:"/user/list"
        page: currentPage.value,
        limit: pageSize.value
    })
    total.value = getUserList.data.data.totalCount
    //分页功能：不同分页请求的数据给showList重新分配一个新的数组对象,那么它就会丢失响应式
    showList = getUserList.data.data.userList
}

解决方法

使用ref函数，我们前面说过ref不仅支持基本数据类型还支持引用数据类型，而且重新分配新的对象时不会丢失响应式。