vue 组件是否渲染完毕_vue进阶之强制组件渲染 大深坑

首先来个前言

原来Vue的dom更新是异步的，当数据发生变化，vue并不是里面去更新dom，而是开启一个队列。跟JavaScript原生的同步任务和异步任务相同。

Vue在一个同步任务过程中是不会去更新渲染视图，而是在同步任务(事件循环队列)执行完毕之后，在主线程的同步执行完毕，读取任务队列时更新视图。

这个机制对于页面性能是非常重要的，因为我们要是每操作一个数据就更新一次视图，那么在性能上会非常差。而如果是在一次任务执行完毕之后更新视图，可以避免特别多的重复操作。

1.在开发过程中，我们很容易遇见需要先渲染数据然后操作dom

这时候就要使用vue提供的nextTick函数。

这个函数就是有了数据之后，渲染完成之后会执行，也就是说当你需要数据先渲染，然后去操作渲染完成之后的dom，要把操作dom的逻辑写在这个函数里面。

nextTick 可以与 promise 一起使用

官方定义

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。//但是：：只要我调用了 他就会执行 不管dom有没有变化

forceRerender() {//从 DOM 中删除 my-component 组件

this.renderComponent = false;this.$nextTick().then(() =>{this.renderComponent = true;

});

}

2.那么问题就来到了我们如何强制重新渲染dom

强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时，只需更 key