vue3的ref reactive有啥区别,vue3中的ref函数
本文主要介绍了vue3如何定义变量，以及对ref、reactive和toRefs特性的描述，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
vue3定义了ref、reactive和toRefs的变量和特性1.ref()函数2.reactive()函数3 .Torrefs()函数vue3定义变量1.const声明变量2.reactive和ref3.provide和inject
vue3定义变量及ref、reactive、toRefs特性
1.ref() 函数
函数的作用是：根据给定的值创建一个响应数据对象。基本数据类型，如字符串、数字、布尔值等。传入，返回值是一个对象，它只包含一个value属性。
ref定义的变量需要。值来更改它的值，而且没有必要编写。模板中的值。
div{{msg}}/div
Button @click=changeMsg()修改消息/button
从“vue”导入{反应、参考、参考}
setup() {
//定义
Const msg=ref (Hello )
//修改
const changeMsg=()={
Msg.value=消息已更改
}
//导出
返回{
味精，
changeMsg
}
}
2.reactive() 函数
reactive函数传入引用类型，如数组和对象，但它不能代理基本类型值，并且它返回一个响应数据对象。使用创建的响应数据也非常简单。创建后，在设置中返回并在模板中直接调用它。
div{{state.msg}}/div
Button @click=changeMsg()修改消息/button
从“vue”导入{反应、参考、参考}
setup() {
//定义
恒定状态=反应({
消息：“你好”，
msg2:“你好”
})
//修改
const changeMsg=()={
State.msg=消息已更改
}
//导出
返回{
状态，
changeMsg
}
}
3.toRefs() 函数
toRefs()函数可以把reactive()创建的响应式对象转换成普通对象，相当于把它们一个一个变成ref()。它类似于使用扩展运算符…来返回数据data。
使用toRefs和reactive()的区别在于，可以直接使用msg属性而不是state。
div{{msg}}/div
Button @click=changeMsg()修改消息/button
从“vue”导入{反应、参考、参考}
setup() {
//定义
恒定状态=反应({
消息：“你好”，
msg2:“你好”
})
//修改
const changeMsg=()={
State.msg=消息已更改
}
//导出
返回{
.toRefs(州)，
changeMsg
}
}
vue3定义变量
1.const 声明变量
属性：声明为常量，不能再修改或赋值，不能改变它的点。只能指向固定区域，不能指向其他地方。
要求：
声明后必须初始化赋值，例如：const name=aaa ，但不允许使用const name；
常量表示指向的对象不可修改，但对象中的属性可以修改。
所以类似const userName=ref(张三)
UserName.value=李四
实际上，您正在重新分配对象userName的属性。
2.reactive和ref
用于定义基本变量。
ref的定义很简单，reactive一般定义数组和对象。
有一个裁判。value属性，而reactive没有。
3.provide与inject
不需要一层一层的传递数据。
Provide可以向所有后代组件提供数据和方法来修改数据，而后代组件通过inject使用数据。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。