vue生命周期
什么是生命周期？
/*
* 组件实例从创建到销毁的过程，分别为创建前后，渲染前后，更新前后，销毁前后,每个过程对应着相应的钩子函数
* 在函数中添加代码逻辑。不要使用箭头函数定义钩子函数，箭头函数没有this，this会作为变量向上级词法作用域查找，直到找到为止，会报找不到属性的错误。
* beforeCreated(),created(),beforeMount(),mountd(),beforeUpdate(),updated(),beforeDestroy(),destroyed().
*
* */
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<my-comp1 v-if="show"></my-comp1>
<my-comp2 v-else></my-comp2>
<button @click="show=!show">change</button>
</div>
<script>
const data = {
msg: ‘hello‘,
show:false
}
Vue.component(‘my-comp1‘,{
template:`<span>组件1</span>`,
beforeCreate() {
console.log(‘beforeCreated1‘)
},
created() {
console.log(‘created1‘)
},
beforeMount() {
console.log(‘beforeMount1‘);
},
mounted() {
console.log(‘mounted1‘);
},
beforeDestroy(){
console.log(‘beforeDestroy1‘);
},
destroyed(){
console.log(‘destroyed1‘);
}
})
Vue.component(‘my-comp2‘,{
template:`<div><span>组件2</span>
<my-comp1></my-comp1>
</div>`,
beforeCreate() {
console.log(‘beforeCreated2‘)
},
created() {
console.log(‘created2‘)
},
beforeMount() {
console.log(‘beforeMount2‘);
},
mounted() {
console.log(‘mounted2‘);
},
beforeDestroy(){
console.log(‘beforeDestroy2‘);
},
destroyed(){
console.log(‘destroyed2‘);
}
})
const vm = new Vue({
el: ‘#app‘,
data: data,
methods: {},
beforeCreate() {
console.log(‘beforeCreated‘)
},
created() {
console.log(‘created‘)
},
beforeMount() {
console.log(‘beforeMount‘);
},
mounted() {
console.log(‘mounted‘);
},
beforeUpdate(){
console.log(‘beforeUpdate‘);
},
updated(){
console.log(‘updated‘);
},
})
</script>
</body>
</html>
生命周期钩子函数的执行顺序是？
/*
* 首先执行beforeCreate，created，beforeMount,如果当前组件中有子组件，这时执行子组件的
* beforeCreate，created，beforeMount，mounted，当子组件渲染完成后再执行父组件的mounted，
*
* */
组件的销毁顺序？
/*
* 首先会执行父组件的beforeUpdate函数，执行被销毁组件beforeDestroy，如果当前组件中有子组件，接着执行
* 子组件的beforeDestroy。最后执行被销毁组件的destroy函数子组件的destroy。
* */
每个钩子函数都做了那些事情？
/*
* beforeCreate:数据观察和事件监听,无法使用data数据
* created:可以使用data和方法，这时元素还没有挂载，可以做数据请求
* 无法使用$el的属性。此时this.$el为undefined，
* 如果这时想使用el可以使用$nexttick()
* this.$nextTick(()=>{
console.log(this.$el);
})
*
* beforeMount:执行render渲染函数，首先会判断组件是否使用el属性挂载，如果是就继续判断
* 是否有template，如果有使用render函数编译template进行渲染。如果没有template属性
* 使用el的html作为模板进行编译。此时为虚拟dom
* 优先级为render()-->template-->el
*
* mounted:挂载完成，模板中html渲染到html页面中。也可以在这里进行数据请求，此钩子只会执行一次
* 此时的$el为真实dom。
*
* beforeUpdate：数据更新之前调用，虚拟dom重新渲染之前，可以在钩子中进一步修改状态，不会触发重新渲染。
* updated：由于数据更改当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
* 然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算
* 属性或 watcher 取而代之
* beforeDestroy:销毁之前调用，此处组件实例还可以使用
* destroyed:实例不能用了，指令和事件监听都被移出，可以在此时清除定时器
* */
vue---lifecycle