VUE的生命周期
VUE的声明周期
每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些神马？
Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。
1、beforeCreate（创建前）
表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。
2、created（创建后）
数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在 。
3、beforeMount（挂载前）
vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。
4、mounted（挂载后）
vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。
5、beforeUpdate（更新前）
当 data 变化时，会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。
6、updated（更新后）
当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。
7、beforeDestory（销毁前）
组件销毁之前调用 ，在这一步，实例仍然完全可用。
8、destoryed（销毁后）
组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。
例：
<body>
<div id="app">
<p>{{message}}</p>
<button @click="changeMsg">改变</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'hello world'
},
methods: {
changeMsg () {
this.message = 'goodbye world'
}
},
beforeCreate() {
console.log('------初始化前------')
console.log(this.message)
console.log(this.$el)
},
created () {
console.log('------初始化完成------')
console.log(this.message)
console.log(this.$el)
},
beforeMount () {
console.log('------挂载前---------')
console.log(this.message)
console.log(this.$el)
},
mounted () {
console.log('------挂载完成---------')
console.log(this.message)
console.log(this.$el)
},
beforeUpdate () {
console.log('------更新前---------')
console.log(this.message)
console.log(this.$el)
},
updated() {
console.log('------更新后---------')
console.log(this.message)
console.log(this.$el)
}
})
</script>
我们运行可以看到：
首次，只执行了4个生命周期，beforeCreate，created, beforeMount, mounted。
同时，我们可以看出，第一个生命周期中，我们拿不到data中的数据，因为这个时候数据还未初始化
created中，我们可以拿到data中的message数据了，因为初始化已经完成
beforeMount中，我们可以看出，我们拿到了$el，而mounted中，我们也拿到了$el。最初其实我们是会去让this.$el = new Vue时传入的那个el的dom。所以在beforMount中，其实我们拿到的就是页面中的#app。而再继续往后，首先我们会把我们的这个el（#app）编译成template模板啊，再转换为render函数，最后将render函数渲染成为真实dom，渲染成真实dom后，我们会用这个渲染出来的dom去替换原来的vm.$el。
所以， 在mounted中，我们所得到的渲染完成后的$el。
随后我们点击改变：
this.$el是一个对象，其实本质就是一个指针，当我们刚console.log输出的时候，其实并没有显示内容，而当我们点击箭头去展开这个div的时候，将指针指向了当前的$el，所以我们看到的才会都是改变后的$el。
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)