Vue.js 3.0的Composition API中的三个创建响应式数据的函数reactive、toRefs、ref

最新推荐文章于 2024-05-29 20:24:27 发布
最新推荐文章于 2024-05-29 20:24:27 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： Vue.js 3.0入门即放弃 文章标签： javascript 前端 vue.js ecmascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011024243/article/details/126045695
版权
本文详细介绍了Vue.js 3.0中用于创建响应式数据的三个核心函数：reactive、toRefs和ref。reactive将对象转化为响应式Proxy对象，toRefs则将响应式对象的属性转换为独立的响应式引用，以解决解构响应式对象失去响应性的问题。ref函数用于将基本类型数据转换为响应式对象。通过实例和代码演示，阐述了这三个函数的工作原理和使用场景。
摘要由CSDN通过智能技术生成

文章目录

三个创建响应式数据的函数reactive、toRefs、ref

  • reactive：把对象转换成一个响应式对象，也就是一个Proxy对象。

  • toRefs：它可以把一个代理对象中的所有属性也都转换成响应式的对象，toRefs()在处理这个对象的属性的时候，类似于ref。

  • ref： 把基本类型的数据转换成响应式对象。

先从一个问题看起， 响应式对象解构过后就不再是响应式的对象了，因为我们在创建响应式对象的时候使用reactive函数将数据封装成了Proxy对象
例如，以下的代码是不可以正常工作的：
【案例代码在线演示地址】

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document 01 for Vue 3.0 Composition API</title>
  </head>

  <body>
    <div id="app">
      x: {
   {
    x }} <br />
      y: {
   {
    y }}
    </div>
    <script type="module">
      // 当前重构抽离的函数可以放到一个模块中，将来在任何组件中都可以使用，你可以尝试使用相同的方式实现其他的逻辑
      function useMousePosition() {
   
        const position = reactive({
   
          x: 0,
          y: 0,
        });

        const update = (e) => {
   
          position.x = e.pageX;
          position.y = e.pageY;
        };

        onMounted(() => {
   
          window.addEventListener('mousemove', update);
最低0.47元/天 解锁文章
懒得跟猪打架
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue.js 3.0 API 官方手册 中文pdf版(含源码).zip
08-17
Vue 3 中引入了`ref`和`reactive`两个核心响应式API。`ref`用于创建一个响应式引用，可以直接修改其值，而`reactive`则可以将整个对象转换为响应式的。 3. **模板语法改进**： 虽然Vue 3仍然支持Vue 2的模板语法...
Vue.js 3.0从入门到实战【配套资源】.zip
06-24
- **Ref和Reactivity**：Vue 3的响应式系统基于Proxy，使用ref和reactive函数创建响应式对象，简化了数据绑定和响应式追踪。 - **Suspense**：Suspense组件用于处理异步组件加载，提供了一种优雅的方式来处理组件...
VUE3 reactive与toRefs函数
hsany330的专栏
09-06 1428
Vue3.0中还为我们提供了一个对象式响应的reactive函数 。 Reactive函数创建一个响应式对象。 一：Reactive函数 其实，在我看来，reactive函数 就是VUE3.0为我们提供的替代VUE2.0中data的一个函数，因此，在这里，我不建议将方法也写到reactive函数中。 reactive函数 中只写数据即可。 1：引入 import { ref, reactive, } from "vue"; 2：实例 我这里使用上一部分中我们测试使用的代码来...
vue3.0的reactive和toRefs
weixin_39838846的博客
03-15 550
<div id="main"> <h1>{{count}}</h1> <button @click="increase">✋🏻+1</button>  </div> <script lang="ts"> import {ref,computed,reactive,toRefs} from "vue" interface DataProps { count:number; double:number; in
Vue3使用Composition API实现响应式
最新发布
05-29 1185
Composition API是Vue.js 3中新增的一组API，用于在组件中组合逻辑和功能。它可以让你更好地组织和重用代码，使组件更易于理解和维护。在使用CompositionAPI时，你可以使用语法或setup()函数，两种方式都可以使用Composition API中的响应式API、生命周期钩子、模板引用和自定义渲染函数等特性。
vue3.0---使用ref，reactive, toRefs
weixin_38687522的博客
06-03 683
ref 单个定义 <template> <div>{{num}}</div> <div>{{name}}</div> <div>{{arr[0]}}</div> <div>{{obj}}</div> </template> <script> import { defineComponent, ref } from "vue"; export default defineComp
vue3.0 toRefs ref reactive
m0_38043319的博客
12-20 402
1、toRefs toRefs 用于将响应式对象转换为结果对象，作用其实和 toRef 类似，只不过 toRef 是一个个手动赋值，而 toRefs 是自动赋值 2、ref ref是做的一个拷贝关系，修改对象msg的值，不会影响对象obj，视图会发生变化。 ref用于为数据添加响应式状态。由于reactive只能传入对象类型的参数，而对于基本数据类型要添加响应式状态就只能用ref了，同样返回一个具有响应式状态的副本。 3、reactive reactive 用于为对象添加响应式状态。接收一个
组合API---toRefs函数、toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的
imkaifan的博客
12-09 719
组合API---toRefs函数、toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的
Vue.js 3.0 核心源码内参解析.rar
09-22
例如，你可以使用`ref`和`reactive`来创建响应式变量，`computed`用于计算属性，以及`watch`来监听变量变化。 2. **Suspense 组件**： 新增的Suspense组件允许延迟渲染子组件，这在处理异步加载或复杂组件时非常...
Vue3.0数据响应式原理详解
10-16
当响应式数据发生变化时，与之关联的`ReactiveEffect`会被调度执行，从而触发视图的更新。 4. **Dep和KeyToDepMap**: `Dep`是一个Set对象，用于存储所有依赖于某个响应式对象的`ReactiveEffect`。`KeyToDepMap`则是...
Vue.js 3.0的一些例子.zip
04-03
例如，你可以找到使用Composition API创建组件的例子，这些组件可能会演示响应式属性的声明、计算属性的重构、watcher的实现以及如何使用`ref`和`reactive`来管理状态。此外，还有可能包含关于Suspense组件的示例，...
Vue3基础：ref 和reactive的区别及toRefs函数
03-09 1075
ref: ref数据响应式监听。ref 函数传入一个值作为参数，一般传入基本数据类型，返回一个基于该值的响应式Ref对象，该对象中的值一旦被改变和访问，都会被跟踪到，就像我们改写后的示例代码一样，通过修改 count.value 的值，可以触发模板的重新渲染，显示最新的值 reactive: reactive是用来定义更加复杂的数据类型，但是定义后里面的变量取出来就不在是响应式Ref对象数据了 toRefs: 将普通数据转化为响应式数据对象 小A：多复杂的数据ref才搞不定？我试了数组的重新赋值
第五章、CompositionAPI 中的toRefs,toRef,toRaw,markRaw
weixin_42321326的博客
02-05 154
第五章、组合API中的toRefs,toRef,toRaw
vue3 ref reactive toRefs onMounted
m0_50243859的博客
11-05 731
<template> <div class="add"> <el-card class="add-container"> <el-form ref="form1" :model="form" label-width="120px"> <el-form-item required label="商品分类"> <el-select v-model="form.category" requ
vue3中toRef和toRefs函数
weixin_43613849的博客
09-14 859
1、问题1 如果把一个ref内的值赋值给变量，变量能响应式吗？ 不能 setup() { //数据 let person = reactive({ name: "张三", age: 18, job: { j1: { salary: 20, }, }, }); const name1 = person.name; console.log("%%%", na
Vue3 响应式数据
weixin_62897746的博客
12-27 4333
什么是响应式数据？ “响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。 采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
Vue.js开发基础--2
m0_74843457的博客
03-22 1524
标签中定义组件所需的数据。<script>setup() {return {数据名: 数据值,……</script>为了让代码更简洁，Vue 3提供了setup语法糖（Syntactic Sugar），使用它可以简化上述语法，提高开发效率。使用setup语法糖来定义数据的语法格式如下。const 数据名 = 数据值
vue3-ref和reactive
qq_52135740的博客
08-02 613
ref 作用: 定义一个响应式的数据 语法: const xxx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。 JS中操作数据： xxx.value 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div> 备注： 接收的数据可以是：基本类型、也可以是对象类型。 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。 对象类型的数据：内部
详解Vue3.0中 ref、reactive、toRef、toRefs 四个核心API函数作用及使用场景
izl040905的博客
02-16 1436
最近刚学习完了 Vue3.0，V3在响应式数据的声明上不再使用原来的选项式 data 进行 retuan 返回的形式，取而代之的是通过变量修饰符使用ref、reactive 进行手动声明的方式。相较于 Vue2.0 确实是更加灵活了许多，Vue3.0(以下简称V3)中进行响应式数据操作会使用ref、reactive、toRef、toRefs四个核心 API 函数，那么今天就从解析以下其各个作用及其使用场景。
vue3 main.ts引入 axios_基于 Vue3.0 Composition Api 快速构建实战项目，在vue展示数据，不要setup函数
05-21
在Vue 3.0 Composition API中，我们可以通过使用`ref`、`reactive`等响应式函数来定义数据，并且在`setup`函数中进行数据的初始化和处理。如果不使用`setup`函数，我们可以在`main.ts`中直接定义一个Vue实例，然后在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值