zl程序教程

您现在的位置是:首页 >  其他

当前栏目

vue3 中如何实现数组响应式

2023-03-07 09:06:28 时间

vue3 中如何实现数组响应式,即数据更改,页面实时更新?

type dateObj = {
  title: String;
days: Number;
date: String;
};
  • 方法一:ref
let dataList = ref([] as dateObj[]);
// 通过 dataList.value 来修改数组数据
  • 方法二:reactive

1. 不是直接通过给 reactive 传数组,需要先传一个对象,对象中定义一个新的 key 作为响应式数组

let dataList = reactive({
        dataList1: [] as dateObj[],
    });
// 通过 dataList.dataList1 来修改数组

2. 直接给 reactive 传数组无法实现数组响应式

let dataList: dateObj[] = reactive([]);