Vue3 reactive的理解

1.什么是reactive?

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

2.reactive注意点

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

错误示范

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

在这里插入图片描述

正确实例

在这里插入图片描述

arr正确实例

  • 传入数组会转成proxy对象

在这里插入图片描述

Vue3笔记 reactive函数

  • 作用:定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)
  • 语法:const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)

reactive定义的响应式数据是“深层次的”。

内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <h1>一个人的信息</h1>
  <h1>年龄:{{ p.age }}</h1>
  <h1>姓名:{{ p.name }}</h1>
  <h1>工作种类: {{ p.job.type }}</h1>
  <h1>工作薪水: {{ p.job.salary }}</h1>
  <h1>爱好: {{ hobby }}</h1>
  <h1>测试的数据: {{ p.a.b.c }}</h1>
  <button @click="changeInfo">修改人的信息</button>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import { ref, reactive } from "vue";
export default {
  name: "App",
  components: {
    HelloWorld,
  },
  setup() {
    let hobby = reactive(["抽烟", "喝酒", "打麻将"]);
    // 数据
    let p = reactive({
      name: "张三",
      age: 19,
      job: {
        type: "前端工程师",
        salary: "20k",
      },
      a: {
        b: {
          c: 666666,
        },
      },
      hobby: ["抽烟", "喝酒", "打麻将"],
    });

    // 方法
    function changeInfo() {
      console.log(p.job);
      p.name = "李四";
      p.age = 119;
      p.job.salary = "69k";
      p.job.type = "算法工程师";
      p.hobby[0] = "学习";
      hobby[0] = "学习算法";
    }
    return {
      p,
      hobby,
      changeInfo,
    };
  },
};
</script>

总结一下:

  • reactive主要是用来操作对象或数组,定义为响应式数据
  • 增删改查都可以操作。
  • 内部是通过Proxy代理的形式

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

对Vue3中reactive的深入理解的更多相关文章

  1. vue3获取当前路由地址

    本文详细讲解了vue3获取当前路由地址的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  2. 十分钟带你快速上手Vue3过渡动画

    在开发中我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,下面这篇文章主要给大家介绍了关于如何快速上手Vue3过渡动画的相关资料,需要的朋友可以参考下

  3. Vue3初探之ref、reactive以及改变数组的值

    在setup函数中,可以使用ref函数和reactive函数来创建响应式数据,下面这篇文章主要给大家介绍了关于Vue3初探之ref、reactive以及改变数组值的相关资料,需要的朋友可以参考下

  4. 用vue3封装一个符合思维且简单实用的弹出层

    最近新项目中需要一个弹窗组件,所以我就做了一个,下面这篇文章主要给大家介绍了关于如何利用vue3封装一个符合思维且简单实用的弹出层,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

  5. 使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    这篇文章主要为大家介绍了使用Vite+Vue3+Vant全家桶快速构建项目步骤详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  6. vue3中$attrs的变化与inheritAttrs的使用详解

    $attrs现在包括class和style属性。 也就是说在vue3中$listeners不存在了,vue2中$listeners是单独存在的,在vue3 $attrs包括class和style属性, vue2中 $attrs 不包含class和style属性,这篇文章主要介绍了vue3中$attrs的变化与inheritAttrs的使用 ,需要的朋友可以参考下

  7. vue3中proxy的基本用法说明

    这篇文章主要介绍了vue3中proxy的基本用法说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  8. Reactive Programming入门概念详解

    这篇文章主要为大家介绍了Reactive Programming入门概念详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  9. 如何利用vue3实现一个俄罗斯方块

    俄罗斯方块这个游戏相信大家都玩过,下面这篇文章主要给大家介绍了关于如何利用vue3实现一个俄罗斯方块的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

  10. Vue3 携手 TypeScript 搭建完整项目结构

    TypeScript 是JS的一个超级,主要提供了类型系统和对ES6的支持,使用 TypeScript 可以增加代码的可读性和可维护性,在 react 和 vue 社区中也越来越多人开始使用TypeScript,这篇文章主要介绍了Vue3 携手 TypeScript 搭建完整项目结构,需要的朋友可以参考下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部