VUE3下针对数组类型的数据更新方法
2022年7月19日
在使用vue3语法对某个定义的数组变量进行更新时，需要注意更新的方式方法，避免数据更新后页面未及时响应更新。
|
1 2 3 4 5 6 7 8 9 |
// 定义一个响应式对象。类型为数组 const array = ref([]) // 模拟调用后台接口获取数据 list().then((data)=>{ //为了保证数组的值变更后能及时更新template模板内容。需要先将数组的长度设置为0 array.value.length = 0 // 再重新赋值 array.value = data }) |
通过先设置数组的length值为0，再重新赋值给数组这种方式保证了页面的数据会及时响应。否则直接赋值给数组，虽然从js变量上来说数据发生了变化。但是页面数据并未及时更新，根本原因是vue的响应式计算逻辑未生效导致template当中的数据未发生变化
About The Author
