-
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返回的响应式对象可以进行解构、扩展运算符等操作，而不会失去响应式。
ref、reactive、toRef、toRefs使用与区别
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
