Vue3 的ref和reactive的用法和区别示例解析

let num = ref(0) // 定义
let isShow = ref(false)  // 定义
const onChange = () => {
	num.value++  // js使用
	isShow.value = true  // js使用
}

<!-- Vue3模板引用使用 -->
<Modal v-model="isShow"></Modal>

const pageConfig = reactive({
	pageNum: 1,
	pageSize: 10
}) // 定义
const onChange = () => {
	pageConfig.pageNum = 2;
	pageConfig.pageSize = 20;
}

<!-- Vue3模板引用使用 -->
<Page :current="pageConfig.pageNum"></Page>

const str = reactive('字符串')

const tableData = ref([]) // 定义
const getTableData = async () => {
	const { data } = await getTableDataApi() // 模拟接口获取表格数据
	tableData.value = data // 修改
}

<!-- Vue3模板引用使用 -->
<Table :data="tableData"></Table>

const tableData = reactive([]) // 定义
const getTableData = async () => {
	const { data } = await getTableDataApi() // 模拟接口获取表格数据
	tableData = data // 修改，错误示例，这样赋值会使tableData失去响应式
}

<!-- Vue3模板引用使用 -->
<Table :data="tableData"></Table>

// 方法一：改为 ref 定义
const tableData = ref([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.value = data // 使用.value重新赋值
}
// 方法二：使用 push 方法
const tableData = reactive([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.push(...data) // 先使用...将data解构，再使用push方法
}
// 方法三：定义时数组外层嵌套一个对象
const tableData = reactive({ list:[] })
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.list = data // 通过访问list属性重新赋值
}