响应式基础

在vue中，让一个普通数据转换成响应式数据的两种方式：

• ref函数：更适合单个变量

• reactive函数：更适合对象

响应式关键字ref

经过ref修饰的变量在script中需要通过.value获取操作其值

而在template中不需要.value，可以直接操作变量的值

响应式关键字reactive

经过reactive修饰的对象，在操作其属性的值时，都直接使用对象名.属性名的方式即可

<script setup>
import {reactive,} from 'vue';
let person = reactive({
  name:"xiaobai",
  age:"18"
})
</script>

<template>
  <div>
    
  </div>
</template>

<style scoped>
</style>

API

toRef函数：将reactive响应式数据中的某个属性转换为ref响应式数据

toRefs函数：reactive响应式数据中的多个属性转换为ref响应式数据

let p_name = toRef(person,"name")
let {name,age} = toRefs(person)

这两个API实在不常用，因为在实际开发环境中，reactive修饰的对象使用比ref修饰的变量使用起来方便得多 😓