vue中this.$nextTick()的使用

vue中this.$nextTick()的使用

写再前面：刚从事这行时，年少轻狂，啥不懂，拿到需求就是猛干，很少去思考些原理性的东西，脑海中没有一个大致的框架，从头写到尾，写的贼爽，其实这是很忌讳的。现在写代码，思考八分钟，写二分钟。整理出一个通顺思路很重要，很忌讳拿着别人代码就是一通复制粘贴。不逼逼了，很晚了，写完差不多洗洗睡了。

先看一个例子吧：

<template>
<section>
<div ref="hello">
<h1>Hello World ~</h1>
</div>
<el-button type="danger" @click="get">点击</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>

image.png

从上面的结果你能看出啥？

可以看出，在created函数中console.log(this.nextTick(callBack)函数里面的this.nextTick里面是一个回调函数，当页面加载完之后会回头来执行。

如果你不理解vue的生命周期函数，那我先讲下吧，清楚的绕过。

生命周期函数

created--->mounted--->activated--->destory

1.created: 期间不进行DOM的渲染。只做前期的数据初始化。只执行一次。

2.mounted：将编译好的HTML挂载到页面后执行的函数。只执行一次。一般用来进行异步数据的加载，例如Ajax等网络请求。

3.activated：每次进入页面都执行。

说到这，我讲下keep-alive吧，这个是一个持久化的标签，就是浏览器会帮你缓存这些组件。缓存意味着下次进入不在渲染DOM。