vue在开发中想要刷新标签重新渲染的问题，($nextTick + setTimeout）

如题，当在vue开发中当你用其他组件需要做demo操作时，你改变了其中的数据并重新触发想要更新时，你发现他的数据不是覆盖而是叠加上去了

比如 在一个 组件标签id = xxx中 他保存的数组是根据[1,2,3,4]的数据渲染时，当你改变数据重新触发方法，因为组件的缺陷他并不是覆盖而是直接再次获取标签 id = xxx 进行数据操作这次是[5,6,7,8]时，他组件所渲染的就是一个合并的数据[1,2,3,4,5,6,7,8]导致组件渲染图片或者解析出错。（当然一般组件都提供编辑方法会使视图也跟着更新，这里只是针对这种迫不得已使用组件提供方案）

（以上仅作为例子思想）

当你觉得说我用 if else 控制标签，因为v-if 是将组件重新刷新当它刷新完再调用方法让他进行操作就好了。那下面就是例子

// 标签是这样子的
<view v-if="show" id="viewport"  />

// 切换
			cut () {
				this.show = false
				this.show = true
				console.log('父组件响应')
				let da = [5,6,7,8]
				// 然后调用组件方法 进行组件初始化
				this.initializeFn();
			},

此时你会发现，页面并没有你想象中的重新渲染。 这是为什么呢？

这里我的理解是：
一、vue 如果 你两个相同的组件 比如

 <div v-if='show'></div>
 <div v-else></div>

这两个标签会被复用成一个标签。( 不想被复用那就加个 key值就行)
但是上面是同一个标签，我的理解是因为它还是被复用了。
此时你就会想 那我加个 setTimeout吧

cut () {
				this.show = false
				setTimeout(() => {
					this.show = true
					console.log('父组件响应')
					let da = [5,6,7,8]
					// 然后调用组件方法 进行组件初始化
					this.initializeFn();
				}, 10);
			},

诶 此时你会发现，组件初始化的时候找不到标签报错了，这是为什么明明 我已经是设置show为true了再初始化的。
二、 渲染问题

我的理解是：就像你的生命周期 create的时候 你是获取不到 标签的DOM树进行操作的，所以一般你都会写在 mounted 等加载完成后再进行操作对吧。当你改变了数据的同时，DOM数也在同时进行渲染，这个时候你获取DOM就会报错，获取不了导致渲染失败。

这个时候 就用到**$nextTick**，这个函数就是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。这就解决了 他们同时执行导致的错误。

所以可以写成:

  cut () {
				this.show = false
				setTimeout(() => {
					this.show = true
					console.log('父组件响应')
					let da = [5,6,7,8]
					// 然后调用组件方法 进行组件初始化
					this.$nextTick(() => {
						this.initializeFn();
					})
				}, 10);
			},

这可能有其他更好的方法，只是简单的提供一个方案。如果有什么错误的地方欢迎指出。

一个面向BUG开发的程序猿