vue3数组操作学习

Vue2.0、传统操作数组

var arr = [1,2,3,4];
//如果想添加一个元素
arr.push(5); // 现在arr已经改变为[1,2,3,4,5]
//如果想取第一个个值,按照索引，或者自定义的
var index = 1;
console.log(arr[index])  // 输出2

Vue3操作数组

vue3里面的数组定义的响应式数据需要用 .value 的形式来取数据。

//vue3.0需要引入ref或者reactive来定义数据
var arr = ref([])
// 添加一个元素
arr.value.push(1); // 输出为[1]
//取值同样需要用.value, 假如有一个数组[1,2,3,4,5]取第三项可以
arr.value[2] // 输出为3

假设另一个场景， 索引是自己定义的响应式数据,按照自己定义的索引来取数据

var index = ref(2);
var arr = ref([1,2,3,4,5])
// 取arr的索引为index的数据
console.log(arr.value[index.value])	// 输出3

不难看出vue3.0取数组和传统操作数组是有区别的，所有的取值和改值都需要用.value实现！
你学废了么？