vue3中的reactive函数声明数组方式

vue3中的reactive函数声明数组方式

目录

reacitve函数如何声明一个响应式数组

解决办法

使用reactive包裹数组赋值

需求

代码 

reacitve函数如何声明一个响应式数组

如以下案例

<template>   <div>       <div v-for="item in arr" :key="item">            {{item}}       </div>         <button @click="change">change</button>   </div> </template> <script>   import { defineComponent, reactive,ref } from 'vue';   export default defineComponent({     setup(props,context) {       let arr = reactive([])       function change(){         console.log("change...");         let newArr = [1,2,3]         arr = newArr       }       return{         arr,         change       }     },   }); </script> <style scope></style>

点击change按钮,发现并没有什么变化,这是因为arr = newArr这行代码让arr失去了响应式。

解决办法

使用ref函数 

 setup(props,context) {       let arr = ref([])       function change(){         console.log("change...");         let newArr = [1,2,3]         arr.value = newArr       }       return{         arr,         change       }     },

使用数组的push方法 

 setup(props,context) {       let arr = reactive([])       function change(){         console.log("change...");         let newArr = [1,2,3]         arr.push(...newArr)       }       return{         arr,         change       }     },

创建一个响应式对象,对象的属性是数组

<template>   <div>       <div v-for="item in arr.list" :key="item">            {{item}}       </div>         <button @click="change">change</button>   </div> </template> <script>   import { defineComponent, reactive,ref } from 'vue';   export default defineComponent({     setup(props,context) {       let arr = reactive({         list:[]       })       function change(){         console.log("change...");         let newArr = [1,2,3]         arr.list = newArr       }       return{         arr,         change       }     },   }); </script> 使用reactive包裹数组赋值 需求

将接口请求到的列表数据赋值给响应数据arr

代码  const arr = reactive([]); const load = () => {   const res = [2, 3, 4, 5]; //假设请求接口返回的数据   // 方法1 失败,直接赋值丢失了响应性   // arr = res;   // 方法2 这样也是失败   // arr.concat(res);   // 方法3 可以,但是很麻烦   res.forEach(e => {     arr.push(e);   }); };

方法1:vue3 使用 proxy,对于对象和数组都不能直接整个赋值;

方法2:concat 不改变原数组

// 方法4 const state = reactive({   arr: [] }); state.arr = [1, 2, 3] // 方法5 const state = ref([]) state.value = [1, 2, 3] // 方法6 const arr = reactive([]) arr.push(...[1, 2, 3]) // 亦或者 arr.length = 0 // 清空原数组 arr.push(...res) // 解构然后push进去

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。

推荐阅读