vue的生命周期学习笔记
Vue的生命周期函数有8个，分别是：beforeCreate, created, beforeMount, mounted, beforeUpdated, updated, beforeDestroy, destroyed. 下面是个人的一些总结。
Vue 实例从创建到销毁的过程，就是生命周期。Vue的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。第一次页面加载会触发beforeCreate、created、beforeMount、mounted。
beforeCreate 在它之前刚初始化了一个空的vue实例对象，在这个阶段，实例对象身上只有默认的一些生命周期函数和默认的事件，其他的东西都未创建，在这个生命周期函数执行的 时候，data和methods中的数据都还没有初始化
<div id="app"></div> <script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello"
},
methods: {
show() {
console.log("我是show方法")
}
},
beforeCreate() {
console.log(this.msg)
this.show()
}
})
</script>
created 在created中，data和methods等都已经被初始化好了，所以如果要用到methods中的方法或者操作data中的数据，最早只能在created中操作
不知什么原因，代码编辑器用不了，改为图片
beforeMount 接着下来，vue开始编辑模板，执行vue的代码，最终会在内存中生成一个编译好的最终模板字符串，紧接着渲染为内存中的DOM，也就是说，此函数在执行的时候，只是在内存中渲染好了模板，而没有把模板挂载到真正的页面中去，这个阶段，页面还是旧的
从控制台输出的结果看，h1中的内容原本是hello的，但在这个阶段却是 {{ msg }} ，由此说明在 beforeMount 阶段模板还没有被真正替换过来，只是之前写的一些模板字符串
mounted 这个时候已经将在内存中编译好的模板，真正的替换到浏览器的页面中去，如果要操作页面上的DOM节点，最早要在mounted中进行。只要执行完了mounted，就表示整个vue实例已经初始化完毕了。此时，组件已经脱离了创建阶段，进入到了运行阶段
组件运行阶段的生命周期函数只有两个，beforeUpdate和updated，这两个事件会根据data数据的改变，有选择的触发0次或者多次。
beforeUpdate 当执行beforeUpdate的时候，页面中显示的数据还是旧的，不过这个时候data中的数据是最新的，页面尚未和最新的数据保持同步
从控制台输出的结果看，这个阶段数据已经被更新了，但是我们的界面还没有被更新
updated 到达这个时候，会先根据data中最新的数据， 在内存中重新渲染出一份最新的DOM树，更新完后紧接着把这份最新的DOM树重新渲染到真实的页面中去，这样就完成了data（model层）到view（视图层）的更新。updated事件执行的时候，页面和data中的数据已经保持同步了，都是最新的了
beforeDestroy 当执行beforeDestroy的时候，vue实例就已经从运行阶段，进入到了销毁阶段。这个时候实例身上的data和methods以及component等等都处于可用状态，还没有真正执行销毁的过程
destroyed 当执行到destroyed函数的时候，组件已经被完全销毁了，此时组件中的data,methods等等都已经不可用了
以上是 vue的生命周期学习笔记 的全部内容， 来源链接： utcz.com/z/376542.html
