ref、reactive、toRef、toRefs使用与区别
2022-03-24 本文已影响0人
陈大事_code
-
reactive
- 只能传入对象
- 传参：
reactive(arg)- arg为普通对象
- 返回响应式对象，不管层级多深，都能响应
- 解构、扩展运算符会失去响应式（$1）
-
ref
- 可以传入任意类型（基本类型、引用类型）
- 传参：
ref(arg)- arg为任意类型，推荐基本类型使用
-
toRef
-
针对reactive中$1的问题，创建了toRef
-
传参：
toRef(arg1, arg2)- 参数1：arg1 - reactive响应式对象
- 参数2：arg2 - 该响应对象中的某个属性。
-
可以针对reactive创建的响应式对象中的某个属性创建一个ref，且两个之间保持引用关系。
也就是说用一个对象的某个属性，可以通过两个方式来改变，结果是一致的，都反应到了该响应式对象上来。
例：
// 响应式对象 const state = reactive({ name: 'cc', age: 18 }) // 通过toRef创建一个Ref响应式 const nameRef = toRef(state, 'name') // 此时有两种方式来改变state中的name属性，且都具有响应式 // 方式一 state.name = 20 // state = {name: 'cc', name: 20} // 方式二 nameRef.value = 30 // state = {name: 'cc', name: 30}
-
-
toRefs
- 从名字上可以看出跟toRef是相似的，其实确实也是相似的
- 区别
- toRef是将reactive中的某个属性转为ref
- toRefs是一次性将reactive中的所有属性都转为ref
- 传参：
toRefs(arg1)- 只接受一个参数，为reactive响应式对象
- 对于reactive中存在的$1问题，toRefs返回的响应式对象可以进行解构、扩展运算符等操作，而不会失去响应式。
