vue3(reactive全家桶)

1.reactive:用来绑定复杂的数据类型：数组，对象等。

   注意:reactive如果绑定的是基础类型数据会报错。

<template>
  <button @click="onChangeMsg">修改数据</button>
  <div>{{ obj.name }}</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
let obj = reactive({
  name: '张三',
  age: 18,
  boj: {
    namespaced: true
  }
});
setTimeout(() => {
  obj.name = '异步赋值无效';
}, 2000);
const onChangeMsg = () => {
  obj.name = '李四';
};
</script>

2.readonly:拷贝一份proxy对象并设置为只读属性

<template>
  <button @click="onChangeMsg">修改数据</button>
  <div>{{ obj.name }}</div>
</template>

<script setup lang="ts">
import { reactive, readonly } from 'vue';
let obj = reactive({
  name: '张三',
  age: 18,
  boj: {
    namespaced: true
  }
});
let CopyObj = readonly(obj);
setTimeout(() => {
  CopyObj.name = '异步赋值无效';
}, 2000);
const onChangeMsg = () => {
  CopyObj.name = '李四';
};
</script>

3.shallowReactive:拷贝一份对象，可以修改浅层数据，无法修改深层数据

<template>
  <button @click="onChangeMsg">修改数据</button>
  <div>{{ obj.name }}</div>
</template>

<script setup lang="ts">
import { reactive, shallowReactive } from 'vue';
let obj = reactive({
  name: '张三',
  age: 18,
  boj: {
    namespaced: true
  }
});
let CopyObj = shallowReactive(obj);
setTimeout(() => {
  //可以修改
  CopyObj.name = '异步赋值';
  //无法修改
  CopyObj.boj.namespaced = false;
}, 2000);
console.log(CopyObj.boj.namespaced);
const onChangeMsg = () => {
  CopyObj.name = '李四';
};
</script>