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

您可能感兴趣的文章:

关于Element-ui中Table表格无法显示的问题及解决
这篇文章主要介绍了关于Element-ui中Table表格无法显示的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue项目实战总结篇
离放假还有1天，今天小编抽空给大家分享前端时间小编做的vue项目，非常完整，需要的朋友参考下
2018-02-02
vue中swiper vue-awesome-swiper的使用方法及各种坑解决
这篇文章主要介绍了vue中swiper vue-awesome-swiper的使用方法及各种坑解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
记一次用ts+vuecli4重构项目的实现
这篇文章主要介绍了记一次用ts+vuecli4重构项目的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
如何在vue3中使用jsx语法
这篇文章主要介绍了在vue3中使用jsx语法,下面主要通过对比jsx和template不同语法，来实现同样的功能，需要的朋友可以参考下
2023-03-03
如何在Vue.JS中使用图标组件
这篇文章主要介绍了如何在Vue.JS中使用图标组件，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-08-08
Vue动态组件实现异常处理方法
Vue3动态组件怎么进行异常处理？下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-02-02
Vue混入mixins分发组件可复用功能
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
2022-09-09
electron-vite新一代electron开发构建工具
这篇文章主要介绍了electron-vite新一代electron开发构建工具，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
使用vuex较为优雅的实现一个购物车功能的示例代码
这篇文章主要介绍了使用vuex较为优雅的实现一个购物车功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12