vue生命周期 · 常用笔记

# vue生命周期 ![](https://img.kancloud.cn/90/cb/90cb5630328af50ea5a26f8b38709fd1_468x1186.png) ### [beforeCreate](https://cn.vuejs.org/v2/api/#beforeCreate "beforeCreate") - **类型**：`Function` - **详细**：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用 ### [created](https://cn.vuejs.org/v2/api/#created "created") - **类型**：`Function` - **详细**：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，`$el`property 目前尚不可用。 ### [beforeMount](https://cn.vuejs.org/v2/api/#beforeMount "beforeMount") - **类型**：`Function` - **详细**：在挂载开始之前被调用：相关的`render`函数首次被调用。 **该钩子在服务器端渲染期间不被调用。** ### [mounted](https://cn.vuejs.org/v2/api/#mounted "mounted") - **类型**：`Function` - **详细**：实例被挂载后调用，这时`el`被新创建的`vm.$el`替换了。如果根实例挂载到了一个文档内的元素上，当`mounted`被调用时`vm.$el`也在文档内。注意`mounted`**不会**保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在`mounted`内部使用[vm.$nextTick](https://cn.vuejs.org/v2/api/#vm-nextTick)： ``` <pre class="calibre14">``` mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) } ``` ``` **该钩子在服务器端渲染期间不被调用。** ### [beforeUpdate](https://cn.vuejs.org/v2/api/#beforeUpdate "beforeUpdate") - **类型**：`Function` - **详细**：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 **该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。** ### [updated](https://cn.vuejs.org/v2/api/#updated "updated") - **类型**：`Function` - **详细**：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用[计算属性](https://cn.vuejs.org/v2/api/#computed)或[watcher](https://cn.vuejs.org/v2/api/#watch)取而代之。注意`updated`**不会**保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在`updated`里使用[vm.$nextTick](https://cn.vuejs.org/v2/api/#vm-nextTick)： ``` <pre class="calibre13">``` updated: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been re-rendered }) } ``` ``` **该钩子在服务器端渲染期间不被调用。** ### [activated](https://cn.vuejs.org/v2/api/#activated "activated") - **类型**：`Function` - **详细**：被 keep-alive 缓存的组件激活时调用。 **该钩子在服务器端渲染期间不被调用。** - **参考**： - [构建组件 - keep-alive](https://cn.vuejs.org/v2/api/#keep-alive) - [动态组件 - keep-alive](https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive) ### [deactivated](https://cn.vuejs.org/v2/api/#deactivated "deactivated") - **类型**：`Function` - **详细**：被 keep-alive 缓存的组件停用时调用。 **该钩子在服务器端渲染期间不被调用。** - **参考**： - [构建组件 - keep-alive](https://cn.vuejs.org/v2/api/#keep-alive) - [动态组件 - keep-alive](https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive) ### [beforeDestroy](https://cn.vuejs.org/v2/api/#beforeDestroy "beforeDestroy") - **类型**：`Function` - **详细**：实例销毁之前调用。在这一步，实例仍然完全可用。 **该钩子在服务器端渲染期间不被调用。** ### [destroyed](https://cn.vuejs.org/v2/api/#destroyed "destroyed") - **类型**：`Function` - **详细**：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。 **该钩子在服务器端渲染期间不被调用。** # 补充知识点 ``` <pre class="calibre13">``` created钩子可以获取Vue的data，调用Vue方法，获取原本HTML上的直接加载出来的DOM，但是无法获取到通过挂载模板生成的DOM ``` ``` ``` <pre class="calibre13">``` **3.beforeMount** 在挂载开始之前被调用：相关的 render 函数（模板）首次被调用。例如通过v-for生成的html还没有被挂载到页面上 ``` ``` ``` <pre class="calibre13">``` **4.mounted** el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。有初始值的DOM渲染，例如我们的初始数据list,渲染出来的li，只有这里才能获取 ``` ``` ``` <pre class="calibre13">``` **5.beforeUpdate** 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。当我们更改Vue的任何数据，都会触发该函数 ``` ``` ``` <pre class="calibre13">``` **6.updated** 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。数据更新就会触发（vue所有的数据只有有更新就会触发）,如果想数据一遍就做统一的处理，可以用这个，如果想对不同数据的更新做不同的处理可以用nextTick，或者是watch进行监听 ``` ``` ``` <pre class="calibre13">``` **7.beforeDestroy** 实例销毁之前调用。在这一步，实例仍然完全可用。 ``` ``` ``` <pre class="calibre14">``` **8.destroyed** Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。 ``` ```