vue3 rective 全家桶,to类了解 （1）
学习 reactive
reactive 只接受 引用类型的数据，不可直接改变值，识图不会改变，可以写成对象，将属性改变
<template>
<div v-for="item in arr">
{{ item }}
</div>
<br>
<div v-for="item in arrb.arr">
{{ item }}
</div>
<button @click="changeArr">赋值arr</button>
</template>
<script setup lang='ts'>
import { ref, reactive} from 'vue'
const arr = reactive<string[]>(['hh', 'nn', 'mm']) //直接写成数组类型是不能直接进行赋值操作的
const arrb = reactive({ //写成对象形式是可以进行赋值操作的，将数组当成一个属性去操作
arr: ['hh', 'nn', 'mm']
})
function changeArr() {
// arr = ['aa', 'bb', 'cc'] //不可直接赋值，数组不会改变 代码会报错
// arr.push(...['aa', 'bb', 'cc']) //结构赋值的话数组会改变
arrb.arr= ['aa', 'bb', 'cc'] // 写成对象是可以直接改变数组的
}
</script>以下是自己学习时的全部代码
知识拓展
rective 全家桶 to系类
<template>
arr
<div v-for="item in arr">
{{ item }}
</div>
<br>
<div v-for="item in arrb.arr">
{{ item }}
</div>
<button @click="changeArr">赋值arr</button>
</template>
<script setup lang='ts'>
import { ref, reactive, readonly, shallowReactive, toRef, toRefs } from 'vue'
//常用
// reactive 只接受引用类型 ref 支持所有类型
// reactive 不可直接赋值，会将原来 proxy 破坏，数据将不再是响应式
//readonly 数据只读，不可改变
// 使用 readonly(arr) 数据只读
//shallowReactive 浅层 reactive 修改值的话只能指向第一层
// 例如 const obj={one:{two:{three:1}}}
// 改变值的话 obj.one.two.three=2 识图不会更新
// obj.one = {two:{three:456}} //这种是会改变
//跟 ref 相似 shallowReactive 也会受 reactive 的影响，将原本不会改变的值改变
// toRef 对响应式有效，非响应式，识图不会有任何改变
//const arr = { 将arr 改变成 响应式对象的话，可以改变newarr的值
// name:1
// }
// toRef 接受两个值 ('值',key值)
//const newarr = toRef(arr,'name') 将name值提出来，赋值给newarr
//torefs 将 数组里面的 都变成 ref 对象 ，仅对响应式对象生效 大多用于结构赋值
// const arr = reactive([name:1])
//const {name}=torefs(arr) 结构出来的是响应式的
const arr = reactive<string[]>(['hh', 'nn', 'mm']) //直接写成数组类型是不能直接进行赋值操作的
const arrb = reactive({ //写成对象形式是可以进行赋值操作的，将数组当成一个属性去操作
arr: ['hh', 'nn', 'mm']
})
function changeArr() {
// arr = ['aa', 'bb', 'cc'] //不可直接赋值，数组不会改变 代码会报错
// arr.push(...['aa', 'bb', 'cc']) //结构赋值的话数组会改变
arrb.arr= ['aa', 'bb', 'cc'] // 写成对象是可以直接改变数组的
}
</script>
<style scoped>
</style>