文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3如何定义变量及ref、reactive、toRefs特性说明

2024-04-02 19:55

关注

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使用数据。 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯