前言:
在开发过程中,动态分配值,但dom可能不会立即更新,可以动态检索分配的值,但可能无法检索双向绑定的dom节点。 在这种情况下,必须手动强制更新组件。
官方网站说:
可能还不能理解,请继续往下看。 介绍了我的一个例子,详细解说了该方法的使用。
最初的打印结果
第二个打印结果
一、问题说明:父组件在v-for中渲染子组件,删除子组件中的数据时发生异常。
二、问题原因:发生异常的数据不是响应性依赖,而是从vuex读取的。 测试表明,父组件删除了数据,但没有重新创建子组件。 怀疑子组件异常的数据是读取的缓存副本。
三、解决问题:通过v-if改变dom结构的特性,手动重新创建子组件。
1 .设置数据变量isrefresh=true
2 .初始v-if=isrefresh
3 .删除时,结合$nextTick () DOM渲染回调函数并重新创建子组件
/* * * * * * * * * * * * * * * * * *
PS:vue强制刷新子部件
将一个组件重置为初始状态是常见的需要,建议的方法有两种。 一个是暴露父组件如何重置子组件的prop,另一个是暴露父组件如何重置以进行调用。 但是,在某些情况下,子组件既没有提供重置方法,也没有提供重置自己状态的prop。 更重要的是,该子组件仍然不动。 因此,需要用于将子组件复位为初始状态的hack方式。 方法如下。
//原理在采用v-if时,组件被丢弃并重新绘制,组件被重新加载
//子组件:自己封装的组件
ref='IncomeStatisticsChild '
//然后用父组件内的追加删除重新评估方法操作即可
this.destroyincomestatistics=false;
//而且在你的方法成功之后
实现//Vue响应表达式并不是在数据改变时立即改变DOM,而是根据一定的策略更新DOM。
//vue的深响应式原理有说明:
//$nextTick可以在下一个DOM更新周期结束后执行延迟回调,并在更改数据后使用$nextTick获取用回调更新的DOM
this.$nextTick () )={
this.destroyincomestatistics=true;
);
//这样就完成了强制刷新
希望以上是正文的全部内容,对大家的学习有帮助。 另外,我希望你支持很多编剧。