Vue3——定义响应式数据

一、ref和reactive

ref：可定义基本类型数据和对象类型数据

reactive：只能定义对象类型数据

区别：

　　·ref创建的变量在script中使用时必须加上.value（可以使用volar插件自动添加.value，步骤：vscode设置->扩展->Vue->勾选Dot Value）

　　·reactive重新分配一个新对象，会失去响应式（可以用Object.assign去整体替换）

使用原则：

1.若需要一个基本类型的响应式数据，必须使用ref

2.若需要一个响应式对象，层级不深，ref/reactive都可以

3.若需要一个响应式对象，且层级比较深，建议使用reactive

  // ref
  // 基本类型
  let sum = ref(0); 
  // 对象类型
  let car = ref({
    brand: '奔驰',
    price: 100,
  })
  // reactive 只能声明对象类型
  let car = reactive({
    brand: '奔驰',
    price: 100,
  })

二、toRef和toRefs

作用：把响应式对象中的数据结构拿出来，且具备响应式（相当于把reactive/ref定义的对象中的每一组key/value都拿出来形成一个新的ref对象）

区别：toRefs取出对象中的所有数据，toRef一次取一个数据

let person = reactive({
  name: '张三',
  age: 18,
})

let car = ref({
  brand: '奔驰',
  price: 100,
})

let {brand, price} = toRefs(car.value);

// 用toRefs相当于把reactive/ref定义的person里面的每一组key/value都拿出来形成一个新的ref对象
let {name, age} = toRefs(person); // 现在相当于name和age都是ref响应式数据

// toRef相当于把person里面的数据一个一个取出来，也是生成ref响应式数据
let nl = toRef(person, 'age');

　　

三、其他API：shallowRef和shallowReactive（创建浅层）

shallowRef:

作用：创建一个响应式数据，但只对顶层属性进行响应式处理（针对比较大的数据，且只关注整体更改时用shallowRef效率会更高）

用法：

let myVar = shallowRef(initialValue);

特点：只跟踪引用值的变化，不关心值内部的属性变化

shallowReactive:

作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的

用法：

const myObj = shallowReactive({...})

特点：对象的顶层属性是响应式的，但嵌套对象的属性不是

总结：通过使用shallowRef()和shallowReactive()来绕开深度响应。浅层式API创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能消耗，这让属性的访问变得更快，可以提升性能。