vue3 reactive函数用法实战教程

目录
  • vue3 reactive函数用法
  • Vue3中reactive的理解
    • 1.什么是reactive?
    • 2.reactive注意点
  • 错误示范
  • 正确实例
  • arr正确实例

vue3 reactive函数用法

reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新。不同的是ref用于基本数据类型，而reactive是用于复杂数据类型，比如对象和数组
例如：定义一个对象类型的变量user

<template>
  <div>
    <p>{{ user }}</p>
    <button @click="increase">click me! one year later</button>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "reactive",
  setup() {
    const user = reactive({ name: "Alice", age: 12 });
    function increase() {
      ++user.age
    }
    return { user, increase };
  },
};
</script>

如上，当点击按钮时，让数据user.age加1，当Vue发现数据发生变化，UI会自动更新
那我们验证了，确实reactive函数可以将一个复杂数据类型变成响应式数据。我们不妨将reactive函数执行的结果打印出来看下，看看它返回值是什么
reactive将传递的对象包装成了proxy对象

我们发现，reactive执行结果是将传递的对象包装成了proxy对象
接下来我们测试一下，如果传递基本数据类型呢？

<template>
  <div>
    <p>{{ userAge }}</p>
    <button @click="increase">click me! one year later</button>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "reactive",
  setup() {
    let userAge = reactive(12);
    function increase() {
      console.log(userAge);
      ++userAge;
    }
    return { userAge, increase };
  },
};
</script>

运行发现，基本数据传递给reactive，reactive并不会将它包装成porxy对象，并且当数据变化时，界面也不会变化

需要注意的是，reactive中传递的参数必须是json对象或者数组，如果传递了其他对象（比如new Date()），在默认情况下修改对象，界面不会自动更新，如果也需要具有响应式，可以通过重新赋值的方式实现

使用ref函数可以处理基本数据，使期变成响应式数据

Vue3中reactive的理解

1.什么是reactive?

  • reactive是Vue3中提供实现响应式数据的方法.
  • 在Vue2中响应式数据是通过defineProperty来实现的.
  • 而在Vue3响应式数据是通过ES6的Proxy来实现的

2.reactive注意点

  • reactive参数必须是对象(json/arr)
  • 如果给reactive传递了其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值的方式.

错误示范

当传递的是非对象时,页面不会发生响应

正确实例

arr正确实例

传入数组会转成proxy对象

到此这篇关于vue3 reactive函数用法的文章就介绍到这了,更多相关vue3 reactive函数用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React中refs的一些常见用法汇总

    目录 什么是Refs 一.String 类型的 Refs 二.回调 Refs 三.React.createRef() 四.useRef 五.Refs 与函数组件 总结 什么是Refs Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素. Ref转发是一项将ref自动通过组件传递到子组件的技巧. 通常用来获取DOM节点或者React元素实例的工具.在React中Refs提供了一种方式,允许用户访问dom节点或者在render方法中创建的React

  • React错误的习惯用法分析详解

    目录 过多的声明state 问题 解决方法 不必要的state 问题 解决方法 过多的useEffect 问题 解决方法 请求竞争问题 问题 解决方法 使用三元表达式代替&& 使用 && 常见的错误 解决方法 传递特殊属性ref 问题 解决方法 过多的声明state 在我们React的日常开发中一些常用的写法,看似运行的很好,实际可能并不优雅.学习React并不是如何如何使用它,而是如何写出优雅,干净的代码.下面举一些例子,总结了一些React开发中不好的写法及相应更好的写

  • react中的useImperativeHandle()和forwardRef()用法

    react中的useImperativeHandle()和forwardRef()用法

    目录 一.useImperativeHandle() 二.forwardRef() 三.案例 父组件 子组件 一.useImperativeHandle() useImperativeHandle(ref, createHandle, [deps]) useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值.在大多数情况下,应当避免使用 ref 这样的命令式代码. useImperativeHandle 应当与 forwardRef 一起使用. functio

  • React-Router6版本的更新引起的路由用法变化

    目录 用法变化 替换为 嵌套路由 重定向 路由跳转 路由传参 search传参 动态路由传参 其他 总结 React Router应该是React生态系统中最受欢迎的库了,npm周下载量达600w+,github也有45.2k的加星,足以说明它是一款非常优秀的库,作为React社区重要的库,它经历了多次迭代和重大更改,就在上个月,更是迎来了一个大的正式版更新6.x,当前最新为6.0.2,相对比于之前的5.x版本做出了较大改变,不管从用法还是从性能上都有了明显的提升,本文也将用新老版本对比的方式让

  • Vue3响应式对象Reactive和Ref的用法解读

    目录 一.内容简介 二.Reactive 1. 关键源码 2. 源码流程分析 三.代理拦截操作 1. 数组操作 2.Get操作 3. Set操作 4. 其余行为拦截操作 四.Ref对象 1. 思考一个问题 2. 简要说明 3. 关键源码 四. 源码解析 五.总结 一.内容简介 本篇文章着重结合源码版本V3.2.20介绍Reactive和Ref.前置技能需要了解Proxy对象的工作机制,以下贴出的源码均在关键位置备注了详细注释. 备注:本篇幅只讲到收集依赖和触发依赖更新的时机,并未讲到如何收集依赖

  • 关于react中useCallback的用法

    目录 基础用法 父组件 子组件 useCallback是react中比较重要的一个hook useCallback 用来返回一个函数,在父子组件传参或者通用函数封装中,起到举足轻重的作用. 基础用法 useCallback的用法与useState的用法基本一致,但最后会返回一个函数,用一个变量保存起来. 返回的函数a会根据b的变化而变化,如果b始终未发生变化,a也不会重新生成,避免函数在不必要的情况下更新. 记得子组件导出时使用memo包裹一下,其作用是对组件前后两次进行浅对比,阻止不必要的更新

  • react-dnd API拖拽工具详细用法示例

    react-dnd API拖拽工具详细用法示例

    目录 前言 概念 核心API DndProvider Backend useDrag useDrag返回三个参数 useDrag传入两个参数 DragSourceMonitor对象 useDrop useDrag返回两个参数 useDrop传入一个参数 DropTargetMonitor对象 数据流转 拖拽预览 DragPreviewImage useDragLayer 其他使用场景 批量拖拽 拖拽排序 最后 前言 最近公司准备开发一个审批流系统,其中会用到拖拽工具来搭建流程,关于拖拽的实现我们

  • vue3 reactive函数用法实战教程

    目录 vue3 reactive函数用法 Vue3中reactive的理解 1.什么是reactive? 2.reactive注意点 错误示范 正确实例 arr正确实例 vue3 reactive函数用法 reactive的用法与ref的用法相似,也是将数据变成响应式数据,当数据发生变化时UI也会自动更新.不同的是ref用于基本数据类型,而reactive是用于复杂数据类型,比如对象和数组例如:定义一个对象类型的变量user <template> <div> <p>{{

  • C语言循环结构与时间函数用法实例教程

    本文实例展示了C语言循环结构与时间函数用法,对于C语言的学习来说是非常不错的参考借鉴材料.分享给大家供大家参考之用.具体如下: 完整实例代码如下: /********************************************** ** <Beginning C 4th Edition> Notes codes ** Created by Goopand ** Compiler: gcc 4.7.0 *****************************************

  • Python中zip()函数用法实例教程

    本文实例讲述了Python中zip()函数的定义及用法,相信对于Python初学者有一定的借鉴价值.详情如下: 一.定义: zip([iterable, ...]) zip()是Python的一个内建函数,它接受一系列可迭代的对象作为参数,将对象中对应的元素打包成一个个tuple(元组),然后返回由这些tuples组成的list(列表).若传入参数的长度不等,则返回list的长度和参数中长度最短的对象相同.利用*号操作符,可以将list unzip(解压). 二.用法示例: 读者看看下面的例子,

  • python中的函数用法入门教程

    本文较为详细的讲述了Python程序设计中函数的用法,对于Python程序设计的学习有不错的借鉴价值.具体分析如下: 一.函数的定义: Python中使用def关键字定义函数,函数包括函数名称和参数,不需要定义返回类型,Python能返回任何类型: #没有返回值的函数,其实返回的是None def run(name): print name,'runing' #函数体语句从下一行开始,并且第一行必须是缩进的 >>>run('xiaoming') xiaoming runing >&

  • Spring中@order注解用法实战教程

    目录 前言 一.观察@order源码 二.@order实战 三.@order失效原因 四.解决排序问题 五.排序源码分析 六.@AutoConfigureOrder 总结 前言 @order注解是spring-core包下的一个注解,@Order的作用是定义Spring IOC容器中Bean的执行顺序的优先级(这里的顺序也可以理解为存放到容器中的先后顺序).开发过程当中有时候经常会出现配置依赖关系,例如注入A对象使用了 @ConditionalOnBean(B.class),意思是要求容器当中必

  • Vue3中reactive函数toRef函数ref函数简介

    目录 reactive函数 用法: toRef函数(了解即可) 用法: ref函数 定义响应式数据 直接定义使用 获取dom 获取组件实例对象 reactive函数 reactive用于定义响应式数据(可以理解 成data的替代品) 用法: 导入 import {reactive} from 'vue' 使用: const state=reactive({ 参数名:参数值 }) 访问: state.参数名 访问: state.参数名 toRef函数(了解即可) toRef:将响应式数据中某个字段

  • Python zip()函数用法实例分析

    本文实例讲述了Python zip()函数用法.分享给大家供大家参考,具体如下: 这里介绍python中zip()函数的使用: >>> help(zip) Help on built-in function zip in module __builtin__: zip(...) zip(seq1 [, seq2 [...]]) -> [(seq1[0], seq2[0] ...), (...)] Return a list of tuples, where each tuple c

  • Python iter()函数用法实例分析

    本文实例讲述了Python iter()函数用法.分享给大家供大家参考,具体如下: python中的迭代器用起来非常灵巧,不仅可以迭代序列,也可以迭代表现出序列行为的对象,例如字典的键.一个文件的行,等等. 迭代器就是有一个next()方法的对象,而不是通过索引来计数.当使用一个循环机制需要下一个项时,调用迭代器的next()方法,迭代完后引发一个StopIteration异常. 但是迭代器只能向后移动.不能回到开始.再次迭代只能创建另一个新的迭代对象. 反序迭代工具:reversed()将返回

  • Python callable()函数用法实例分析

    本文实例讲述了Python callable()函数用法.分享给大家供大家参考,具体如下: python中的内建函数callable( ) ,可以检查一个对象是否是可调用的 . 对于函数, 方法, lambda 函数式, 类, 以及实现了 _ _call_ _ 方法的类实例, 它都返回 True. >>> help(callable) Help on built-in function callable in module __builtin__: callable(...) calla

  • 详解vue3中setUp和reactive函数的用法

    详解vue3中setUp和reactive函数的用法

    1 setUp的执行时机 我们都知道,现在vue3是可以正常去使用methods的. 但是我们却不可以在setUp中去调用methods中的方法. 为什么了??? 我们先了解一下下面这两个生命周期函数,分别是: beforeCreate 表示data 中的数据还没有初始化,是不可以使用的 Created : data已经被初始化了,可以使用 setUp在beforeCreate 和 Created 这两个函数之间. 是不是就知道为啥setUp中不可以去调用methods中的方法了. 2.setU

随机推荐