3-reactive

 

 

<template>
  <div>数组 {{ message }}</div>
  <div>数组 {{ listOne }}</div>
  <div>对象 {{ obj }}</div>

  <div>
    <button @click="change1">change1</button>
  </div>

  <div>
    <button @click="change2">change2</button>
  </div>

  <div>{{ msg }}</div>
</template>

<script setup lang="ts">
import { reactive, readonly, shallowReactive, ShallowReactive } from 'vue';

//异步赋值方法一
let message = reactive<number[]>([])  //接收数组[] 或者对象 {}
setTimeout(() => {
  let arr = [1, 2, 3, 4]
  //message = arr //负值方式会破坏响应式
  message.push(...arr) //可以使用push
  console.log(message)
}, 1000)

//异步负值方法二
type O = {
  list: number[]
}
let listOne = reactive<O>({
  list: []
})
setTimeout(() => {
  listOne.list = [1, 2, 3, 4, 5]
}, 1000);

//修改对象值
let obj = reactive({
  name: '测试'
})  //接收数组[] 或者对象 {}
obj.name = '修改值'

//readonly
let person = reactive({
  count: 1
})
// let copy = readonly(person)
// copy.count++ //会提示错误

//ShallowReactive
let msg = shallowReactive({
  test: '测试开发',
  nav: {
    bar: {
      name: '多层嵌套对象'
    }
  }
})

const change1 = () => {
  msg.test = '我被改啦'
}

const change2 = () => {
  msg.nav.bar.name = '我想修改深层次obj对象' //深层次的不会被修改
}

</script>

<style scoped>

</style>