當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue基础学习笔记Day05_生命周期_axios

發(fā)布時間：2023/12/18 vue 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue基础学习笔记Day05_生命周期_axios 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

今日目標(biāo):

能夠說出vue組件生命周期

能夠掌握axios的使用

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

學(xué)習(xí)內(nèi)容：

學(xué)習(xí)目錄:

Vue生命周期

axios

nextTick和refs知識

今日總結(jié)

面試題

知識點自測

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

1. vue生命周期

1.0_組件-生命周期

一組件從創(chuàng)建到銷毀的整個過程就是生命周期

Vue的生命周期是什么?

從Vue實例, 創(chuàng)建到銷毀的過程

1.1_鉤子函數(shù)

目標(biāo): Vue 框架內(nèi)置函數(shù)，隨著組件的生命周期階段，自動執(zhí)行

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

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

階段方法名方法名

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

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

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

使用鉤子函數(shù)

鉤子函數(shù)有哪些?

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

1.2_初始化階段

目標(biāo): 掌握初始化階段2個鉤子函數(shù)作用和執(zhí)行時機(jī)

含義講解:

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

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

beforeCreate – 生命周期鉤子函數(shù)被執(zhí)行

Init injections&reactivity – Vue內(nèi)部添加data和methods等

created – 生命周期鉤子函數(shù)被執(zhí)行, 實例創(chuàng)建

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

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

沒有. 調(diào)用$mount()方法

有, 繼續(xù)檢查template選項

接下來，練習(xí)：
創(chuàng)建一個文件：components/Life.vue

App.vue - 引入使用

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

Vue實例從創(chuàng)建到編譯模板執(zhí)行了哪些鉤子函數(shù)?

beforeCreate / created

created函數(shù)觸發(fā)能獲取data?

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

1.3_掛載階段

目標(biāo): 掌握掛載階段2個鉤子函數(shù)作用和執(zhí)行時機(jī)

含義講解:

template選項檢查

有 - 編譯template返回render渲染函數(shù)

無 – 編譯el選項對應(yīng)標(biāo)簽作為template(要渲染的模板)

虛擬DOM掛載成真實DOM之前

beforeMount – 生命周期鉤子函數(shù)被執(zhí)行

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

真實DOM掛載完畢

mounted – 生命周期鉤子函數(shù)被執(zhí)行

接下來，開始練習(xí)：
在components/Life.vue 中繼續(xù)書寫：

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

Vue實例從創(chuàng)建到顯示都經(jīng)歷了哪些鉤子函數(shù)?

beforeCreate / created / beforeMount / mounted

created函數(shù)里, 能獲取真實DOM嗎?

不能獲取真實DOM

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

mounted

1.4_更新階段

目標(biāo): 掌握更新階段2個鉤子函數(shù)作用和執(zhí)行時機(jī)

含義講解:

當(dāng)data里數(shù)據(jù)改變, 更新DOM之前

beforeUpdate – 生命周期鉤子函數(shù)被執(zhí)行

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

updated – 生命周期鉤子函數(shù)被執(zhí)行

當(dāng)有data數(shù)據(jù)改變 – 重復(fù)這個循環(huán)

在components/Life.vue中繼續(xù)書寫：
準(zhǔn)備ul+li循環(huán), 按鈕添加元素, 觸發(fā)data改變->導(dǎo)致更新周期開始

<template><div><p>學(xué)習(xí)生命周期 - 看控制臺打印</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數(shù)據(jù)改變才執(zhí)行// 更新之前beforeUpdate(){console.log("beforeUpdate -- 執(zhí)行");console.log(document.querySelectorAll("#myUL>li")[4]); // undefined，無法獲取更新之后的dom},// 更新之后// 場景: 獲取更新后的真實DOMupdated(){console.log("updated -- 執(zhí)行");console.log(document.querySelectorAll("#myUL>li")[4]); // li} } </script>

什么時候執(zhí)行updated鉤子函數(shù)?

當(dāng)數(shù)據(jù)發(fā)生變化并更新頁面后

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

在updated鉤子函數(shù)里

1.5_銷毀階段

目標(biāo): 掌握銷毀階段2個鉤子函數(shù)作用和執(zhí)行時機(jī)

含義講解:

當(dāng)$destroy()被調(diào)用 – 比如組件DOM被移除(例v-if)

beforeDestroy – 生命周期鉤子函數(shù)被執(zhí)行

拆卸數(shù)據(jù)監(jiān)視器、子組件和事件偵聽器

實例銷毀后, 最后觸發(fā)一個鉤子函數(shù)

destroyed – 生命周期鉤子函數(shù)被執(zhí)行

主要: App.vue - 點擊按鈕讓Life組件從DOM上移除 -> 導(dǎo)致Life組件進(jìn)入銷毀階段

<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/)
特點
- 支持客戶端發(fā)送Ajax請求
- 支持服務(wù)端Node.js發(fā)送請求
- 支持Promise相關(guān)用法
- 支持請求和響應(yīng)的攔截器功能
- 自動轉(zhuǎn)換JSON數(shù)據(jù)
- axios 底層還是原生js實現(xiàn), 內(nèi)部通過Promise封裝的

安裝命令

yarn add axios

axios的基本使用：語法

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

什么是ajax?

一種前端異步請求后端的技術(shù)

ajax原理?

瀏覽器window接口的XMLHttpRequest

axios是什么?

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

2.1_axios基本使用-獲取數(shù)據(jù)

目標(biāo): 調(diào)用文檔最后_獲取所有圖書信息接口

功能: 點擊調(diào)用后臺接口, 拿到所有數(shù)據(jù) – 打印到控制臺
接口: 看本文檔最后：接口文檔
引入: 下載axios, 引入后才能使用
例子如下:
components/UseAxios.vue

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

axios如何發(fā)起一次get請求?

在method選項配置為get/ 也可以默認(rèn)不寫

axios函數(shù)調(diào)用原地結(jié)果是什么?

是一個Promise對象

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

then() / catch()

2.2_axios基本使用-傳參

目標(biāo): 調(diào)用接口-獲取某本書籍信息

功能: 點擊調(diào)用后臺接口, 查詢用戶想要的書籍信息 – 打印到控制臺
例子如下:
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">發(fā)布</button></div> </template><script> import axios from "axios"; export default {data() {return {bName: "",bookObj: { // 參數(shù)名提前和后臺的參數(shù)名對上-發(fā)送請求就不用再次對接了bookname: "",author: "",publisher: ""}};},methods: {// ...省略了其他代碼sendFn(){axios({url: "http://xxxx",method: "POST",data: {appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",...this.bookObj //擴(kuò)展運算符，等同于拆包，給對象里的key，value拆出來// 等同于下面// bookname: this.bookObj.bookname,// author: this.bookObj.author,// publisher: this.bookObj.publisher}}) }}, }; </script>

post請求方式, 一般在哪里傳遞數(shù)據(jù)給后臺?

請求體中

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

data選項

axios默認(rèn)發(fā)給后臺請求體數(shù)據(jù)格式是?

json字符串格式

2.4_axios基本使用-全局配置

目標(biāo): 避免前綴基地址, 暴露在邏輯頁面里, 統(tǒng)一設(shè)置

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

想學(xué)習(xí)axios更多的知識應(yīng)該去哪里?

官網(wǎng)多閱讀, 多看多總結(jié), 任何庫和插件都是

axios如何配置基地址?

axios.defaults.baseURL

3. nextTick和refs知識

3.0 $refs-獲取DOM ***

目標(biāo): 利用 id 或 ref 可以用于獲取 dom 元素

雖然vue的語法盡量的避免Dom操作，但是有情況還得獲取到dom元素對象
PS：
- 給標(biāo)簽添加ref屬性之后，vue內(nèi)部會自動獲取到此標(biāo)簽的dom對象，并放入$refs對象中
- ref：reference，引用，在這里我們把引用，理解為對象即可。（引用對象，實例對象）
- ref="myH1"相當(dāng)于是給h1的對象起了個名字叫myH1
- 所以，可以通過this.$refs.myH1找到h1標(biāo)簽
components/More.vue

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

總結(jié): 通過id / ref, 都可以獲取原生DOM標(biāo)簽

Vue中如何獲取原生DOM呢?

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

3.1 $refs-獲取組件對象

目標(biāo): 通過ref獲取組件對象, 調(diào)用組件里方法

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

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

More.vue - 獲取組件對象 - 調(diào)用組件方法

<template><div><p>1. 獲取原生DOM元素</p><h1 id="h" ref="myH">我是一個孤獨可憐又能吃的h1</h1><p>2. 獲取組件對象 - 可調(diào)用組件內(nèi)一切</p><Demo ref="de"></Demo></div> </template><script> // 目標(biāo): 獲取組件對象 // 1. 創(chuàng)建組件/引入組件/注冊組件/使用組件 // 2. 組件起別名ref // 3. 恰當(dāng)時機(jī), 獲取組件對象 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>

總結(jié): ref定義值, 通過$refs.值來獲取組件對象, 就能繼續(xù)調(diào)用組件內(nèi)的變量
PS：

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

let和const不存在變量提升

let和const不允許重復(fù)聲明

如何獲取組件對象呢?

目標(biāo)組件添加ref屬性
this.$refs.名字獲取組件對象

拿到組件對象能做什么?

調(diào)用組件里的屬性/方法

3.2 $nextTick使用

目標(biāo): 點擊修改data里的數(shù)據(jù)，立馬通過DOM元素獲取修改后的內(nèi)容

具體操作：
components/Move.vue

<template><div><p>1. 獲取原生DOM元素</p><h1 id="h" ref="myH">我是一個孤獨可憐又能吃的h1</h1><p>2. 獲取組件對象 - 可調(diào)用組件內(nèi)一切</p><Demo ref="de"></Demo><p>3. vue更新DOM是異步的</p><p ref="myP">{{ count }}</p><button @click="btn">點擊count+1, 馬上提取p標(biāo)簽內(nèi)容</button></div> </template><script> // 目標(biāo): 獲取組件對象 // 1. 創(chuàng)建組件/引入組件/注冊組件/使用組件 // 2. 組件起別名ref // 3. 恰當(dāng)時機(jī), 獲取組件對象 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監(jiān)測數(shù)據(jù)更新, 開啟一個DOM更新隊列(異步任務(wù))console.log(this.$refs.myP.innerHTML); // 0// 原因: Vue更新DOM異步// 解決: this.$nextTick()// 過程: DOM更新完會挨個觸發(fā)$nextTick里的函數(shù)體this.$nextTick(() => {console.log(this.$refs.myP.innerHTML); // 1})}} } </script>

總結(jié): 因為DOM更新是異步的

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

異步

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

this.$nextTick里的函數(shù)體

updated生命周期鉤子函數(shù)

3.3 $nextTick使用場景

目標(biāo): 點擊搜索按鈕自身隱藏，出現(xiàn)輸入框并馬上處于激活狀態(tài)

注意：一定要用v-if來寫，保證DOM異步更新前獲取不到輸入框，提醒$nextTick價值
如果使用v-show，那么v-show控制的標(biāo)簽，在界面加載的時候已經(jīng)在dom上了，只是控制顯示隱藏
控制顯示隱藏的速度是很快的，v-if是控制標(biāo)簽，掛載到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">點擊我進(jìn)行搜索</button></div> </template><script> // 目標(biāo): 點按鈕(消失) - 輸入框出現(xiàn)并聚焦 // 1. 獲取到輸入框 // 2. 輸入框調(diào)用事件方法focus()達(dá)到聚焦行為 export default {data(){return {isShow: false}},methods: {//注意函數(shù)內(nèi)使用await，需要添加asyncasync btn(){this.isShow = true;// this.$refs.myInp.focus() //PS：會報錯，myInp是undefined// 原因: data變化更新DOM是異步的// 輸入框還沒有掛載到真實DOM上// 解決:// this.$nextTick(() => {// this.$refs.myInp.focus()// })// 擴(kuò)展: await取代回調(diào)函數(shù)// $nextTick()原地返回Promise對象await this.$nextTick() //等待執(zhí)行完畢之后，再獲取焦點this.$refs.myInp.focus()}} } </script>

$nextTick函數(shù)原地返回什么?

Promise對象

如何在JS中主動觸發(fā)標(biāo)簽的事件呢?

獲取到DOM對象, 調(diào)用事件方法

3.4 組件name屬性使用

目標(biāo): 可以用組件的name屬性值, 來注冊組件名字

PS:
之前注冊組件的時候，：前邊的組件名是我們自己隨便寫的，現(xiàn)在我們想用人家自己的名字
ComName.name即為：“ComNameHaHa”
問題: 組件名不是可以隨便寫的?
答案: 我們封裝的組件-可以自己定義name屬性組件名-讓使用者有個統(tǒng)一的前綴風(fēng)格
具體操作：
新建：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是變量的話[]屬性名表達(dá)式//相當(dāng)于：//"ComNameHaHa": Com} } </script>

組件使用分為幾步?

創(chuàng)建組件/ 引入組件/ 注冊組件/ 使用組件

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

用組件對象的name屬性的值

今日總結(jié)

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

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

axios返回的是什么, 如何接收結(jié)果

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

知道$nextTick的作用

面試題

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

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

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

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

1**）beforeCreate**

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

2**）created**

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

3**）beforeMount**

在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。

4**）mounted**

el 被新創(chuàng)建的 vm.el 替換，并掛載到實例上去之后調(diào)用該鉤子。如果 root 實例掛載了一個文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時 vm.el 也在文檔內(nèi)。

5**）beforeUpdate**

數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動移除已添加的事件監(jiān)聽器。該鉤子在服務(wù)器端渲染期間不被調(diào)用，因為只有初次渲染會在服務(wù)端進(jìn)行。

6**）updated**

由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會調(diào)用該鉤子。

7**）activated**

keep-alive 組件激活時調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

8**）deactivated**

keep-alive 組件停用時調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

9**）beforeDestroy**

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

10**）destroyed**

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

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

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

3、第一次加載頁面會觸發(fā)哪幾個鉤子函數(shù)？（必會）

當(dāng)頁面第一次頁面加載時會觸發(fā) beforeCreate, created, beforeMount, mounted 這幾個鉤子函數(shù)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【https】对称加密与非对称加密再理解
下一篇： (3).Mybatis动态sql的使用