Vue 组件生命周期

        每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

        组件的生命周期分为四个阶段:create(创建)、mount(挂载)、update(更新)、destroy(销毁) 。每个阶段有"之前"、"之后"两个,总共有 8 个生命周期钩子函数。

Vue 生命周期示意图:

生命周期函数 

beforeCreate:

  1. 刚初始化了一个 Vue 空的实例对象;
  2. data methods 还没有初始化;
  3. 真实 DOM 没有渲染出来;

created

  1. 组件创建结束;
  2. 可以操作 data 数据,和调用 methods 方法
  3. 进行ajax请求异步数据的、初始化数据
  4. 真实 DOM 没有渲染出来;

beforeMount

  1. 模板编译好了,尚未挂载到页面;
  2. 真实 DOM 没有渲染出来;

mounted

  1. 组件挂载好了;
  2. 可以进行真实dom的操作

beforeUpdate

  1. data 数据更改后触发;
  2. 可以触发多次,只要数据更新就会触发;

updated

  1. 页面更新完成时触发;
  2. 可以触发多次,只要数据更新就会触发;

beforeDestroy

  1. 销毁前触发;
  2. vue 实例上 datamethods,指令等处于可用状态;
  3. 可以执行计时器的关闭,第三方实例的删除

destroyed

  1. 销毁后触发;
  2. vue 实例上 datamethods,指令等处于不可用状态;

keep-alive

        添加 keep-alive 标签后会增加 activateddeactivated 这两个生命周期函数,初始化操作放在 actived 里面,一旦切换组件,因为组件是缓存的而没有被销毁,所以它不会执行销毁阶段的钩子函数,所以移除操作需要放在 deactived 里面,在里面进行一些善后操作,这个时候 created 钩子函数只会组件首次加载时执行一次,销毁的钩子函数一直没有执行。

        activated(组件激活时):被 keep-alive 缓存的组件激活时调用,可以初始化一些数据。

        deactivated(组件停用时):被 keep-alive 缓存的组件停用时调用。在deactived里面,在里面进行一些善后操作。

nextTick()

        在下次 DOM 更新循环结束之后执行回调。在修改数据之后使用 nextTick,则可以在回调中获取更新后的 DOM ,简单理解:数据更新了,在 DOM 渲染完成后调用该函数。

        注意:在 Vue 生命周期的 created() 钩子函数进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中。 在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的 DOM结构的时候,这个操作都应该放进 Vue.nextTick() 的回调函数中。

你可能感兴趣的:(Vue,vue)