Vue3中的ref和shallowRef、reactive和shallowReactive

news2024/11/18 12:45:14

一：ref、reactive简介

ref和reactive是Vue3中定义响应式数据的一种方式。
ref通常用来定义基础类型数据。
reactive通常用来定义复杂类型数据。

二、shallowRef、shallowReactive简介

shallowRef和shallowReactive是Vue3中定义浅层次响应式数据的方式

三、Api使用对比

注意：监听不到变化的数据，在页面中其它数据变化被监听到时，会同步改变

	shallowRef	shallowReactive
修改浅层数据	正常监听	正常监听
修改深层数据	无法监听	无法监听
修改对象数据自身	正常监听	无法监听
修改数组对象自身	正常监听	正常监听

1、shallowRef

① 定义基础数据

let sum = shallowRef(0)

sum.value++  // 数据正常监听

② 定义对象、数组

// 1、定义对象
let personRef = shallowRef({
  name:'李四',
  age:18,
})
//    修改深层数据
personRef.value.name = '小猪佩奇'; // 监听不到
//    修改浅层数据(自身)
personRef.value = {name:'小猪佩奇',age:2}; // 数据可正常监听

// 2、定义数组
let listRef = shallowRef([1,2,3,4])
//    修改深层数据
listRef.value[0] += 2; // 监听不到
//    修改浅层数据(自身)
listRef.value = [9,99,999]; // 数据可正常监听

2、shallowReactive

①、定义对象

let personRea = shallowReactive({
  name:'张三',
  age:25,
  children:{
    name:'张XX',
    age:1
  }
})
//    修改浅层次数据
personRea.name = '张思锐'; // 可正常监听
personRea.children = {name:'张Y',age:1.5}; // 可正常监听
//    修改深层次数据
personRea.children.name = '张YY'; // 数据监听不到
//    修改数据本身
Object.assign(personRea,{
  name:'张三三',
  age:26,
  children:{
    name:'张XX',
    age:2
  }
}); // 数据监听不到

②、定义数组

let listRea = shallowReactive([
  {a:1},
  {a:2}
])
// 修改浅层次数据
listRea[0] = {a:99}; // 可正常监听
// 修改深层次数据
listRea[0].a += 2; // 监听不到
// 修改数据本身
listRea.length = 0 // 可正常监听