vue3 reactive函数声明数组
DanceDonkey 人气:2reacitve函数如何声明一个响应式数组
如以下案例
<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进去
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容