vue中何时使用Vue.nextTick()函数

写在前面的套话，来自ctrl+v:

在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

我的使用场景：效果：带有data-toggle='popover'属性的区域，鼠标悬停在其上方显示备注信息！

说明：图片中数据是通过如下的ajax请求，逐条添加在页面上的！

<table class="table table-striped table-bordered table-hover">
<thead>
   <tr>
	<th>名</th>
	<th>描述</th>
	<th>参数设置</th>
   </tr>
</thead>
<tbody>
<tr v-for="(site,index) in rows">
	<td style="vertical-align: middle">{{site.name}}</td>
	<td style="vertical-align: middle">{{site.discrib}}</td>
	<td class="center" style="vertical-align: middle">
		<form class="form-horizontal">
			<template v-for="(param,index1) in site.paramList">
				<template v-if="param.param_display_type==1">
					<div class="form-group">
						<label data-container="body"  data-placement="top" data-toggle='popover' v-bind:data-content="param.param_remark" data-trigger="hover" class="col-sm-2 control-label" >{{param.param}}:</label>
						<div class="col-sm-8">
							<input type="text"  v-model="param.value" data-container="body"  data-placement="top" data-toggle='popover' v-bind:data-content="param.param_remark" data-trigger="hover" class="form-control"/>
						</div>
					</div>
				</template> 
			</template>
		</form>
	</td>
</tr>
</tbody>
</table>

$.ajax({
    type:"post",
    data:{id:id},
    url:"<%=searchAlgoAction%>",
	success:function(result){
		self.rows.push(result);
		self.$nextTick(function () {
			$("[data-toggle='popover']").popover();
		})
	},
	error: function (message) {
		alert(message);
		}
	});

效果如下：