vue3-reactive

reactive -- 做对象的响应式

---

用来绑定复杂的数据类型 组数、对象

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

let a:number[] = [1, 2, 3, 4, 5]
let arr:number[] = reactive([])
let obj = reactive({
  name: 'xxx'
})
arr = a
console.log(arr);
obj.name = 'yyy'
console.log(obj);
</script>
<template>
  <div>
      <div>{{arr}}</div>
      <div>{{obj}}</div>
  </div>
</template>
<style scoped>
</style>

注意, 异步或者接口请求，直接赋值页面响应不到UI变化

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

let a: number[] = [1, 2, 3, 4, 5]
let arr: number[] = reactive([])

setTimeout(() => {
  arr = a
  console.log(arr);
}, 1000);

</script>
<template>
  <div>
    <div>{{ arr }}</div>
  </div>
</template>
<style scoped>
</style>

修改为

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

let a: number[] = [1, 2, 3, 4, 5]
let arr: number[] = reactive([])

setTimeout(() => {
  arr.push(...a)
  console.log(arr);
}, 1000);

</script>
<template>
  <div>
    <div>{{ arr }}</div>
  </div>
</template>
<style scoped>
</style>

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

type ListType = {
  list: number[]
}
let arr = reactive<ListType>({
  list: []
})

setTimeout(() => {
  let a: number[] = [1, 2, 3, 4, 5]
  arr.list = a
  console.log(arr.list);
}, 1000);

</script>
<template>
  <div>
    <div>{{ arr.list }}</div>
  </div>
</template>
<style scoped>
</style>

readonly

---

接受一个对象（响应函或纯对象）或ref， 返回原始对象的只读代理

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

let obj = reactive({
  name: 'xxx'
})

let copyObj = readonly(obj)

copyObj.name = 'yyy' // 只读属性，不可修改


</script>
<template>
  <div>
  </div>
</template>
<style scoped>
</style>

shallowReactive

---

响应式代理，在dom挂载之前执行会被生效都是响应式，如果是在dom 挂载之后，只会对浅层的数据做试图更新，再深层的数据只会变化值，不会改变试图

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

let obj = {
  a: 'xxx',
  b: {
    c: {
      d: 2
    }
  }
}
const state = shallowReactive(obj)
const handleClick1 = () => {
  state.a = 'a被改变了'
}
const handleClick2 = () => {
  state.b.c.d = 3
}

</script>
<template>
  <div>
    {{state}}
    <button @click="handleClick1">浅层数据更新</button>
    <button @click="handleClick2">深层数据更新</button>
  </div>
</template>
<style scoped>
</style>