reactive() 函数

reactive()函数只对对象类型有效（对象、数组、Map、Set），对string、number和 boolean这样的原始类型无效
reactive接收一个普通对象然后返回该普通对象的响应式代理
● 普通对象==>返回一个proxy对象，响应式转换是深层的，对影响对象内部所有嵌套的属性
● 用user.name=“new name”来修改值
● 内部基于proxy实现
● 获取数据值的时候直接获取，不需要加.value
● 参数只能传入对象类型

代码演示：

<script setup>// 引入 reactive 函数import { reactive } from 'vue'// reactive 对原始类型是无效（不具备响应式）let account = reactive('Abc')function changeAccount() {account += '='console.log(account)}// reactive 对象数据源（具有响应式）let emp = reactive({name: 'Jack',salary: 7000})function changeEmpSalary() {emp.salary += 1console.log(emp)}</script><template><hr><h1>账号：{{ account }}</h1><button @click="changeAccount">点我更改账号</button><hr><h1>员工：{{ emp }}</h1><button @click="changeEmpSalary">点我更改员工薪资</button></template>

reactive() 函数相关推荐

Vue3学习之第二节：ref函数、reactive函数
一.ref 函数作用:定义一个响应式的数据. 示例: <template><div>{{ name }}</div> </template><s ...
reactive函数实现响应式数据
使用reactive函数可以定义对象类型.数组类型的响应式数据. 看个具体的例子. 入口文件main.js import { createApp } from 'vue'; import App fr ...
VueJs中的reactive函数
前言一个基本类型的数据,想要变成响应式数据,那么需要通过ref函数包裹,而如果是一个对象的话,那么需要使用reactive函数 reactive可将对象变成响应式将一个对象类型的数据变为响应式,如 ...
Vue3的reactive函数
reactive函数用来定义一个对象类型的响应式数据(基本类型用ref函数) let 代理对象 = reactive(源对象) 接收一个对象(或数组),返回一个代理对象(Proxy的实例对象) re ...
Day 04-常用Composition API_ref reactive 函数
目录 1.ref函数 2.reactive函数 3.reactive对比ref 1.ref函数作用: 定义一个响应式的数据: 语法: const xxx = ref(initValue) 创建一个 ...
vue3 reactive函数用法
reactive的用法与ref的用法相似,也是将数据变成响应式数据,当数据发生变化时UI也会自动更新.不同的是ref用于基本数据类型,而reactive是用于复杂数据类型,比如对象和数组例如:定义一 ...
vue3——ref reactive函数
ref:定义一个响应式的数据使用方法:const xxx = ref(value) 修改时通过xxx.value = *** 修改例如 <template><h1>一个人的 ...
Vue3通透教程【五】Vue3中的响应式数据 reactive函数、ref函数
文章目录
VUE3 reactive与toRefs函数
Vue3.0中还为我们提供了一个对象式响应的reactive函数 . Reactive函数创建一个响应式对象. 一:Reactive函数其实,在我看来,reactive函数就是VUE3.0为我们提 ...

reactive() 函数

reactive() 函数相关推荐

最新文章

热门文章