Vue3.0中的reactive介绍与使用

简介: Vue3.0中的reactive介绍与使用

reactive 是 Vue3 中提供的实现响应式数据的方法。

在 Vue2 中响应式数据是通过 defineProperty 来实现的,

在 Vue3 中响应式数据是通过 ES6 的 Proxy来实现的。

reactive 参数必须是对象 (json / arr)

如果给 reactive 传递了其它对象

默认情况下,修改对象无法实现界面的数据绑定更新。

如果需要更新,需要进行重新赋值。(即不允许直接操作数据,需要放个新的数据来替代原数据)

#### 在 reactive 使用基本类型参数

基本类型(数字、字符串、布尔值)在 reactive 中无法被创建成 proxy 对象,也就无法实现监听。

用法:

<script>
import { reactive } from "vue";
export default {
  setup() {
    const count = reactive({
      a:0
    }); //声明
    const event = () => { //修改事件
      count.a++;
    };
    return { count, event };
  }
};
</script>
目录
相关文章
|
6月前
|
JavaScript 前端开发
vue3中reactive和ref函数及对比
vue3中reactive和ref函数及对比
105 0
|
18天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
21天前
|
API
vue3知识点:reactive对比ref
vue3知识点:reactive对比ref
28 3
|
21天前
|
API
vue3知识点:reactive函数
vue3知识点:reactive函数
25 1
|
2月前
|
JavaScript
Vue3基础(二)___reactive
本文介绍了Vue 3中使用`reactive`函数创建响应式对象的方法,并通过示例代码展示了如何在组件的模板中使用这些响应式数据以及如何通过方法修改它们。文章还比较了`ref`和`reactive`两种创建响应式数据的方式,说明了`ref`底层实际上是`reactive`,并且`ref(0)`相当于`reactive({value:0})`。
19 1
Vue3基础(二)___reactive
|
2月前
|
JavaScript 前端开发 API
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
|
2月前
|
JavaScript
Vue3 : ref 与 reactive
Vue3 : ref 与 reactive
77 1
|
2月前
vue3 reactive数据更新,视图不更新问题
vue3 reactive数据更新,视图不更新问题
139 3
|
3月前
|
JavaScript API 开发者
Vue 3 为什么同时需要 Ref 和 Reactive?
Vue 3 为什么同时需要 Ref 和 Reactive?
|
3月前
|
JavaScript 前端开发 数据管理