Vue3| 组合式API——reactive 和 ref 函数

标签：count vue 响应 对象 reactive API Vue3 ref

Vue中默认的数据并不是响应式的，如果我们希望数据是响应式的，则需要通过 reactive 或者 ref 进行处理。

 

reactive ()：

作用：接收 对象类型的数据作为参数传入 并返回一个 响应式对象

reactive 不能处理简单类型的数据

 

reactive 使用步骤：

1. 在 <script setup> 里，从 vue 包中导入 reactive

<script setup>   import { reactive } from 'vue' </script>

2. 在 <script setup> 中 执行 reactive 函数 并传入 类型为对象的初始值，并使用变量接收返回值

（在对象数据的外面包一层 reactive，一旦包完了之后，对象类型数据 得到的就是响应式的，再把响应式结果赋值给了 state）

<script setup> import { reactive } from 'vue'
const state = reactive({   count: 100 })
const setCount = () => {   state.count++ } </script>
<template>   <div>{{ state.count }}</div>   <button @click="setCount">加一</button> </template>   ---------------------------------------------------------------------------------------------------------   ref ()： 作用：接收 简单类型或者对象类型的数据传入 并 返回一个响应式的对象 本质：在原有传入数据的基础上，外层包了一层对象，包成了复杂类型，再借助 reactive 实现的响应式  

ref 使用步骤：

1. 在 <script setup> 里，从 vue 包中导入 ref 函数

<script setup> import { ref } from 'vue' </script>

2. 在 <script setup> 中 执行 ref 函数 并传入 初始值，使用变量接收 ref 函数的返回值

（返回的是对象，<script>中用 .value访问数据，但<template>中不需要加 .value）

<script setup> import { ref } from 'vue'
const count = ref(20)
console.log(count.value) </script>
<template>   <div>{{ count }}</div> </template>  

标签：count,vue,响应,对象,reactive,API,Vue3,ref
From： https://www.cnblogs.com/gagaya2/p/17763397.html