• 用来绑定复杂的数据类型 如 对象 数组
• 无需 .value 操作

基本使用

<template>
  <div>this is hello world</div>
  <h1>{{ obj.name }}</h1>
</template>
<script setup lang="ts">
import {reactive} from "vue"
const obj = reactive({name:'zhangsan'})
</script>

readonly 转为只读对象

<template>
  <div>this is hello world</div>
  <h1>{{ obj.name }}</h1>
</template>
<script setup lang="ts">
import {reactive,readonly } from "vue"
const obj = reactive<any>({name:'zhangsan'})
const read = readonly(obj);
read.name = "lisi" //lloWorld.vue:9 [Vue warn] Set operation on key "name" failed: target is readonly. 
</script>

浅层响应式 shallowReactive

用法用 reactive ，只能劫持第一层的对象

<template>
  <div>this is hello world</div>
  <h1>{{ data.user.name }}</h1>
  <button @click="handelClick">click</button>
</template>
<script setup lang="ts">
import {shallowReactive} from "vue"
const data = shallowReactive<any>({user:{name:"zhangsan"}})
const handelClick = ()=>{
  data.user.name = "lisi"
}
</script>