vue3中的ref 和 reactive 定义数组

阅读本书更多章节>>>>

在vue3中，定义响应式数据一般有两种方式：ref 和 reactive

一般来说，我们使用 ref 来定义基本数据类型，使用 reactive 来定义复杂数据类型

但是也可以使用 ref 来定义数组

1、ref 定义数组

import { ref } from 'vue'const arr = ref([])

两种情况：定义时就将数组初始化、定义时未初始化数组

初始化数组

import { ref,watch } from 'vue'const arr = ref([1，2，3])watch(arr.value, () => { //这个时候通过直接修改和利用数组的方法修改都可以监测到  console.log('数组变化了')})const pushArray = () => {  emptyArray.value.splice(0, 0, 19)}const changeArrayItem = () => {  emptyArray.value[0] = 10}

未初始化数组

import { ref,watch,onMounted } from 'vue'const arr = ref([])watch( //这个时候不能用.value且必须是深度监听，这种写法不仅可以监听数组本身的变化，也可以监听 数组元素的变化  arr,  () => {    console.log('空数组变化了')  },  {    deep: true  })const pushArray = () => {  arr.value.splice(0, 0, { value: 12 })}const changeArrayItem = () => {  arr.value[0] = { value: 32 }}onMounted(() => {  arr.value = [{ value: 5 }, { value: 2 }, { value: 3 }, { value: 4 }]})

2、reactive 定义数组 

import { reactive } from 'vue';let arr = reactive([])function change(){   let newArr = [1,2,3]   arr = newArr}

但是这样定义的会出现问题，arr = newArr 这一步使得 arr 失去了响应式的效果

解决方法：可以使用 ref 定义、使用 push 方法、数组外层嵌套一个对象

import { reactive,ref } from 'vue';let arr = reactive([])function change(){   let newArr = [1,2,3]   arr = newArr}// 方法一：使用 reflet arr = ref([])function change(){   let newArr = [1,2,3]   arr.value = newArr}// 方法二：使用push 方法let arr = reactive([])function change(){   let newArr = [1,2,3]   arr.push(...newArr)}// 方法三：外层嵌套一个对象let arr = reactive({list:[]})function change(){   let newArr = [1,2,3]   arr.list = newArr}

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-03-26/148749.html，文章来源：网络cs，作者：康由，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！