我一开始这么写的:

let obj = {k:'v'};
delete obj['k']

发现dom没有更新,想来是Vue没有检测到改对象的变动,于是查了下资料:

https://blog.csdn.net/zifeiyu130/article/details/78950244

这篇文章讲的还算详细

大意就是说Vue重写了对象的getter\setter来触发dom重新渲染

如果一些js变更不是通过getter\setter来修改的话,Vue是检测不到变量变更的

Vue对于Array有重写其push、splice等方法,所以我们直接用这些重写的方法也可以触发dom刷新

对于Object,Vue提供了一些方法直接操作Object,并且决定是否渲染视图:

this.$set(target, key, val);
this.$delete(target, key);

其中this指代Vue对象


Vue中遍历Object也很简单:

<div v-for="(value,key) in obj"></div>
与遍历数组一样,是value在前,key在后,只不过数组中的key是index
Logo

前往低代码交流专区

更多推荐