vue3中的reactive、readonly和shallowReactive使用详解

<template>
  <div>
    <form>
      <input v-model="obj.name" type="text" />
      <br />
      <input v-model="obj.age" type="text" />
      <br />
      <button @click.prevent="submit">提交</button>
    </form>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, readonly, shallowReactive } from 'vue'
const obj = reactive({
  name: '张三',
  age: 23
})
const copy = readonly(obj)
const submit = () => {
  obj.age++
  console.log(copy)
}
</script>

<template>
  <div>{{ state }}</div>
  <br />
  <button @click="change1">test1</button>
  <br />
  <button @click="change2">test2</button>
</template>
<script setup lang="ts">
import { ref, reactive, readonly, shallowReactive } from 'vue'
const state = shallowReactive({
  a: 1,
  first: {
    b: 2,
    second: {
      c: 3
    }
  }
})
const change1 = () => {
  state.a = 7
}
const change2 = () => {
  state.first.b = 8
  state.first.second.c = 9
  console.log(state)
}
</script>