今日目標:

能夠說出vue組件生命周期

能夠掌握axios的使用

能夠了解refs, nextTick使用和name使用

---

學習內容：

學習目錄:

Vue生命周期

axios

nextTick和refs知識

今日總結

面試題

知識點自測

• 知道window.onload的作用
• ajax是什么, XMLHttpRequest的使用步驟
• jQ的 $.ajax底層是什么?
• Promise的作用
• async和await的作用-如何和Promise配合
• 同步異步的概念, 代碼執行順序
• 請求和響應, 以及JSON解析能力
• Vue基礎, 組件使用, props傳值, 組件通信, 計算屬性使用, 對象引用類型使用

1. vue生命周期

1.0_組件-生命周期

• 一組件從 創建 到 銷毀 的整個過程就是生命周期

Vue的生命周期是什么?

從Vue實例, 創建到銷毀的過程

1.1_鉤子函數

目標: Vue 框架內置函數，隨著組件的生命周期階段，自動執行

PS：這些函數，被稱為聲明周期函數，也叫鉤子函數

• 作用: 特定的時間點，執行特定的操作
• 場景: 組件創建完畢后，可以在created 生命周期函數中發起Ajax 請求，從而初始化 data 數據
• 分類: 4大階段8個方法
  • 初始化
  • 掛載
  • 更新
  • 銷毀
• 具體方法：

階段方法名方法名

初始化	beforeCreate	created
掛載	beforeMount	mounted
更新	beforeUpdate	updated
銷毀	beforeDestroy	destroyed

• mount：掛載
• destory：銷毀
• 官方文檔

如何知道Vue生命周期到達了什么階段?

使用鉤子函數

鉤子函數有哪些?

初始化/ 掛載/ 更新/ 銷毀

1.2_初始化階段

目標: 掌握初始化階段2個鉤子函數作用和執行時機

含義講解:

new Vue() – Vue實例化(組件也是一個小的Vue實例)

Init Events & Lifecycle – 初始化事件和生命周期函數

beforeCreate – 生命周期鉤子函數被執行

Init injections&reactivity – Vue內部添加data和methods等

created – 生命周期鉤子函數被執行, 實例創建

接下來是編譯模板階段 –開始分析

Has el option? – 是否有el選項 – 檢查要掛到哪里

沒有. 調用$mount()方法

有, 繼續檢查template選項

• 接下來，練習：
• 創建一個文件：components/Life.vue

<script> export default {data(){return {msg: "hello, Vue"}},// 一. 初始化// new Vue()以后, vue內部給實例對象添加了一些屬性和方法, data和methods初始化"之前"beforeCreate(){console.log("beforeCreate -- 執行");console.log(this.msg); // undefined，PS：data還沒有初始化，所以是undefined},// data和methods初始化以后// 場景: 網絡請求, 注冊全局事件 ****created(){console.log("created -- 執行");console.log(this.msg); // hello, Vue} } </script>

App.vue - 引入使用

<template><div><h1>1. 生命周期</h1><Life></Life></div> </template><script> import Life from './components/Life' export default {components: {Life} } </script>

Vue實例從創建到編譯模板執行了哪些鉤子函數?

beforeCreate / created

created函數觸發能獲取data?

能獲取data, 不能獲取真實DOM（PS：此時只是實例化了Vue，此時界面還沒有編譯渲染）

1.3_掛載階段

目標: 掌握掛載階段2個鉤子函數作用和執行時機

含義講解:

template選項檢查

有 - 編譯template返回render渲染函數

無 – 編譯el選項對應標簽作為template(要渲染的模板)

虛擬DOM掛載成真實DOM之前

beforeMount – 生命周期鉤子函數被執行

Create … – 把虛擬DOM和渲染的數據一并掛到真實DOM上

真實DOM掛載完畢

mounted – 生命周期鉤子函數被執行

• 接下來，開始練習：
• 在components/Life.vue 中繼續書寫：

<template><div><p>學習生命周期 - 看控制臺打印</p><p id="myP">{{ msg }}</p></div> </template><script> export default {// ...省略其他代碼// 二. 掛載// 真實DOM掛載之前// 場景: 預處理data, 不會觸發updated鉤子函數（先了解，有印象即可）beforeMount(){console.log("beforeMount -- 執行");console.log(document.getElementById("myP")); // nullthis.msg = "重新值"},// 真實DOM掛載以后// 場景: 可以操作DOM****mounted(){console.log("mounted -- 執行");console.log(document.getElementById("myP")); // p} } </script>

Vue實例從創建到顯示都經歷了哪些鉤子函數?

beforeCreate / created / beforeMount / mounted

created函數里, 能獲取真實DOM嗎?

不能獲取真實DOM

在什么鉤子函數里可以獲取真實DOM?

mounted

1.4_更新階段

目標: 掌握更新階段2個鉤子函數作用和執行時機

含義講解:

當data里數據改變, 更新DOM之前

beforeUpdate – 生命周期鉤子函數被執行

Virtual DOM…… – 虛擬DOM重新渲染, 打補丁到真實DOM

updated – 生命周期鉤子函數被執行

當有data數據改變 – 重復這個循環

• 在components/Life.vue中繼續書寫：

• 準備ul+li循環, 按鈕添加元素, 觸發data改變->導致更新周期開始

<template><div><p>學習生命周期 - 看控制臺打印</p><p id="myP">{{ msg }}</p><ul id="myUL"><li v-for="(val, index) in arr" :key="index">{{ val }}</li></ul><button @click="arr.push(1000)">點擊末尾加值</button></div> </template><script> export default {data(){return {msg: "hello, Vue",arr: [5, 8, 2, 1]}},// ...省略其他代碼// 三. 更新// 前提: data數據改變才執行// 更新之前beforeUpdate(){console.log("beforeUpdate -- 執行");console.log(document.querySelectorAll("#myUL>li")[4]); // undefined，無法獲取更新之后的dom},// 更新之后// 場景: 獲取更新后的真實DOMupdated(){console.log("updated -- 執行");console.log(document.querySelectorAll("#myUL>li")[4]); // li} } </script>

什么時候執行updated鉤子函數?

當數據發生變化并更新頁面后

在哪可以獲取更新后的DOM?

在updated鉤子函數里

1.5_銷毀階段

目標: 掌握銷毀階段2個鉤子函數作用和執行時機

含義講解:

當$destroy()被調用 – 比如組件DOM被移除(例v-if)

beforeDestroy – 生命周期鉤子函數被執行

拆卸數據監視器、子組件和事件偵聽器

實例銷毀后, 最后觸發一個鉤子函數

destroyed – 生命周期鉤子函數被執行

<script> export default {// ...省略其他代碼// 四. 銷毀// 前提: v-if="false" 銷毀Vue實例// 場景: 移除全局事件, 移除當前組件, 計時器, 定時器, eventBus移除事件$off方法beforeDestroy(){// console.log('beforeDestroy -- 執行');clearInterval(this.timer)},//場景: 移除全局事件, 移除當前組件, 計時器, 定時器, eventBus移除事件$off方法destroyed(){// console.log("destroyed -- 執行");clearInterval(this.timer);console.log(this);// 在這里依然可以訪問到this，此時thisvue對象還沒有被銷毀} } </script>

主要: App.vue - 點擊按鈕讓Life組件從DOM上移除 -> 導致Life組件進入銷毀階段

<Life v-if="show"></Life> <button @click="show = false">銷毀組件</button><script>data(){return {show: true}}, </script>

一般在beforeDestroy/destroyed里做什么?

手動消除計時器/定時器/全局事件

2. axios

2.0_axios基本使用

• [axios文檔](http://www.axios-js.com/)
• 特點
  • 支持客戶端發送Ajax請求
  • 支持服務端Node.js發送請求
  • 支持Promise相關用法
  • 支持請求和響應的攔截器功能
  • 自動轉換JSON數據
  • axios 底層還是原生js實現, 內部通過Promise封裝的

安裝命令

yarn add axios

• axios的基本使用：語法

axios({method: '請求方式', // get獲取 post添加 put修改 delete刪除url: '請求地址',data: { // 拼接到請求體的參數, post請求的參數xxx: xxx,},params: { // 拼接到請求行的參數, get請求的參數xxx: xxx } }).then(res => {console.log(res.data) // 后臺返回的結果 }).catch(err => {console.log(err) // 后臺報錯返回 })

什么是ajax?

一種前端異步請求后端的技術

ajax原理?

瀏覽器window接口的XMLHttpRequest

axios是什么?

基于原生ajax+Promise技術封裝通用于前后端的請求庫

2.1_axios基本使用-獲取數據

目標: 調用文檔最后_獲取所有圖書信息接口

• 功能: 點擊調用后臺接口, 拿到所有數據 – 打印到控制臺

• 接口: 看本文檔最后：接口文檔

• 引入: 下載axios, 引入后才能使用

• 例子如下:

• components/UseAxios.vue

<template><div><p>1. 獲取所有圖書信息</p><button @click="getAllFn">點擊-查看控制臺</button></div> </template><script> // 目標1: 獲取所有圖書信息 // 1. 下載axios // 2. 引入axios // 3. 發起axios請求 import axios from "axios"; export default {methods: {getAllFn() {axios({url: "http://xxxx",method: "GET", // 默認就是GET方式請求, 可以省略不寫}).then((res) => {console.log(res);});//PS： axios()-原地得到Promise對象，Promise對象可以調用then方法},} }; </script>

axios如何發起一次get請求?

在method選項配置為get/ 也可以默認不寫

axios函數調用原地結果是什么?

是一個Promise對象

如何拿到Promise里ajax的成功或失敗的結果?

then() / catch()

2.2_axios基本使用-傳參

目標: 調用接口-獲取某本書籍信息

• 功能: 點擊調用后臺接口, 查詢用戶想要的書籍信息 – 打印到控制臺
• 例子如下:
• components/UseAxios.vue

<template><div><p>3. 新增圖書信息</p><div><input type="text" placeholder="書名" v-model="bookObj.bookname"></div><div><input type="text" placeholder="作者" v-model="bookObj.author"></div><div><input type="text" placeholder="出版社" v-model="bookObj.publisher"></div><button @click="sendFn">發布</button></div> </template><script> import axios from "axios"; export default {data() {return {bName: "",bookObj: { // 參數名提前和后臺的參數名對上-發送請求就不用再次對接了bookname: "",author: "",publisher: ""}};},methods: {// ...省略了其他代碼sendFn(){axios({url: "http://xxxx",method: "POST",data: {appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",...this.bookObj //擴展運算符，等同于拆包，給對象里的key，value拆出來// 等同于下面// bookname: this.bookObj.bookname,// author: this.bookObj.author,// publisher: this.bookObj.publisher}}) }}, }; </script>

post請求方式, 一般在哪里傳遞數據給后臺?

請求體中

axios哪個選項, 可以把參數自動裝入到請求體中?

data選項

axios默認發給后臺請求體數據格式是?

json字符串格式

2.4_axios基本使用-全局配置

目標: 避免前綴基地址, 暴露在邏輯頁面里, 統一設置

axios.defaults.baseURL = "http://xxxx."// 所有請求的url前置可以去掉, 請求時, axios會自動拼接baseURL的地址在前面 getAllFn() {axios({url: "/api",method: "GET", // 默認就是GET方式請求, 可以省略不寫}).then((res) => {console.log(res);});// axios()-原地得到Promise對象 },

想學習axios更多的知識應該去哪里?

官網多閱讀, 多看多總結, 任何庫和插件都是

axios如何配置基地址?

axios.defaults.baseURL

3. nextTick和refs知識

3.0 $refs-獲取DOM ***

目標: 利用 id 或 ref 可以用于獲取 dom 元素

• 雖然vue的語法盡量的避免Dom操作，但是有情況還得獲取到dom元素對象

• PS：

  • 給標簽添加ref屬性之后，vue內部會自動獲取到此標簽的dom對象，并放入$refs對象中
  • ref：reference，引用，在這里我們把引用，理解為對象即可。（引用對象，實例對象）
  • ref="myH1"相當于是給h1的對象起了個名字叫myH1
  • 所以，可以通過this.$refs.myH1找到h1標簽

• components/More.vue

<template><div><p>1. 獲取原生DOM元素</p><h1 id="h" ref="myH">我是一個孤獨可憐又能吃的h1</h1></div> </template><script> // 目標: 獲取組件對象 // 1. 創建組件/引入組件/注冊組件/使用組件 // 2. 組件起別名ref // 3. 恰當時機, 獲取組件對象 export default {mounted(){console.log(document.getElementById("h")); // h1console.log(this.$refs.myH); // h1} } </script><style></style>

總結: 通過id / ref, 都可以獲取原生DOM標簽

Vue中如何獲取原生DOM呢?

用id屬性或者ref屬性都可以 this.$refs.ref屬性值

3.1 $refs-獲取組件對象

目標: 通過ref獲取組件對象, 調用組件里方法

• 具體操作：
• 新建：components/Child/Demo.vue

<template><div><p>我是Demo組件</p></div> </template><script> export default {methods: {fn(){console.log("demo組件內的方法被調用了");}} } </script>

More.vue - 獲取組件對象 - 調用組件方法

<template><div><p>1. 獲取原生DOM元素</p><h1 id="h" ref="myH">我是一個孤獨可憐又能吃的h1</h1><p>2. 獲取組件對象 - 可調用組件內一切</p><Demo ref="de"></Demo></div> </template><script> // 目標: 獲取組件對象 // 1. 創建組件/引入組件/注冊組件/使用組件 // 2. 組件起別名ref // 3. 恰當時機, 獲取組件對象 import Demo from './Child/Demo' export default {mounted(){console.log(document.getElementById("h")); // h1console.log(this.$refs.myH); // h1let demoObj = this.$refs.de;demoObj.fn()},components: {Demo} } </script>

總結: ref定義值, 通過$refs.值 來獲取組件對象, 就能繼續調用組件內的變量
PS：

let和var是聲明變量的,const是聲明常量的

let和const不存在變量提升

let和const不允許重復聲明

如何獲取組件對象呢?

• 目標組件添加ref屬性
• this.$refs.名字獲取組件對象

拿到組件對象能做什么?

• 調用組件里的屬性/方法

3.2 $nextTick使用

目標: 點擊修改data里的數據，立馬通過DOM元素獲取修改后的內容

• 具體操作：
• components/Move.vue

<template><div><p>1. 獲取原生DOM元素</p><h1 id="h" ref="myH">我是一個孤獨可憐又能吃的h1</h1><p>2. 獲取組件對象 - 可調用組件內一切</p><Demo ref="de"></Demo><p>3. vue更新DOM是異步的</p><p ref="myP">{{ count }}</p><button @click="btn">點擊count+1, 馬上提取p標簽內容</button></div> </template><script> // 目標: 獲取組件對象 // 1. 創建組件/引入組件/注冊組件/使用組件 // 2. 組件起別名ref // 3. 恰當時機, 獲取組件對象 import Demo from './Child/Demo' export default {mounted(){console.log(document.getElementById("h")); // h1console.log(this.$refs.myH); // h1let demoObj = this.$refs.de;demoObj.fn()},components: {Demo},data(){return {count: 0}},methods: {btn(){this.count++; // vue監測數據更新, 開啟一個DOM更新隊列(異步任務)console.log(this.$refs.myP.innerHTML); // 0// 原因: Vue更新DOM異步// 解決: this.$nextTick()// 過程: DOM更新完會挨個觸發$nextTick里的函數體this.$nextTick(() => {console.log(this.$refs.myP.innerHTML); // 1})}} } </script>

總結: 因為DOM更新是異步的

data改變更新DOM是同步還是異步的?

異步

我們可以在哪里訪問到更新后的DOM呢?

this.$nextTick里的函數體

updated生命周期鉤子函數

3.3 $nextTick使用場景

目標: 點擊搜索按鈕自身隱藏，出現輸入框并馬上處于激活狀態

• 注意：一定要用v-if來寫，保證DOM異步更新前獲取不到輸入框，提醒$nextTick價值
• 如果使用v-show，那么v-show控制的標簽，在界面加載的時候已經在dom上了，只是控制顯示隱藏
• 控制顯示隱藏的速度是很快的，v-if是控制標簽，掛載到dom并且顯示，速度比較慢
• 所以，v-if才會有延遲的效果，我們才需要使用$nextTick
• v-show，也得通過$nextTick來等待
• 具體操作：
• 新建：components/Tick.vue

<template><div><input ref="myInp" type="text" placeholder="這是一個輸入框" v-if="isShow"><button v-else @click="btn">點擊我進行搜索</button></div> </template><script> // 目標: 點按鈕(消失) - 輸入框出現并聚焦 // 1. 獲取到輸入框 // 2. 輸入框調用事件方法focus()達到聚焦行為 export default {data(){return {isShow: false}},methods: {//注意函數內使用await，需要添加asyncasync btn(){this.isShow = true;// this.$refs.myInp.focus() //PS：會報錯，myInp是undefined// 原因: data變化更新DOM是異步的// 輸入框還沒有掛載到真實DOM上// 解決:// this.$nextTick(() => {// this.$refs.myInp.focus()// })// 擴展: await取代回調函數// $nextTick()原地返回Promise對象await this.$nextTick() //等待執行完畢之后，再獲取焦點this.$refs.myInp.focus()}} } </script>

$nextTick函數原地返回什么?

Promise對象

如何在JS中主動觸發標簽的事件呢?

獲取到DOM對象, 調用事件方法

3.4 組件name屬性使用

目標: 可以用組件的name屬性值, 來注冊組件名字

• PS:

• 之前注冊組件的時候，：前邊的組件名是我們自己隨便寫的，現在我們想用人家自己的名字

• ComName.name即為：“ComNameHaHa”

• 問題: 組件名不是可以隨便寫的?

• 答案: 我們封裝的組件-可以自己定義name屬性組件名-讓使用者有個統一的前綴風格

• 具體操作：

• 新建：components/Com.vue

<template><div><p>我是一個Com組件</p></div> </template><script> export default {name: "ComNameHaHa" // 注冊時可以定義自己的名字 } </script>

App.vue - 注冊和使用

<template><div><h1>1. 生命周期</h1><Life v-if="show"></Life><button @click="show = false">銷毀組件</button><hr><h1>2. axios使用</h1><UseAxios></UseAxios><hr><h1>3. $refs的使用</h1><More></More><hr><h1>4. $nextTick使用場景</h1><Tick></Tick><hr><h1>5. 組件對象里name屬性</h1><ComNameHaHa></ComNameHaHa></div> </template><script> import Life from './components/Life' import UseAxios from './components/UseAxios' import More from './components/More' import Tick from './components/Tick' import Com from './components/Com' export default {data(){return {show: true}},components: {Life,UseAxios,More,Tick,//以下注冊寫法都可以// Tick: Tick,//"Tick": Tick, //將vetur禁用掉們才能添加成功[Com.name]: Com // 對象里的key是變量的話[]屬性名表達式//相當于：//"ComNameHaHa": Com} } </script>

組件使用分為幾步?

創建組件/ 引入組件/ 注冊組件/ 使用組件

注冊組件名還可以用什么?

用組件對象的name屬性的值

今日總結

vue的生命周期哪4個階段, 哪8個方法（created ,mounted）

axios是什么, 底層是什么, 具體如何使用

axios返回的是什么, 如何接收結果

知道ref和$refs使用和作用以及場景?

知道$nextTick的作用

面試題

1、Vue 的 nextTick 的原理是什么? （高薪常問）

\1. 為什么需要 nextTick ，Vue 是異步修改 DOM 的并且不鼓勵開發者直接接觸 DOM，但有時候業務需要必須對數據更改--刷新后的 DOM 做相應的處理，這時候就可以使用 Vue.nextTick(callback)這個 api 了。\2. 理解原理前的準備 首先需要知道事件循環中宏任務和微任務這兩個概念,常見的宏任務有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常見的微任務有 process.nextTick(Nodejs),Promise.then(), MutationObserver;\3. 理解 nextTick 的原理正是 vue 通過異步隊列控制 DOM 更新和 nextTick 回調函數先后執行的方式。如果大家看過這部分的源碼，會發現其中做了很多 isNative()的判斷，因為這里還存在兼容性優雅降級的問題。可見 Vue 開發團隊的深思熟慮，對性能的良苦用心。

2、vue生命周期總共分為幾個階段？（必會）

Vue 實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。

1**）beforeCreate**

在實例初始化之后，數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。

2**）created**

在實例創建完成后被立即調用。在這一步，實例已完成以下的配置：數據觀測 (data observer)， 屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

3**）beforeMount**

在掛載開始之前被調用：相關的 render 函數首次被調用。

4**）mounted**

el 被新創建的 vm.el 替換，并掛載到實例上去之后調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.el 也在文檔內。

5**）beforeUpdate**

數據更新時調用，發生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現有的 DOM，比如手動移除已添加的事件監聽器。該鉤子在服務器端渲染期間不被調用，因為只有初次渲染會在服務端進行。

6**）updated**

由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。

7**）activated**

keep-alive 組件激活時調用。該鉤子在服務器端渲染期間不被調用。

8**）deactivated**

keep-alive 組件停用時調用。該鉤子在服務器端渲染期間不被調用。

9**）beforeDestroy**

實例銷毀之前調用。在這一步，實例仍然完全可用。該鉤子在服務器端渲染期間不被調用。

10**）destroyed**

Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務器端渲染期間不被調用。

11**）errorCaptured（2.5.0+ 新增）**

當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯誤繼續向上傳播。

3、第一次加載頁面會觸發哪幾個鉤子函數？（必會）

當頁面第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子函數

總結

以上是生活随笔為你收集整理的Vue基础学习笔记Day05_生命周期_axios的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。