reactive

支持引用类型 Array Object Map Set ...

基本使用

<template>
  <div>{{ form.name }}</div>
  <input v-model="form.name" />
  <div>{{ form.age }}</div>
  <input v-model="form.age" />
</template>

<script setup>
import { reactive } from "vue";
const form = reactive({
  name: "Test",
  age: "12"
});
</script>

定义类型

type Form = {
    name:string;
    age:number;
}
const form = relative<Form>({
    name:"Test",
    age:12
})

取值赋值

form.name  // 不需要.value

数组

const list = relative<string[]>([])

// list = ["a"]  不能直接赋值 会破坏Proxy代理对象

list.push("A")

const res = ["a","b","c"]
list.push(...res)

const list2 = relative<{
    arr:string[]
}>({
    arr:[]
})

list2.arr = ["A","B","C"]

Readonly

import { reactive, readonly } from "vue";

let obj = relative({name:"test"})
let read = readonly(obj) // 只读不许修改  受原始对象obj影响

ShallowReactive

import {shallowReactive} from "vue";

const obj = shallowReactive({
    code:1,
    child:{
        code:2,
        child:{
            code:3
        }
    }
})

obj.child.child.code = 33; //浅层 视图不更新