vue3 Reactive_vue reactive + new-CSDN博客

本文链接：https://blog.csdn.net/m0_71902265/article/details/129434051

文章介绍了Vue中reactive函数用于创建响应式对象的特点，强调它不支持简单类型如字符串，并展示了如何处理数组的异步赋值问题，提出了使用push方法或包裹一层对象的解决方案。同时提到了readonly用于创建只读对象以及shallowReactive在处理浅层数据时的局限性。

摘要由CSDN通过智能技术生成

ref支持所有的类型，reactive用来绑定复杂的数据类型例如对象数组,不可以绑定普通的数据类型.

import { reactive} from 'vue'
let person = reactive('sad') // 不支持简单类型

使用reactive 去修改值无须.value

import { reactive } from 'vue'
let person = reactive({
   name:"lisi"
})
person.name = "zhangsan"

数组异步赋值问题

这样赋值页面是不会变化的因为会脱离响应式

let person = reactive<number[]>([])
setTimeout(() => {
  person = [1, 2, 3]
  console.log(person); // [1,2,3]
},1000)
// person 是一个响应式的对象，直接赋值破坏了响应式

方案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>