VUE生命周期图示
##钩子函数
钩子函数，其实和回调是一个概念，当系统执行到某处时，检查是否有hook，有则回调。说的更直白一点，每个组件都有属性，方法和事件。所有的生命周期都归于事件，在某个时刻自动执行。
Vue所有的生命周期钩子函数都是自动绑定到上下文的。所以不能使用箭头函数，箭头函数会导致this指向父级作用域
// 正确的形式
mounted: function() {
}
mounted() {
}
// 错误的形式
mounted: () => {
}
- 在new Vue()的对象过程中，执行init（vue组件里面默认去执行），在这个过程中最先调用beforeCreate
- 然后在injections（注射）和reactivity（反应性）时，会在调用created
- created执行完，会判断实例中是否有“el”option（选项）
- 没有“el”option，会调用vm.$mount(el)方法，然后执行下一步
- 有“el”option，会直接执行下一步
- 判断是否含有“template”选项，如果有的话，会将template解析成一个render方法，这是一个template编译的过程，结果解析成render函数
render (h) {
return h('div', {}, this.text)
}
/*
传参h就是vue中的createElement方法，return返回一个createElement方法，其中传三个参数，
第一个是创建的元素，
第二个是一个对象，对象里面可以是组件上面的props，或则事件之类的东西；
第三个是div标签中的内容，这里是指向data里面的text。
*/
- 在beforeMount和mounted之间，执行了render函数，在beforeMount的过程中，$el还只是一个节点，然后到mounted的时候，将这个节点挂载到DOM节点上。挂载完毕，实例也就走完整个流程了
beforeUpdate 和 updated， 以及 beforeDestory 和 destoryed 都是需要外部的触发才执行；beforeUpdate和updated在有数据的变化时，会调用，经过虚拟DOM更新完毕。当组件被销毁的时候，会调用beforeDestory以及destoryed
在使用.vue文件开发过程中，里面写template模板，经过vue-loader的处理之后，转化成render方法，最终存放在vue-loader解析的文件里面。好处是： 在解析templae变成render方法的过程，是一个非常耗时的过程。vue-loader帮忙处理了这些内容，在页面中执行vue代码效率就会变高。
beforeCreate
beforeCreate在实际开发中，用到的地方特别少，实在没遇到场景会用到beforeCreate钩子函数
// html
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
export default {
data() {
return {
msg: 'message'
}
},
beforeCreate() {
console.log(this.$el) // undefined
console.log(this.msg) // undefined
this.testCycle() // error, this.testCycle is not a function
},
methods: {
testCycle() {
console.log('test vue cycle')
}
}
}
created
实际项目中，对初始化数据，以及data和props中数据的操作可以在这个生命周期钩子函数中
// 简化代码
created() {
console.log(this.$el) // undefined
console.log(this.msg) // message
this.testCycle() // test vue cycle
}
beforeMount
beforeMount() {
console.log(this.$el) // undefined
console.log(this.msg) // message
this.testCycle() // test vue cycle
}
mounted
实际开发中，存在DOM相关操作的过程会在mounted生命周期钩子函数写
mounted() {
console.log(this.$el) // <div><h1>message</h1></div>
console.log(this.msg) // message
this.testCycle() // test vue cycle
}
beforeUpdate
// html
<template>
<div>
<h1>{{ msg }}</h1>
<button @click="handleClick">click</button>
</div>
</template>
export default {
beforeUpdate() {
console.log(this.$el) // <div><h1>修改msg数据</h1></div>
console.log(this.msg) // 修改msg数据
},
methods: {
handleClick() {
this.msg = '修改msg数据'
}
}
}
updated
<template>
<div>
<h1>{{ msg }}</h1>
<button @click="handleClick"></button>
</div>
</template>
export default {
updated() {
console.log(this.$el) // <div><h1>修改msg数据</h1></div>
console.log(this.msg) // 修改msg数据
},
methods: {
handleClick() {
this.msg = '修改msg数据'
}
}
}
beforeDestory
当路由切换或则组件被销毁之前
beforeDestory() {
console.log(this.$el) // <div><h1>message</h1></div>
console.log(this.msg) // message
}
destoryed
当路由切换或则组件已经被销毁， vue实例的所有数据和事件都会被销毁
destoryed() {
console.log(this.$el) // <div><h1>message</h1></div>
console.log(this.msg) // message
}
我只是一个搬运工
