vue的生命周期
前言
1、什么是生命周期
- vue中的生命周期指的是 组件 从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（ 这些方法具备一些功能），我们给这些方法起了个名字叫做（ 生命周期钩子函数/ 组件钩子 ）
2、为什么要学习生命周期？
- 因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途
3、这个生命周期是谁的生命周期？
- 组件
一、vue生命周期的阶段
初始化、运行中、销毁三个阶段
注意：生命周期钩子函数不允许写成箭头函数，会造成this丢失
1、初始化阶段
-
beforeCreate- 1、组件创建前触发，目的是为了组件的生命周期 和 组件中的事件做准备
- 2、数据没有获得，真实dom也没有渲染出来
- 3、可以进行数据请求，提供了一次数据修改的机会
- 4、 执行一次
-
created- 1、组件创建结束
- 2、数据得到了，真实dom没有渲染出来
- 3、可以进行数据请求，提供了一次数据修改的机会
- 4、执行了一次
-
beforeMount- 1、组件挂载前
- 2、 判断el 判断 template
- 如果el没有，那么我们需要手动挂载，如果有，那么判断template
- 如果template有，那么进行render函数
- 如果template没有，那么通过 outerHTML 手动书写模板
- 3、数据可以获得，但是真实dom还没有渲染
- 4、可以进行数据请求，也提供了一次数据修改的机会
- 5、执行一次
-
mounted- 1、组件挂载结束
- 2、数据获得了，真实dom也获得了
- 3、可以进行数据请求，也就可以修改数据
- 4、执行了一次
- 5、可以进行真实dom的操作了（ 可以进行第三方库的实例化了 ）
总结：
1、数据请求一般写在created里面
2、第三方库实例化一般会往mounted中写
代码示例
<div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div>
<p> {{ msg }} </p>
</div>
</template>
<script>
Vue.component('Hello',{
template: '#hello',
data () {
return {
msg: 'hello'
}
},
beforeCreate () {
console.log('1-beforeCreate')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
// fetch('./data.json') 这里可以进行数据请求
// .then( res => res.json())
// .then( data => this.msg = data )
// .catch( error => console.log( error ))
},
created () {
console.log('2-created')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
// fetch('./data.json') 这里可以进行数据请求
// .then( res => res.json())
// .then( data => this.msg = data )
// .catch( error => console.log( error ))
},
beforeMount () {
console.log('3-beforeMount')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
// fetch('./data.json') 这里可以进行数据请求
// .then( res => res.json())
// .then( data => this.msg = data )
// .catch( error => console.log( error ))
},
// render() render函数作用是将 jsx 转换成 vdom 对象模型
mounted () {
console.log('4-mounted')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
fetch('./data.json') //这里可以进行数据请求
.then( res => res.json())
.then( data => this.msg = data )
.catch( error => console.log( error ))
}
})
new Vue({
el: '#app'
})
</script>
2、运行中阶段（触发条件：数据更新）
-
beforeUpdate- 1、更新前
- 2、重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
- 3、这个钩子函数更多的是内部进行一些操作，我们知道一下就可以
- 4、可以触发多次
-
updated- 1、更新结束
- 2、真实dom得到了，数据也得到了（ 更新后的 ）
- 3、动态数据获取（ 第三方库实例化 ）
代码示例
<div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div>
<p> {{ msg }} </p>
</div>
</template>
<script>
Vue.component('Hello',{
template: '#hello',
data () {
return {
msg: 'hello '
}
},
beforeCreate () {
console.log('1-beforeCreate')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
// fetch('./data.json')
// .then( res => res.json())
// .then( data => this.msg = data )
// .catch( error => console.log( error ))
},
created () {
console.log('2-created')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
// fetch('./data.json')
// .then( res => res.json())
// .then( data => this.msg = data )
// .catch( error => console.log( error ))
},
beforeMount () {
console.log('3-beforeMount')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
// fetch('./data.json')
// .then( res => res.json())
// .then( data => this.msg = data )
// .catch( error => console.log( error ))
},
// render() render函数作用是将 jsx 转换成 vdom 对象模型
mounted () {
console.log('4-mounted')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
fetch('./data.json')
.then( res => res.json())
.then( data => this.msg = data )
.catch( error => console.log( error ))
},
// ----------------------- 运行中-----------------------
beforeUpdate () {
console.log('beforeUpdate')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
},
updated () {
console.log('updated')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
}
})
new Vue({
el: '#app'
})
</script>
3、销毁阶段（触发条件：当组件销毁时）
-
Vue的销毁有两种形式
- 通过开关的形式——外部销毁
- 通过调用 $destroy 方法——内部销毁
-
内部销毁 vs 外部销毁
- 外部销毁不仅能销毁组件，也能销毁该组件的dom结构
- 内部销毁只能销毁组件，不能销毁组件的dom结构
-
beforeDestroy -
destroyed总结：这两个钩子功能一致的，没有太大的区别
作用：用来做善后的,比如计时器的关闭 第三方实例的删除
代码示例：外部销毁
<div id="app">
<button @click = "flag = !flag"> 切换 </button>
<Hello v-if = "flag"></Hello>
</div>
<template id="hello">
<div>
hello
</div>
</template>
<scritp>
Vue.component('Hello',{
template: '#hello',
mounted () {
this.time = setInterval ( () => {
console.log( 'HELLO' )
},1000)
},
beforeDestroy () {
console.log('beforeDestroy')
clearInterval( this.time )
},
destroyed () {
console.log('destroyed')
}
})
new Vue({
el: '#app',
data: {
flag: true
}
})
</script>
代码示例：内部销毁
<body>
<div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div class="hello-box">
<button @click = "clear"> 销毁 </button>
hello
</div>
</template>
</body>
<script>
Vue.component('Hello',{
template: '#hello',
methods: {
clear () {
this.$destroy() //调用$destroy()实现
}
},
mounted () {
this.time = setInterval ( () => {
console.log( 'hello' )
},1000)
},
beforeDestroy () {
console.log('beforeDestroy')
clearInterval( this.time )
document.querySelector('.hello-box').remove()
},
destroyed () {
console.log('destroyed')
}
})
new Vue({
el: '#app',
data: {
flag: true
}
})
</script>
扫一扫
2788
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
