一个案例带你走完Vue的生命周期
八种生命周期
Vue的生命周期一直都是Vue的重点，下面就是Vue的生命周期图示：
作为一名初学者，你可能还并不能完全理解该图，但不要着急，我会通过一个小例子，带你了解Vue的生命周期这一整个过程。
<body>
<div class="app">
<button @click="username=xw">激活update</button>
{
{
username}}:{
{
list}}
</div>
</body>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el: .app,
data: {
username: "抗争的小青年"
},
beforeCreate() {
console.log(`beforecate:${
this.username}`);
console.log(`beforecate:${
this.$el}`);
},
created() {
this.list = "aaa"
console.log(`created: ${
this.username}`);
console.log(`created: ${
this.$el}`);
},
beforeMount() {
console.log(this.$el);
},
mounted() {
console.log(this.$el);
},
beforeUpdate() {
console.log(this.$el);
},
updated() {
console.log(this.$el);
}
})
你可能注意到在上面的例子中，我用到了8个钩子函数中的6个。另外两个会在另外一个例子中体现。
🌴beforeCreate
这是创建实例之前执行的钩子函数，此时你访问Vue实例中的属性时，输出undefined。
🌴created
这是实例创建完成的钩子函数，此时Vue实例中的状态已经可以访问，但页面还没有开始渲染。
在这个阶段，我使用this.list = "aaa"，创建了一个list,但是请注意，它是无法响应式的，因为数据绑定是指定Vue实例创建之前就存在的状态。我们在created阶段添加的属性没有挂载拦截器，所以无法响应式。
🌴beforeMount
此时编译渲染el的模板，并转成HTML。但注意，此时数据还没有渲染，Vue一些语法还没有起作用。
🌴mounted
此时页面的基本DOM就渲染完成了。在一般的开发中，我们可以在此步发送Ajax请求，或者使用相关插件。但是请注意，这个事件只执行一次。
🌴beforeUpdate
当Vue的状态发生改变时，就会触发Update，这也就意味着我们之前在created阶段添加的list属性的修改不会触发Update。可重复执行
🌴updated
这是更新后的钩子事件。可重复执行
此时你尝试着修改list的值，你会发现不会触发此钩子函数
🌲beforeDestroy
销毁实例前，此时该组件相关的子组件，监听事件等还没有删除。
🌲destroyed
vue实例销毁后
生命周期图示
这里是我整理的生命周期图示，可供参考
