Vue学习计划-Vue3--核心语法(二)ref、reactive和toRefs、toRef
source link: https://blog.51cto.com/Itstars/9191386
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Vue学习计划-Vue3--核心语法(二)ref、reactive和toRefs、toRef
精选 原创1. ref
和reactive
ref
创建:基本类型的响应式数据
- 作用:定义响应式变量
- 语法:
let xxx = ref(初始值)
- 返回值:一个
RefImpl
的实例对象,简称ref对象
或ref
,ref
对象的value
属性是响应式的 - 注意点:
JS
中操作数据需要xxx.value
,但模板中不需要.value
,直接使用即可- 对于
let name = ref('张三')
来说,name
不是响应式的,name.value
是响应式的
reactive
定义对象类型的响应式数据
- 作用:只能定义对象类型
- 语法:
let xxx = reactive({xxx})
- 返回值: 一个
Proxy
的实例对象,简称:响应式对象 - 注意点:
reactive
定义的响应式数据是“深层次”的
ref
定义对象类型的响应式数据
我们打开浏览器看下控制台,主要看下两个输出,reactive
定义对象类型的响应式数据和ref
定义的数据的输出:
可以看出来:ref
定义的响应式数据的value
输出其实也是Proxy
定义的对象,所以ref
虽说可以定义基本类型和对象类型,但是定义对象类型还是依赖于reactive
ref
对比reactive
- 宏观角度:
ref
用来定义:基本类型数据、对象类型数据reactive
用来定义:对象类型数据
ref
创建的变量必须使用.value
(可以使用volar
插件自动添加value,配置如下图:)reactive
重新分配一个新对象,会失去响应式(可以使用Object.assign
去整体替换)
let obj = reactive({name: '小明'})
function changeObj(){
// obj = {name: '小红'} // 这么写页面不更新
// obj = reactive({name: '小红'}) // 这么写页面不更新
Object.assign(obj, {name: '小白'})
}
- 使用原则:
- 若需要一个基本类型的响应式数据,必须使用
ref
- 若需要一个响应式对象,层级不深,
ref
、reactive
都可以 - 若需要一个响应式对象,且层级较深,推荐使用
reactive
,(form
表单数据推荐使用reactive
)
2. toRefs
和toRef
- 作用:将一个响应式对象中的每一个属性,转换为
ref
对象 - 备注:
toRefs
与toRef
功能一致,但toRefs
可以批量转换 -
假若
reactive
定义的响应式对象属性过多,解构是比较好的选择,我们不需要person.xxx
a. 但是单纯的结构,相当于let name = person.name; let age = person.age
,所以解构出来的变量不是响应式的,
b. 我们想要把解构的变量也变成响应式的,此时就需要用到toRefs
和toRef
,
c.toRefs
是将reactive
定义的响应式对象内的每一项都转换为响应式数据,toRef
是转换单个数据
d. 注意,toRefs
和roRe
f是将变量转换成ObjectRefImpl类型的数据,等同于ref
定义的响应式数据,所以修改我们需要.value
;我们在模板中就可以直接使用{{ name }}, {{ age }}
- 语法如下:
- 赞
- 收藏
- 评论
- 分享
- 举报
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK