2.Vue3 Reactive系列

1.reactive

用来绑定复杂数据类型，可以把数组或者对象变为响应式数据

reactive的源码约束了传入的类型

<template>
  {{ name }}
  {{ age }}
  {{ test.info }}
  <button @click="change">change</button>
</template>

<script setup lang="ts">
import {reactive, ref, toRefs} from "vue";
// 通过reactive把一个复杂数据类型变为响应式数据
// ref内部做了处理如果给ref传入一个引用值内部会调用reactive进行处理

const data = reactive({
  name: "Yang",
  age: "23"
})

const test = ref({
  info: 'test'
})
const change = () => {
  data.name = "诺"
  test.value.info = 'hello'
}

// 如果模版中不想出现这个对象可以通过解构拿到这些值
// 这样会出现一个问题 会发现数据不是响应式的了通过toRefs就可以把解构出来的值变为响应式的ref数据
const {name, age} = toRefs(data)
</script>

2.readonly

可以拷贝出一份只读的数据 无法修改 并会给出警告

<template>
  {{ data.count }}
  {{ copy.count }}
  <button @click="add">count++</button>
</template>

<script setup lang="ts">
import {reactive, readonly} from "vue";

const data = reactive({
  count: 1
})

let copy = readonly(data)

const add = () => {
  data.count++
  copy.count++ // 警告 不允许修改
}
</script>

3.shallowReactive

引用数据的浅响应式

<template>
  {{ person }}
  <button @click="change1">浅层修改</button>
  <button @click="change2">深层修改</button>
</template>

<script setup lang="ts">
import {shallowReactive} from "vue";

let person = shallowReactive({
  name: 'Yang',
  age: "23",
  car: {
    carName: 'MI',
    color: 'blue'
  }
})

const change1 = () => {
  person.name = 'nuo' // 第一层 视图会更新
}

const change2 = () => {
  person.car.carName = 'BMW' // 第二层 视图不会更新
}

// 如果在挂载前无论是修改浅层还是深层都会生效
// change2() // 此函数执行时还没挂载 所以修改有效 且修改完毕之后会挂载到视图上
</script>

注：所有带shallow的效果都是第一层有效 深层失效 影响的是否递归处理数据