Vue3tsReactive全家桶

reactive全家桶

readonly

拷贝一份proxy对象并且将其设置为只读
我们发现其中属性是不可以修改的

import {reactive,readonly} from 'vue'
    type Person = {
        name:string,
        age:number
    }

    const zhouzhou = reactive<Person>({
        name:"zzz",
        age:12
    })
    
    const zhou = readonly(zhouzhou)
    zhou.name = 'qiqi'

shallowReactive

只改变浅层数据，但是深层次不改变，但是如果在dom挂载之前改变深层次数据，那么是会生效的

    import {reactive,readonly,ref,shallowReactive} from 'vue'
    type Person = {
        name:{
            firstname:string,
            lastname:string
        },
        age:number
    }

    const zhouzhou = shallowReactive<Person>({
        name:{
            firstname:'zhou',
            lastname:'qi'
        },
        age:23
    })

      //有效
    const handleTest = () =>{
        zhouzhou.age = 33
    }
      //无效
    const handleTest2 = () =>{
        zhouzhou.name.lastname = 'ew'
    }

reative丢失响应式

原因

我们了解，reative是用来将复杂对象进行响应式的，什么情况会丢失响应式呢?
这个例子中我们

<script setup lang="ts">
import {reactive} from 'vue'
//声明reactive响应式对象
let numList = reactive<number[]>([0,1,3])

  //发现其丢失响应式
  const changeMsg1 = () => {
    numList = [0,0,0]
    console.log(numList);
  }
  const changeMsg2 = () => {
    numList[0] = 55
    console.log(numList);
  }
  const changeMsg3 = () => {
    numList[0] = 22
    console.log(numList);
  }

</script>

<template>
  <div>
    <button @click="changeMsg1">button1</button>
    <button @click="changeMsg2">button2</button>
    <button @click="changeMsg3">button3</button>
<!--    <span>{{msg2}}</span>-->
    <span>{{numList}}</span>
  </div>
</template>

<style scoped>

</style>

点击button1之后我们发现，button2、3都无法正常修改，丢失了响应式
原因是数组是一个引用对象，我们修改整个数组的时候（按下button1）它已经从响应式对象替换成了普通的数组

我们需要替换整个对象的时候该怎么做不丢失响应式呢？

数组使用push加解构赋值

使用push加解构赋值

const changeMsg1 = () => {
  //使用解构加push
  let arr = [0,0,0]
  numList.push(...arr)
  console.log(numList);
  }

外面套一层

外面在包一层

//外面给它包一层，申明一个类型，让一个number类型的数组成为它的属性
type O = {
  list:number[]
}

//声明reactive响应式对象
let numList = reactive<O>({
  list:[]
})


const changeMsg1 = () => {
  let arr = [0, 0, 0]
  numList.list = arr
  console.log(numList);
}
const changeMsg2 = () => {
  numList.list[0] = 55
  console.log(numList);
}

别用reactive用ref

因为使用ref的使用需要.value，相当于外面套了一层

参考：https://blog.csdn.net/qq1195566313