脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3清空Reactive定义的数组

Vue3如何清空Reactive定义的数组

 更新时间：2023年10月24日 15:20:08   作者：好多吃的啊  
这篇文章主要介绍了Vue3如何清空Reactive定义的数组问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3清空Reactive定义的数组

shallowRef 定义得数组 清空

let component_list = shallowRef([
  {unit: Head, name: 'Head', id: 1},
  {unit: TopClass, name: 'TopClass', id: 2},
])
component_list.value.length = []  // 清空

定义数据打印图片：

清空数组 数据 图片 (达到预期目的)：

vue3 reactive的坑

最近使用vue3的过程中发现reactive有一些问题

1.清空reactive定义的数组时必须将length设为0，直接赋值一个空数组是没有作用的，同理对象直接赋值一个空对象也没有作用，只能遍历对象一项一项删，这里说的没有作用是不能响应式的更新页面，如果打印一下是能看到确实被删除了，但是页面没有变化

清空数组

// 错误示例
<template>
  <div>{{ arr }}</div>
  <button @click="click">点击</button>
</template>
 
<script setup>
import { reactive } from 'vue'
let arr = reactive([1, 2, 3])
const click = () => {
  arr = []
  console.log(arr) // 这里打印的结果是正常的空数组
}
</script>
// 正确示例
<template>
  <div>{{ arr }}</div>
  <button @click="click">点击</button>
</template>
 
<script setup>
import { reactive } from 'vue'
let arr = reactive([1, 2, 3])
const click = () => {
  arr.length = 0 // 这里和vue2是正好相反，vue2直接将数组length设为0是无效的
  console.log(arr)
}
</script>

清空对象

// 错误示例
<template>
  <div>{{ obj }}</div>
  <button @click="click">点击</button>
</template>
 
<script setup>
import { reactive } from 'vue'
let obj = reactive({a: 111, b: 222})
const click = () => {
  obj = {}
  console.log(obj) // 这里打印的结果是正常的空对象
}
</script>
// 错误示例
<template>
  <div>
    <div>{{ obj }}</div>
    <button @click="click">点击</button>
  </div>
</template>
 
<script setup>
import { reactive } from 'vue'
let arr = reactive({a: xxx, b: xxx })
const click = () => {
  for (let i in obj) {
    delete obj[i]
  }
  console.log(obj) // 这里打印的结果是正常的空数组
}
</script>

2.同样的道理直接赋值也不行，数组只能用数组的某些方法，或者直接修改索引，修改索引跟vue2又是相反，vue2只修改索引项没有作用，对象直接使用点语法即可，直接赋一个对象没有作用

3.这些问题其实只要使用ref就可以解决，但是人官方推荐使用reactive。。。。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论