this.$nextTick在下次 DOM 更新循环结束之后执行延迟回调

Vue.nextTick 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

最近在使用百度编辑器的时候，发现数据渲染失败。原因是因为在使用uParse('#content',{rootPath:'/static/ueditor'})时候，数据并没有全部渲染。

<template>
	<div class="body-bg">
		<div class="page-size">
			<blog-nav :navList="navList" :tabList="tabList" :leftType="2" />
			<div>
				<h1>{{row.title}}</h1>
				<div id="content" v-html="row.content"></div>
			</div>
		</div>
	</div>
</template>

<script>
import Nav from "@/components/Nav";

export default{
	data(){
		return {
			navList: [
				{id: 1,iconfont: '&#xe660;',title: 'Blog'},
				{id: 2,iconfont: '&#xe768;',title: 'Music'},
				{id: 3,iconfont: '&#xeb14;',title: 'interflow'},
				{id: 4,iconfont: '&#xe61f;',title: 'Me'}
			],
			tabList: [
				{id:1,title:'HTML',bgColor:'#C7CA56'},
				{id:2,title:'CSS',bgColor:'#FFD562'},
				{id:3,title:'JS',bgColor:'#F9B462'},
				{id:4,title:'JQuery',bgColor:'#42BEA7'}
			],
			row: []
		};
	},
	components: {
		"blog-nav": Nav
	},
	created(){
		let id = this.$route.query.id;
		this.util.getRowArt(id,this);
	},
	mounted(){
		// setTimeout(() => {
		// 	uParse('#content',{rootPath:'/static/ueditor'});
		// }, 3000);
	},
	watch:{
		row: function(){
			this.$nextTick(function(){
				uParse('#content',{rootPath:'/static/ueditor'});
			});
		}
	},
	methods: {}
}
</script>

<style scoped >
.body-bg{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #E9E2D4;
}
.page-size{
	position: relative;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	height: 100%;
}
</style>