日期:2024年7月15日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉得有所帮助
,帮忙点个赞
,也可以关注我
,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006
说在最前面:本文
vue3
的示例代码,在没有另外声名的情况下,均采用<script setup>
组合式代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^
文章目录
一、前言
在 Vue3
的响应式系统中,reactive API
允许我们创建响应式的对象或数组,这些对象或数组的任何变化都能被 Vue
的依赖追踪系统捕获,并自动触发视图更新。然而,在处理响应式数组时,特别是当需要清空数组时,我们需要注意一些特定的操作方式,以确保响应性不被破坏。本文将给出解决方案。
二、为什么不能直接赋值 [] 或重新声明?
在 Vue3
的响应式系统中,reactive
创建的响应式数组是通过代理(Proxy
)实现的。这种代理能够拦截并响应数组上的各种操作,如 push、pop、splice
等,从而触发视图更新。然而,当你直接给一个响应式数组赋值一个新的数组(即 myArray = []
)时,你实际上是在替换掉原有的响应式引用,而不是修改原数组的内容。由于新的数组([]
)并不是通过 reactive
创建的,因此它不具备响应性,Vue 无法追踪到它的变化。
同样地,如果通过 myArray = someOtherArray
的方式给数组赋一个全新的数组,也会遇到相同的问题:新的数组不是响应式的,Vue 无法追踪其变化。
三、两种数组清空的方案
我们通过一个例子来说明解决方案。
首先,我们定义一个 Reactive
的数组:
import { reactive } from 'vue';
const numList = reactive([1, 2, 3, 4, 5]);
1、使用 myArray.length = 0 清空数组
myArray.length = 0
这种方式则是通过直接操作数组的 length
属性来清空数组的,这是一种标准的数组操作方法,且被 Vue3
的响应式系统所支持。当 length
被设置为 0
时,数组中的所有元素都会被移除,且这个操作是响应式的,能够触发依赖该数组的视图更新。
numList.length = 0;
2、使用数组的 splice 方法清空数组
numList.splice(0, numList.length);
这两种方式都会修改数组的长度,从而触发视图的更新。
四、完整示例
假设我们有一个 Vue3
组件,其中包含一个响应式数组 items
,并在模板中通过 v-for
指令渲染这个数组的元素:
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
<button @click="clearItems">清空数组</button>
</div>
</template>
<script setup>
import { reactive } from 'vue';
const numList = reactive([1, 2, 3, 4, 5]);
function clearItems() {
// 正确的方式:清空数组并保持响应性
numList.length = 0;
// 错误的方式,不会触发响应性更新
// numList = [];
// 同样错误的方式
// numList = someOtherArray;
}
</script>
在上述示例中,点击“清空数组”按钮将触发 clearItems 方法,该方法通过 numList.length = 0
清空数组,由于这是响应式的操作,所以视图会立即更新,不再显示任何列表项。
五、结语
在 Vue3
中,当需要清空一个 reactive
定义的数组时,强烈推荐使用 myArray.length = 0
的方式。这种方式既简单又直接,能够确保数组的响应性不被破坏,从而实现视图的自动更新。相比之下,直接给数组赋值新的数组或重新声明数组都不是好的做法,因为它们会破坏原有的响应性连接。
版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/140349201