nextTick和Vue生命周期
先看一段代码，这是通用轮播图组件的部分代码
watch: {
//监听carouselList状态发生变化
carouselList: {
//carouselList状态发生变化了
immediate:true,
handler() {
this.$nextTick(() => {
new Swiper(this.$refs.swiper, {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable:true
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
}
});
});
},
},
}这段代码的其他知识点我前面都写过了，这里出现一个新的知识点:nextTick
对于nextTick官方是这么解释的：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
这句话我是这么理解的，数据改变了，但是数据还得在dom中渲染，渲染结束后获得新的dom节点再调用nextTick，进行下一步操作
调用方法有两种：
1.Vue.nextTick() 这种是全局的方法
2.this.$nextTick() 这种是调用绑定的实例
其实这两种差不多，我个人更喜欢第二种，至于原因自然是不想在组件实例上再引入vue了
为啥有nextTick的出现，这就有必要讲讲Vue生命周期了，Vue官网有一张图就是讲Vue生命周期的，当然都是英文写的，所以我就在网上找了一张别人注释过的图，我觉得注释的挺好的
Vue生命周期.png
由此可见，vue的生命周期有八个阶段
1 beforeCreate(创建前)：在该阶段组件未创建，不能访问数据，组件中的 data，ref 均为 undefined。
2 created(创建后)：这个阶段组件建立完成，但是还未渲染成HTML模板，组件中的data对象已经存在，可以对data进行操作了
3 beforeMount(挂载前):这个阶段编译模板结束，虚拟dom已经存在
4 mounted(挂载后)：这个阶段页面挂载完成，真实dom节点已经挂载在页面上了， 但是不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 this.$nextTick：
5 beforeUpdate(更新前)：页面数据更新之前，监听数据的改变，并且可以获取到最新的数据，但是不会更新页面的数据
6 updated(更新后)：这个阶段数据更新完成，dom树已经完成更新，可以拿到dom节点了
7 beforeDestroy(销毁前)：销毁前，这个阶段组件还是能用的
8 destroyed(销毁后)：组件销毁了，生命周期结束
作者：glassUp
链接：https://www.jianshu.com/p/a87344285b72