对Vue3中reactive的深入理解

目录

• Vue3 reactive的理解
• 1.什么是reactive?
• 2.reactive注意点
• Vue3笔记 reactive函数

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 实现，通过代理对象操作源对象内部数据进行操作。

总结一下：

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。