刷新子组件

用户点击查看&＃xff0c;将编号传入&＃xff0c;之后展示与编号相关的那条信息。
但是 子组件只创建一次&＃xff0c;不刷新。导致 点击不同的 查看按钮&＃xff0c;显示出来的dialog框中的内容都是第一次点击内容。

解决方案&＃xff1a;
利用 v-if&＃xff08;销毁和重建&＃xff09;可以强制刷新子组件

<el-dialog title&＃61;"查看" :visible.sync&＃61;"dialogFormVisible" destroy-on-close>//需要销毁重建的组件<edit-form v-if&＃61;"forceRefresh"></edit-form>
</el-dialog>//触发事件
handleNoAnswer(index, row) {//forceRefresh 变量需要在data&＃xff08;&＃xff09; 中申明一下this.forceRefresh &＃61; falseconsole.log(index, row)console.log(row.id)localStorage.setItem("ArticleNO",row.id);//强制刷新this.$nextTick(() &＃61;> {this.forceRefresh &＃61; truethis.dialogFormVisible &＃61; true})},


原理

Vue的重要概念&＃xff1a;异步更新队列。
Vue在观察到数据变化时并不是直接更新DOM&＃xff0c;而是开启一个队列&＃xff0c;并缓冲在同一事件循环中发生的所有数据改变。 Vue 异步执行 DOM 更新。只要观察到数据变化&＃xff0c;Vue 将开启一个队列&＃xff0c;并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发&＃xff0c;只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后&＃xff0c;在下一个的事件循环“tick”中&＃xff0c;Vue 刷新队列并执行实际。

也就是说&＃xff1a;Vue监听到数据变化但是不会立马直接更新试图&＃xff0c;而是先建立一个队列&＃xff0c;把跟这个数据有关的所有dom节点放进去&＃xff0c;直到在下一个的事件循环“tick”中&＃xff0c;Vue才 刷新队列并执行实际 (已去重的) 工作。重点来了&＃xff0c;当所有dom 更新后&＃xff0c;会触发nextTick回调函数。也就是说dom更新之后 nextTick&＃xff08;&＃xff09;被调用了&＃xff01;

nextTick&＃xff08;&＃xff09;的作用是&＃xff1a;将回调延迟到DOM 更新循环之后执行。在修改数据时立即使用它&＃xff0c;然后等待 DOM 更新&＃xff0c;便可达到获取 更新后的节点 的目的。