vue3中的ref和reactive定义数组方式
更新时间:2023年10月08日 15:08:14 作者:不悔0.0
这篇文章主要介绍了vue3中的ref和reactive定义数组方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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 } // 方法一:使用 ref let 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 }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue3中的setup语法糖、computed函数、watch函数详解
这篇文章主要介绍了Vue3中的setup语法糖、computed函数、watch函数,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03iview中实现this.$Modal.confirm自定义弹出框换行加样式
这篇文章主要介绍了iview中实现this.$Modal.confirm自定义弹出框换行加样式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09vue中如何使用echarts和echarts-gl实现3D饼图环形饼图
现在vue是很多公司前端的主流框架,我目前所在公司接触的项目也都是使用vue来实现的,很少有完全使用原生的JavaScript来写项目的了,下面这篇文章主要给大家介绍了关于vue中如何使用echarts和echarts-gl实现3D饼图环形饼图的相关资料,需要的朋友可以参考下2023-03-03
最新评论