vue3定义变量ref、reactive、toRefs特性
倘若hfl 人气:0vue3定义变量及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使用数据。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容