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中的ref 和 reactive 定义数组相关推荐

在php中可以使用几种方法定义数组,PHP中数组定义的几种方法
在php.html" target="_blank">php和其他编程语言中,需要常常使用数组创建,我们在前端开发中,js的数组创建可以由new array创建,下 ...
Vue3.x 使用ref和reactive、toRef
文章目录一.使用ref 1. 引入 2. 定义ref变量 3. 赋值+.value 4. return 返回值 5. 将数据渲染到页面二.使用reactive 和 toRef 1. 引入 2. 定 ...
vue3中的ref，toRef，toRefs三个的作用
1. ref的使用 ref 接受一个原始值,返回一个具有响应式的对象,对象有一个value属性,其值就是所传递的原始值. ref是做的一个拷贝关系,修改对象msg的值,不会影响对象obj,视图会发生变 ...
Vue3中自定义ref
文章目录使用ref 使用customRef自定义ref 使用ref main.js import { createApp } from 'vue' import App from './App.vu ...
【Vue3】李南江老师讲解--个人笔记（二）ref 和 reactive详解
[vue3笔记之 ref 和 reactive ] 实现响应式数据的方法可以使用 ref,reactive定义响应式数据,本质上就是将传入的数据包装成一个Proxy对象. 使用 reactive 必 ...
ref，reactive toRaw
ref() 在vue3.0引入了composition API , setup函数是其核心函数在setup函数中,可以使用ref函数,用于创建一个响应式数据,当数据发生改变时,Vue会自动更新UI ...
ref、 reactive、toref、torefs的用法，区别
ref. reactive.toref.torefs的用法,区别 ref 接受一个内部值并返回一个响应式且可变的 ref 对象.ref 对象仅有一个 .value property,指向该内部值 co ...
ref和reactive区别
ref是什么类型变量都可以定义,而reactive只能定义数组和对象比如 ref定义字符串 //定义 const msg=ref("hellow world");// //事件调 ...
vue3.x通过ref属性获取元素
在vue2.x中,可以通过给元素添加ref='xxx'属性,然后在代码中通过this.$refs.xxx获取到对应的元素然而在vue3中时没有$refs这个东西的,因此vue3中通过ref属性获取元 ...

vue3中的ref 和 reactive 定义数组

1、ref 定义数组

2、reactive 定义数组

vue3中的ref 和 reactive 定义数组相关推荐

最新文章

热门文章