Vue实例生命周期 -- 2019-08-08 18:01:29
Posted gqy02
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue实例生命周期 -- 2019-08-08 18:01:29相关的知识，希望对你有一定的参考价值。
目录
原文: http://106.13.73.98/__/53/
有时候，我们需要在实例创建过程中进行一些初始化的工作，以帮助我们完成项目中更复杂更丰富的需求开发，针对这样的需求，Vu e提供给我们一系列的钩子函数。
本文将详细介绍Vue实例在创建和销毁的过程中我们可以使用的钩子函数。
这是官方文档提供的Vue实例生命周期图，我们结合这张图来进行钩子函数的解析。
@
***
实例创建之前执行——beforeCreate
==除标签外，所有的vue需要的数据(data)、事件(methods)、标签(el)都不存在.==
<body>
<div id="app">
name
<button @click="myClick">点击修改数据</button>
</div>
</body>打印结果如下图：
***
实例创建之后执行——created
==数据和事件被解析到，标签(el)还未被解析.==
<body>
<div id="app">
name
<button @click="myClick">点击修改数据</button>
</div>
</body>打印结果如下图：
***
挂载之前执行——beforeMount
==数据、事件、标签都已被解析，但数据还未被渲染.==
<body>
<div id="app">
name
<button @click="myClick">点击修改数据</button>
</div>
</body>打印结果如下图：
***
挂载之后执行——mounted
==开始渲染数据，开始监听事件.==
<body>
<div id="app">
name
<button @click="myClick">点击修改数据</button>
</div>
</body>打印结果如下图：
***
数据更新之前执行——beforeUpdate
==数据己被修改在虚拟DOM，但还未被渲染到页面上==
数据更新时(之前)被调用，发生在虚拟DOM打补丁之前.
适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器.
==该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行.==
<body>
<div id="app">
name
<button @click="myClick">点击修改数据</button>
</div>
</body>打印结果如下图：
***
数据更新之后执行——updated
==将虚拟DOM中的数据应用到页面上，此时真实的DOM数据被修改了.==
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子.
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之.
<body>
<div id="app">
name
<button @click="myClick">点击修改数据</button>
</div>
</body>打印结果如下图：
***
实例销毁之前执行——beforeDestroy
==所有的数据都存在.==
实例销毁之前调用，在这一步，实例仍然完全可用.
频繁地创建和销毁组件对性能的影响很大，因此可使用activated和deactivated（将在下面介绍这两个钩子）.
==该钩子在服务端渲染期间不被调用.==
<body>
<div id="app"></div>
</body>打印结果如下图：
***
实例销毁之后执行——destroyed
==所有的数据都存在（虚拟DOM找的）.==
Vue实例销毁后调用，调用后，Vue实例指示的所有东西都将会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁.
<body>
<div id="app"></div>
</body>打印结果如下图：
***
keep-alive组件激活时执行——activated
Vue提供的用来缓存被消除的标签，keep-alive组件激活时调用.
==使用activated和deactivated可分别取代取代beforeDestroy和destroyed的执行.==
==< keep-alive >包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们.==
<body>
<div id="app"></div>
</body>打印结果如下图：
***
keep-alive组件停用时执行——deactivated
<body>
<div id="app"></div>
</body>打印结果如下图：
原文: http://106.13.73.98/__/53/
以上是关于Vue实例生命周期 -- 2019-08-08 18:01:29的主要内容，如果未能解决你的问题，请参考以下文章