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函数用法相关推荐

vue3 ref函数用法
1.在setup函数中,可以使用ref函数,用于创建一个响应式数据,当数据发生改变时,Vue会自动更新UI <template><div><h1>{{mycount ...
VUE3 reactive与toRefs函数
Vue3.0中还为我们提供了一个对象式响应的reactive函数 . Reactive函数创建一个响应式对象. 一:Reactive函数其实,在我看来,reactive函数就是VUE3.0为我们提 ...
Vue3学习之第二节：ref函数、reactive函数
一.ref 函数作用:定义一个响应式的数据. 示例: <template><div>{{ name }}</div> </template><s ...
Vue3的reactive函数
reactive函数用来定义一个对象类型的响应式数据(基本类型用ref函数) let 代理对象 = reactive(源对象) 接收一个对象(或数组),返回一个代理对象(Proxy的实例对象) re ...
VueJs中的reactive函数
前言一个基本类型的数据,想要变成响应式数据,那么需要通过ref函数包裹,而如果是一个对象的话,那么需要使用reactive函数 reactive可将对象变成响应式将一个对象类型的数据变为响应式,如 ...
Day 04-常用Composition API_ref reactive 函数
目录 1.ref函数 2.reactive函数 3.reactive对比ref 1.ref函数作用: 定义一个响应式的数据: 语法: const xxx = ref(initValue) 创建一个 ...
Vue3 reactive 源码分析
概要本文通过抽取Vue3 reactive源码中的主要部分,来理解其响应式object的实现方式.本文源码基于这个入口文件:github reactive.ts reactive() 源码位置:gi ...
2021年大数据常用语言Scala（三十七）：scala高级用法高阶函数用法
目录高阶函数用法作为值的函数匿名函数柯里化(多参数列表) 闭包高阶函数用法 Scala 混合了面向对象和函数式的特性,在函数式编程语言中,函数是"头等公民",它和Int. ...
php foreach嵌套foreach,php中foreach怎么嵌套foreach PHP中foreach函数用法？
foreach的使用方法小编不是很明确,分享达人指教一下.foreach (array_expressforeach($array as $key) { if(xxxx) { break; //bre ...

vue3 reactive函数用法

vue3 reactive函数用法相关推荐

最新文章

热门文章