Vue3.0—ref函数

文章介绍了Vue3.0中的ref函数,用于创建响应式的数据引用。ref函数可以接受基本类型或对象类型的数据,通过.value属性在JavaScript中进行操作,并在模板中直接使用。同时,对象类型的响应式依赖于reactive函数。示例代码展示了如何声明和修改ref包装的数据,以及在模板中展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ref函数

- 作用: 定义一个响应式的数据

- 语法: ```const xxx = ref(initValue)```

-创建一个包含响应式数据的引用对象(reference对象,简称ref对象)

- JS中操作数据: ```xxx.value```

-模板中读取数据: 不需要.value,直接:```<div>{{xxx}}</div>```

- 备注:

-接收的数据可以是:基本类型、也可以是对象类型。

-基本类型的数据:响应式依然是靠``Object.defineProperty()``的```get```与```set```完成的。

-对象类型的数据:内部 “ 求助 ”了Vue3.0中的一个新函数—— ```reactive```函数。

<template>
  <h1>信息</h1>
  <h2>{{ name }}</h2>
  <h2>{{ age }}</h2>
  <button @click="changeInfo">修改个人信息</button>
  <h3>{{ job.type }}:{{ job.salary }}</h3>
</template>
<script>
  import{ref}from 'vue'

export default {
  name: 'App',
  setup(){
    //数据
    //不是响应式数据
    // let name='张三'
    // let age=18
    let name=ref('张三')
    let age=ref(18)
    //ref加工完的数据是一个对象,RefImpl的实例对象(reference implement)
    let job=ref({
      type:'工程师',
      salary:'30k'
    })
    function changeInfo(){
      // name='Gui',
      // age=21
      name.value='Gui',
      age.value=21,
      job.value.type='老师',
      job.value.salary='10k'
    }
    //必须有返回值
    return{
      name,
      age,
      job,
      changeInfo
    }
  }
}
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值