一、生命周期和生命周期的四个阶段
二、vue生命周期函数(钩子函数)
三、代码实例
(1)代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h3>{{ title }}</h3>
<div>
<button @click="count--">-</button>
<span>{{ count }}</span>
<button @click="count++">+</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
count: 100,
title: '计数器'
},
//1.创建阶段(准备数据)
beforeCreate() {
console.log('beforeCreate 响应式数据准备好之前',this.count)
},
created(){
console.log('created 响应式数据准备好之后',this.count)
// this.数据名 = 请求回来的数据
// 可以开始发送初始化渲染的请求
},
//2.挂在阶段(渲染模版)
beforeMount(){
console.log('beforeMount 模版渲染之前',document.querySelector('h3').innerHTML)
},
mounted(){
console.log('mounted 模版渲染之前',document.querySelector('h3').innerHTML)
// 可以开始操作dom了
},
//3.更新阶段( 修改数据 -> 更新视图 )
beforeUpdate() {
console.log('beforeUpdate 数据修改了,视图未更新',document.querySelector('span').innerHTML)
},
updated(){
console.log('updated 数据修改了,视图已更新',document.querySelector('span').innerHTML)
},
//4.卸载阶段---在console输入: app.$destroy()
beforeDestroy() {
console.log('beforeDestroy, 卸载前')
console.log('清除一些vue以外的资源占用,定时器,延时器...')
},
destroyed(){
console.log('destroyed, 卸载后')
}
})
</script>
</body>
</html>
(2)展示
三、总结
重要的是前两个 最后记忆一下
-----------------------------------------------------------------------------------------------------------------------------
注:本人是根据黑马程序员的B站教程来学习的,
链接:https://www.bilibili.com/video/BV1HV4y1a7n4/?spm_id_from=333.999.0.0
本文章仅仅是个人学习笔记 无任何其他用途 特此说明