网站开发建设成本,搜索网址网站建站,深度网络技术,中企动力z邮箱登陆刚做了Ref和Reactive区别及使用方法笔记#xff0c;再来总结一下#xff0c;toRef 和 toRefs 的作用、用法、区别
1、作用和区别
toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref#xff0c;而且它既保留了响应式#xff0c;也保留了引用#xff0c;也就…刚做了Ref和Reactive区别及使用方法笔记再来总结一下toRef 和 toRefs 的作用、用法、区别
1、作用和区别
toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref而且它既保留了响应式也保留了引用也就是你从 reactive 复制过来的属性进行修改后除了视图会更新原有 ractive 里面对应的值也会跟着更新。
toRef: 复制 reactive 里的单个属性并转成 ref toRefs: 复制 reactive 里的所有属性并转成 ref
2、使用方式
2.1 toRef使用示例
templateh2reactive-name: {{ user.name }} /h2h2toRef-name: {{ uName }}/h2button clickonChangeName点击/button
/templatescript
import { reactive, toRef } from vue
export default {setup() {let user reactive({name: zs,age: 18})// 复制 user 里的 name 属性let uName toRef(user, name)// 更改 const onChangeName () {uName.value ls}return {user,uName,onChangeName}}
}
/script 2.2 toRefs使用示例
templateh2{{ name }} /h2h2{{ age }}/h2
/templatescript
import { reactive, toRef } from vue
export default {setup() {let user reactive({name: zs,age: 18}) return {...toRefs(user),}}
}
/script
