Vue生命周期与Vue.nextTick()使用
实例生命周期:
文章图片
https://segmentfault.com/a/1190000008570622.jpg
文章图片
image.png 【Vue生命周期与Vue.nextTick()使用】
-
beforeCreate
:在实例初始化之后,数据观测data observer(props、data、computed
) 和event/watcher
事件配置之前被调用。 -
created
:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event
事件回调。然而,挂载阶段还没开始,$el
属性目前不可见。 -
beforeMount
:在挂载开始之前被调用:相关的render
函数首次被调用。 -
mounted
:el
被新创建的vm.$el
替换,并挂载到实例上去之后调用该钩子。 -
beforeUpdate
:数据更新时调用,发生在虚拟DOM
重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。 -
updated
:无论是组件本身的数据变更,还是从父组件接收到的props
或者从vuex
里面拿到的数据有变更,都会触发虚拟DOM
重新渲染和打补丁,并在之后调用updated
。 -
beforeDestroy
:实例销毁之前调用。在这一步,实例仍然完全可用。 -
destroyed
:Vue
实例销毁后调用。调用后,Vue
实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
created
阶段的ajax
请求与mounted
请求的区别:前者页面视图未出现,如果请求信息过多,页面会长时间处于白屏状态。单个组件的生命周期
- 初始化组件时,仅执行了
beforeCreate/Created/beforeMount/mounted
四个钩子函数 - 当改变data中定义的变量(响应式变量)时,会执行
beforeUpdate/updated
钩子函数 - 当切换组件(当前组件未缓存)时,会执行
beforeDestory/destroyed
钩子函数 - 初始化和销毁时的生命钩子函数均只会执行一次,
beforeUpdate/updated
可多次执行
在下次获取更新后的DOM
更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM
。
DOM
言外之意就是什么操作需要用到了更新后的DOM
而不能使用之前的DOM
或者使用更新前的DOM
会出问题,所以就衍生出了这个获取更新后的 DOM
的Vue
方法。所以放在Vue.nextTick()
回调函数中的执行的应该是会对DOM
进行操作的 js
代码,比如Swiper扩展包的:var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
什么时候需要用
Vue.nextTick()
:- 你在
Vue
生命周期的created()钩子函数进行的DOM
操作一定要放在Vue.nextTick()
的回调函数中。原因是什么呢,原因是在created()
钩子函数执行的时候DOM
其实并未进行任何渲染,而此时进行DOM
操作无异于徒劳,所以此处一定要将DOM
操作的js
代码放进Vue.nextTick()
的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM
挂载和渲染都已完成,此时在该钩子函数中进行任何DOM
操作都不会有问题 。 - 在数据变化后要执行的某个操作,当你设置
vm.someData = 'https://www.it610.com/article/new value'
,DOM
并不会马上更新,而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM
更新。如果此时你想要根据更新的DOM
状态去做某些事情,就会出现问题。。为了在数据变化之后等待Vue
完成更新DOM
,可以在数据变化之后立即使用Vue.nextTick(callback)
。这样回调函数在DOM
更新完成后就会调用。 -
mounted
不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用vm.$nextTick
替换掉mounted
:
mounted: function () {
this.$nextTick(function () {// Code that will run only after the
// entire view has been rendered
})
}
参考文章:
https://mp.weixin.qq.com/s/4ukhHAcMQN07y0ssYqUeuA
https://segmentfault.com/a/1190000008570622
https://segmentfault.com/a/1190000008570874
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 活着就是生命的全部意义
- 生命过客——第10章|生命过客——第10章 初为人母
- 生命的活力!2019-05-04好事
- 生命中最迷人的部分轻拿轻放
- 日更82/365珍视生命中的每一刻
- VueX--VUE核心插件
- 克里希那穆提《生命书》新译(8月15日)(心与念的二元分裂)
- 投资最重要的事之七——关注周期