Vue3初探之ref、reactive以及改变数组的值

下面就是关于Vue3初探中的ref、reactive以及如何改变数组的值的详细攻略。

什么是ref和reactive

在Vue3中，ref和reactive都是用来存储响应式数据的。其中，ref可以用来存储单个数据，而reactive可以用来存储一个对象中的多个数据。

ref

import { ref } from 'vue';

const count = ref(0);

console.log(count.value); // 0
count.value = 1;
console.log(count.value); // 1

在上面的例子中，我们使用Vue3中的ref函数来创建一个响应式的数据count，并且通过count.value来获取或者修改这个数据。

reactive

import { reactive } from 'vue';

const obj = reactive({
  name: 'Vue3',
  version: 3,
});

console.log(obj.name); // Vue3
console.log(obj.version); // 3

obj.name = 'Vue3.0';
console.log(obj.name); // Vue3.0

在上面的例子中，我们使用Vue3中的reactive函数来创建一个响应式的对象obj，并且可以通过obj.name和obj.version来获取或者修改其中的数据。

如何改变数组的值

在Vue3中，如果我们要改变一个数组中的某个值，可以使用Vue3中提供的set函数和splice函数。

set函数

import { reactive, toRefs } from 'vue';

const state = reactive({
  list: ['A', 'B', 'C'],
});

set(state.list, 0, 'D');

console.log(state.list); // ['D', 'B', 'C']

在上面的例子中，我们使用Vue3中的set函数来修改state.list数组中的第一个值，将其从A改为了D。

splice函数

import { reactive } from 'vue';

const state = reactive({
  list: ['A', 'B', 'C'],
});

state.list.splice(0, 1, 'D');

console.log(state.list); // ['D', 'B', 'C']

在上面的例子中，我们使用Vue3中的splice函数来修改state.list数组中的第一个值，将其从A改为了D。

总结

在Vue3中，ref和reactive都是用来存储响应式数据的，如果要改变一个数组中的值可以使用Vue3中提供的set函数和splice函数。