vue3 reactive函数用法实战教程

更新时间：2022年11月11日 11:43:32 作者：wuxing164

reactive是Vue3中提供实现响应式数据的方法，reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新，这篇文章主要介绍了vue3 reactive函数用法,需要的朋友可以参考下

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函数用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue.js实现日历插件使用方法详解
这篇文章主要为大家详细介绍了vue.js模拟日历插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
VUE开发分布式医疗挂号系统的医院设置页面步骤
这篇文章主要为大家介绍了VUE开发分布式医疗挂号系统的医院设置页面步骤，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
第一次在Vue中完整使用AJAX请求和axios.js的实战记录
AJAX是现代Web开发的一个关键部分,尽管它一开始看起来令人生畏,但在你的武库中拥有它是必须的,下面这篇文章主要给大家介绍了关于第一次在Vue中完整使用AJAX请求和axios.js的相关资料,需要的朋友可以参考下
2022-11-11
Vue3使用ref解决GetElementById为空的问题
今天遇到一个问题,就是在Vue3组件中需要获取template中的元素节点,使用GetElementById返回的却是null,网上查找了好些资料,才发需要使用ref,所以本文给大家介绍了Vue3组件中如何使用ref解决GetElementById为空的问题,需要的朋友可以参考下
2023-12-12
element-ui多文件上传的实现示例
这篇文章主要介绍了element-ui多文件上传的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vite+vue3项目中使用SVG方式
这篇文章主要介绍了vite+vue3项目中使用SVG方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue.js框架实现购物车功能
这篇文章主要为大家详细介绍了Vue.js框架实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
Vue3中父子传参常见方式及用法
在 Vue 3 中，父子组件之间进行通信有多种方式，下面简单介绍下常见的方式及其用法和使用场景，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧
2024-01-01
vue3中利用Export2Excel将数据导出为excel表格
这篇文章主要给大家介绍了关于vue3中利用Export2Excel将数据导出为excel表格的相关资料,最近项目需要前端来导出Excel操作,所以给大家总结下,需要的朋友可以参考下
2023-09-09
vue使用天地图、openlayers实现多个底图叠加显示效果
这篇文章主要介绍了vue使用天地图、openlayers实现多个底图叠加显示,根据返回的经纬度列表通过天地图、openlayers实现底图添加，本文通过示例代码给大家介绍的非常详细，需要的朋友参考下吧
2022-04-04