Vue生命周期 和 生命周期的四个阶段
Vue生命周期总结:
四个阶段,八个钩子 -> 三个常用 created,mounted,beforeDestroy
生命周期的钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h3>{{title}}</h3>
<div>
<div>
<button @click="count--">-</button>
<span>{{count}}</span>
<button @click="count++">+</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/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() {
// 可以操作dom了
console.log("mounted 模板渲染之后",document.querySelector("h3").innerHTML)
},
// 3. 更新阶段(修改数据 -> 更新视图)
beforeUpdate(){
console.log("beforeUpdare 数据修改了,视图还没更新",document.querySelector('span').innerHTML)
},
updated(){
console.log("updated 数据修改了,视图已经更新",document.querySelector('span').innerHTML)
},
// 4. 卸载阶段
beforeDestroy(){
console.log("beforeDestroy,卸载前")
// 清除掉一些Vue以外的资源占有,定时器,延时器...
},
destroyed(){
console.log("destroyed,卸载后")
}
})
</script>
</body>
</html>created应用
created: 响应式数据准备好了,可以开始发送初始化渲染请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list" :key="item.id">
<div>
<div>{{item.title}}</div>
<div>
<span>{{item.source}}</span>
<span>{{item.time}}</span>
</div>
</div>
<div>
<img :src="item.img" alt="">
</div>
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 接口地址: http://hmajax.itheima.net/api/news
// 请求方式: get
const app = new Vue({
el: '#app',
data: {
list:[]
},
async created(){
// 1. 发送请求,获取数据
const res = await axios.get('http://hmajax.itheima.net/api/news')
// 2. 将数据更新给 data 中的list
this.list = res.data.data
}
})
</script>
</body>
</html>mounted应用
mounted: 模板渲染完成,可以开始操作DOM了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<img>
<div>
<input type="text" v-model="words" id="inp">
<button>搜索一下</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
words:""
},
// 核心思路
//1. 等待输入框渲染出来
//2. 让输入框获取焦点
mounted(){
// console.log(document.querySelector("#inp"))
document.querySelector("#inp").focus()
}
})
</script>
</body>
</html>
