vue中this.$nextTick()的使用
寫再前面：剛從事這行時(shí)嘉蕾，年少輕狂仰税，啥不懂缘圈，拿到需求就是猛干蹲坷，很少去思考些原理性的東西徐紧，腦海中沒(méi)有一個(gè)大致的框架挟鸠，從頭寫到尾意乓，寫的賊爽拆檬，其實(shí)這是很忌諱的∩统伲現(xiàn)在寫代碼屡贺，思考八分鐘，寫二分鐘锌杀。整理出一個(gè)通順?biāo)悸泛苤匾φ唬芗芍M拿著別人代碼就是一通復(fù)制粘貼。不逼逼了糕再，很晚了量没，寫完差不多洗洗睡了。
先看一個(gè)例子吧：
<template>
<section>
<div ref="hello">
<h1>Hello World ~</h1>
</div>
<el-button type="danger" @click="get">點(diǎn)擊</el-button>
</section>
</template>
<script>
export default {
methods: {
get() {
}
},
mounted() {
console.log(333);
console.log(this.nextTick(() => {
console.log(444);
console.log(this.refs['hello']);
this.refs['hello']);
});
}
}
</script>
從上面的結(jié)果你能看出啥突想？
可以看出殴蹄，在created函數(shù)中console.log(this.nextTick(callBack)函數(shù)里面的this.
nextTick里面是一個(gè)回調(diào)函數(shù)，當(dāng)頁(yè)面加載完之后會(huì)回頭來(lái)執(zhí)行绑嘹。
如果你不理解vue的生命周期函數(shù)稽荧，那我先講下吧，清楚的繞過(guò)工腋。
生命周期函數(shù)
created--->mounted--->activated--->destory
1.created: 期間不進(jìn)行DOM的渲染姨丈。只做前期的數(shù)據(jù)初始化畅卓。只執(zhí)行一次。
2.mounted：將編譯好的HTML掛載到頁(yè)面后執(zhí)行的函數(shù)构挤。只執(zhí)行一次髓介。一般用來(lái)進(jìn)行異步數(shù)據(jù)的加載，例如Ajax等網(wǎng)絡(luò)請(qǐng)求筋现。
3.activated：每次進(jìn)入頁(yè)面都執(zhí)行唐础。
說(shuō)到這，我講下keep-alive吧矾飞，這個(gè)是一個(gè)持久化的標(biāo)簽一膨，就是瀏覽器會(huì)幫你緩存這些組件。緩存意味著下次進(jìn)入不在渲染DOM洒沦。
