Vue3——定义响应式数据

一、ref和reactive

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

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

区别：

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

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

使用原则：

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

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13

// 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一次取一个数据

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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效率会更高）

用法：

?

1	let myVar = shallowRef(initialValue);

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

shallowReactive:

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

用法：

?

1	const myObj = shallowReactive({...})

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

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