vue3_reactive全家桶

1.reactive

用来绑定复杂的数据类型 例如 对象 数组
基础写法：

<template>
    <div> {{ obj.name }}</div>
    <button @click="change">修改 reactive</button>
  </template>
   
  <script setup lang='ts'>
  import {reactive } from 'vue'
  const obj = reactive({
    name:'kathy',
    age:25
  })
  const change = () => {
   obj.name = 'small'//会触发视图更新
  }
  </script>

特殊：
更新数组：

<template>
    <div> {{ obj.name }}</div>
    <div>{{ arr }}</div>
    <div>{{ arr2 }}</div>
    <button @click="change">修改 reactive</button>
  </template>
   
  <script setup lang='ts'>
  import {customRef, reactive } from 'vue'
  const obj = reactive({
    name:'kathy',
    age:25
  })
  let arr = reactive<number[]>([])
  type P = {
    list?:Array<number>
  }
  let arr2 = reactive<P>({
    list:[]
  })
  const change = () => {
//    obj.name = 'small'
    // 方式1：非响应式
    //arr = [1,3,4]
    // 方式2：响应式
    // let a:any = [2,3,4]
    // arr.push(...a)
    // 方式3：响应式
    arr2.list = [1,2,3]
  }
  </script>

ref和reactive

  const age = ref<number>(22)
  const all = reactive({age})
  const change = () => {
    // age,all.age都会在视图更新
    // age.value = 25
    // age,all.age都会在视图更新
    all.age = 33
  }

2.readonly

接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理

 const re = reactive({
    name:'kathy'
  })
const copy = readonly(re)
const change = () => {
  re.name = 'lucky'//可以更改
  copy.name = 'xxxx'//无法分配到 "name" ，因为它是只读属性   
}

3.shallowReactive

reactive() 的浅层作用形式，只能对浅层的数据 如果是深层的数据只会改变值 不会改变视图

const depObj = shallowReactive({
    foo:'bro',
    obj:{
        kfc:'444'
    }
})
const change = ( ) =>{
    // depObj.foo = 'uncle'//值和视图都更新
    depObj.obj.kfc = '肯德基疯狂星期四' //kfc的值更新了，视图不会更新
    console.log(depObj);
}

4.shallowReadonly

readonly() 的浅层作用形式

const depObj = shallowReadonly({
    foo:'bro',
    obj:{
        kfc:'444'
    }
})
const change = ( ) =>{
    // depObj.foo = 'uncle'//无法分配到 "foo" ，因为它是只读属性
    depObj.obj.kfc = '肯德基疯狂星期四' //是可以改变的，只是kfc的值更新了，视图不会更新
    console.log(depObj);
}

5.isReactive()

检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理

const age = ref<number>(22)
const all = reactive({age})
console.log(isReactive(all));//true
console.log(isReactive(age));//false

6.isReadonly()

检查传入的值是否为只读对象；通过 readonly() 和 shallowReadonly() 创建的代理都是只读的

const depObj = shallowReadonly({
    foo:'bro',
    obj:{
        kfc:'444'
    }
})
const copy = readonly(re)
const all = reactive({age})
console.log(isReadonly(depObj));//true
console.log(isReadonly(copy));//true
console.log(isReadonly(age));//false