文章目錄
- Vue生命周期
- Vue生命周期鉤子
- 生命周期鉤子小案例
- 在created中獲取數據
- 在mounted中獲取焦點
Vue生命周期
思考：什么時候可以發送初始化渲染請求？（越早越好）什么時候可以開始操作dom？（至少dom得渲染出來）
Vue生命周期：就是一個Vue實例從創建 到 銷毀 的整個過程。
生命周期四個階段：① 創建 ② 掛載 ③ 更新 ④ 銷毀
1.創建階段：創建響應式數據
2.掛載階段：渲染模板
3.更新階段：修改數據，更新視圖
4.銷毀階段：銷毀Vue實例
Vue生命周期鉤子
Vue生命周期過程中，會自動運行一些函數，被稱為【生命周期鉤子】→ 讓開發者可以在【特定階段】運行自己的代碼
<!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. 卸載階段beforeDestroy () {console.log('beforeDestroy, 卸載前')console.log('清除掉一些Vue以外的資源占用，定時器，延時器...')},destroyed () {console.log('destroyed，卸載后')}})</script>
</body>
</html>
生命周期鉤子小案例
在created中獲取數據
<!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><style>* {margin: 0;padding: 0;list-style: none;}.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;}.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;}.news .left .title {font-size: 20px;}.news .left .info {color: #999999;}.news .left .info span {margin-right: 20px;}.news .right {width: 160px;height: 120px;}.news .right img {width: 100%;height: 100%;object-fit: cover;}</style>
</head>
<body><div id="app"><ul><li v-for="(item, index) in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt=""></div></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：http://hmajax.itheima.net/api/news// 請求方式：getconst app = new Vue({el: '#app',data: {list: []},async created () {// 1. 發送請求獲取數據const res = await axios.get('http://hmajax.itheima.net/api/news')// 2. 更新到 list 中，用于頁面渲染 v-forthis.list = res.data.data}})</script>
</body>
</html>
在mounted中獲取焦點
<!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 class="search-box"><input type="text" v-model="words" id="inp"><button>搜索一下</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {words: ''},mounted () {document.querySelector('#inp').focus()}})</script>
</body></html>
剛剛進入頁面，等頁面加載完畢獲取輸入框的焦點。
