vue3如何定义变量及ref、reactive、toRefs特性说明
更新时间：2022年06月28日 15:14:54 作者：倘若hfl
这篇文章主要介绍了vue3如何定义变量及ref、reactive、toRefs特性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue3定义变量及ref、reactive、toRefs特性
1.ref() 函数
ref() 函数用来根据给定的值创建一个响应式的数据对象，传入的为基本数据类型，例如字符串、数字、boolean 等,返回值是一个对象，这个对象上只包含一个 value 属性
ref定义的变量，改变值要.value,而且在template中不用写.value
<div>{{msg}}</div>
<button @click="changeMsg()">修改msg</button>
import {reactive,ref,toRefs} from 'vue'
setup() {
//定义
const msg = ref('你好')
//修改
const changeMsg =()=>{
msg.value ='msg被改了'
}
//导出
return {
msg,
changeMsg
}
}2.reactive() 函数
reactive函数传入的为引用类型，例如数组、对象等，但不能代理基本类型值,返回一个响应式的数据对象, 想要使用创建的响应式数据也很简单，创建出来之后，在setup中return出去，直接在template中调用即可。
<div>{{state.msg}}</div>
<button @click="changeMsg()">修改msg</button>
import { reactive, ref, toRefs } from 'vue'
setup() {
//定义
const state = reactive({
msg: '你好',
msg2:'hello'
})
//修改
const changeMsg = () => {
state.msg = 'msg被改了'
}
//导出
return {
state,
changeMsg
}
}3.toRefs() 函数
toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，相当于变成一个个的ref(),类似使用拓展用算符…的方法返回数据data
使用toRefs和reactive()区别在于可以直接使用msg属性,不用state.
<div>{{msg}}</div>
<button @click="changeMsg()">修改msg</button>
import { reactive, ref, toRefs } from 'vue'
setup() {
//定义
const state = reactive({
msg: '你好',
msg2:'hello'
})
//修改
const changeMsg = () => {
state.msg = 'msg被改了'
}
//导出
return {
...toRefs(state),
changeMsg
}
}
vue3定义变量
1.const 声明变量
特性：声明为一个常量，不能被修改，不可以再次赋值，它的指向是不可以改变的，只能指向某处固定区域，不能再指向其它地方
要求：
① 声明后必须初始化赋值，如：const name='aaa'，不可以 const name;
② 常量的含义是指向的对象不能修改，但是可以修改对象中的属性
所以类似const userName = ref('张三')
userName.value = '李四'
实际上是在给对象userName的属性重新赋值
2.reactive和ref
都是用作定义基本变量的
ref 定义简单的，reactive一般定义数组和对象
ref 有.value属性，reactive没有
3.provide与inject
不用再一层一层的传递数据
provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了讲解vue-router之什么是动态路由，详细的介绍了什么是动态路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要为大家介绍了DataV 全屏容器组件源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了vue+element项目中过滤输入框特殊字符小结，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了vue如何通过src引用assets中的图片，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
vue2 提供了一些生命周期事件的方式,在组件销毁后触发一个事件,父组件可监听到该事件,然后执行某些操作,这篇文章主要介绍了vue 中监听生命周期事件的操作方式,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了Vue-CLI与Vuex使用方法,结合实例形式分析了Vue-CLI创建项目与Vuex相关概念、使用方法及操作注意事项,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了vue如何通过$router.push传参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
下面小编就为大家分享一篇vue-prop父组件向子组件进行传值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
本文主要介绍了el-tree loadNode懒加载的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要为大家详细介绍了vue实现表单数据的增删改功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论