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里用 ref 的数组定义的响应式数据需要用 .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

对比一下ref、reactive的区别

从官方给的定义来讲 ref 是用来定义单一形式的数据，reactive是用来定义复杂形式的数据，比如对象、数组等

			// 如果我们想取某个索引的值
            var arr = ref([1, 2, 3, 4, 5])
            console.log(arr[2])         // 输出 undefined	
            console.log(arr.value[2])   // 输出	3

            var arr1 = reactive([1, 2, 3, 4, 5])
            console.log(arr1[2])	    // 输出 3
            console.log(arr1.value[2])	// 输出 报错

不难看出ref如果定义的变量需要用 .value 的形式取值/赋值，直接用 .Obj 得到的是undifined，
reactive：可以通过传统的数组方法操作，通过.Obj的形式就能取到值，用.value的方式会报错。

你学废了么？