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>