vue3 数组、对象响应式数据之reactive 函数用法

WEB前端大澳

前端工程师

官方说明：

响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中，返回的 proxy 是不等于原始对象的。建议只使用响应式 proxy，避免依赖原始对象。

使用：

//第一种方法  单独数组赋值
<script lang="ts">
// 第一步 引入
 import { reactive } from 'vue';
 export default {
 name: '',
 components: {},
 setup() {
 // 第二步  定义数组 
 let list:any = reactive([])
 // 第三部 赋值
 const onAddList = ()=>{
 // 假设 res 就是后端返回的数据 想要把res的数据放到list中
 const res = [2, 3, 4, 5]; 
 // vue2中 赋值是直接 = 的 但是vue3中 这种情况不可以的 
 // list = res
 // 第一种可行的方法  遍历forEach push 赋值  但是这种麻烦
 // res.forEach(item=>{
 //   list.push(item)
 // })
 // 推荐第二种 ES6扩展运算符... 方式
 list.push(...res)
 return {
 list,
 onAddList
</script>

对象中数组方式赋值可以直接使用 =

//把对象的数据变成响应式的
<script lang="ts">
 import { reactive, toRefs } from 'vue';
 export default {
 name: '',
 components: {},
 setup() {
 // 用法2：把你用的数据都放到有个 data 对象中 也是我使用的方法
 const data = reactive({
 list:[] as any[]
 const onAddList = ()=>{
 const res = [2, 3, 4, 5]; 
 // 可以直接赋值 
 data.list = res;
 // 使用toRefs 是因为 将多个属性都变成响应式的，并且与原始数据做关联，并且更改数据的时候不更新页面
 const refData = toRefs(data);
 // 记得return
 return {
 ...refData,
 onAddList