Vue3 第七章（认识Reactive全家桶）

reactive

用来绑定复杂的数据类型 例如 对象 数组
reactive 源码约束了我们的类型

他是不可以绑定普通的数据类型这样是不允许 会给我们报错

import { reactive} from 'vue'
let person = reactive('sad')

绑定普通的数据类型 我们可以 使用昨天讲到ref
你如果用ref去绑定对象 或者 数组 等复杂的数据类型 我们看源码里面其实也是 去调用reactive
使用reactive 去修改值无须.value

reactive 基础用法

import { reactive } from 'vue'
let person = reactive({
   name:"小满"
})
person.name = "大满"

数组异步赋值问题
这样赋值页面是不会变化的因为会脱离响应式

let person = reactive<number[]>([])
setTimeout(() => {
  person = [1, 2, 3]
  console.log(person);
},1000)

解决方案1
使用push

import { reactive } from 'vue'
let person = reactive<number[]>([])
setTimeout(() => {
  const arr = [1, 2, 3]
  person.push(...arr)
  console.log(person);
},1000)

方案2
包裹一层对象

type Person = {
  list?:Array<number>
}
let person = reactive<Person>({
   list:[]
})
setTimeout(() => {
  const arr = [1, 2, 3]
  person.list = arr;
  console.log(person);
},1000)

readonly

拷贝一份proxy对象将其设置为只读
import { reactive ,readonly} from 'vue'
const person = reactive({count:1})
const copy = readonly(person)
 //person.count++
 copy.count++

shallowReactive

只能对浅层的数据 如果是深层的数据只会改变值 不会改变视图
案例

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

————————————————
版权声明：本文为CSDN博主「小满zs」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq1195566313/article/details/122784094