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(销毁后)：组件销毁了，生命周期结束