Vue基础学习笔记Day05_生命周期_axios
生活随笔
收集整理的這篇文章主要介紹了
Vue基础学习笔记Day05_生命周期_axios
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
今日目標(biāo):
學(xué)習(xí)內(nèi)容：
學(xué)習(xí)目錄:
知識(shí)點(diǎn)自測(cè)
- 知道window.onload的作用
- ajax是什么, XMLHttpRequest的使用步驟
- jQ的 $.ajax底層是什么?
- Promise的作用
- async和await的作用-如何和Promise配合
- 同步異步的概念, 代碼執(zhí)行順序
- 請(qǐng)求和響應(yīng), 以及JSON解析能力
- Vue基礎(chǔ), 組件使用, props傳值, 組件通信, 計(jì)算屬性使用, 對(duì)象引用類型使用
1. vue生命周期
1.0_組件-生命周期
- 一組件從 創(chuàng)建 到 銷毀 的整個(gè)過程就是生命周期
Vue的生命周期是什么?
1.1_鉤子函數(shù)
目標(biāo): Vue 框架內(nèi)置函數(shù)，隨著組件的生命周期階段，自動(dòng)執(zhí)行
PS：這些函數(shù)，被稱為聲明周期函數(shù)，也叫鉤子函數(shù)
- 作用: 特定的時(shí)間點(diǎn)，執(zhí)行特定的操作
- 場(chǎng)景: 組件創(chuàng)建完畢后，可以在created 生命周期函數(shù)中發(fā)起Ajax 請(qǐng)求，從而初始化 data 數(shù)據(jù)
- 分類: 4大階段8個(gè)方法
- 初始化
- 掛載
- 更新
- 銷毀
- 具體方法：
| 初始化 | beforeCreate | created |
| 掛載 | beforeMount | mounted |
| 更新 | beforeUpdate | updated |
| 銷毀 | beforeDestroy | destroyed |
- mount：掛載
- destory：銷毀
- 官方文檔
1.2_初始化階段
目標(biāo): 掌握初始化階段2個(gè)鉤子函數(shù)作用和執(zhí)行時(shí)機(jī)
含義講解:
new Vue() – Vue實(shí)例化(組件也是一個(gè)小的Vue實(shí)例)
Init Events & Lifecycle – 初始化事件和生命周期函數(shù)
beforeCreate – 生命周期鉤子函數(shù)被執(zhí)行
Init injections&reactivity – Vue內(nèi)部添加data和methods等
created – 生命周期鉤子函數(shù)被執(zhí)行, 實(shí)例創(chuàng)建
接下來是編譯模板階段 –開始分析
Has el option? – 是否有el選項(xiàng) – 檢查要掛到哪里
沒有. 調(diào)用$mount()方法
有, 繼續(xù)檢查template選項(xiàng)
- 接下來，練習(xí)：
- 創(chuàng)建一個(gè)文件：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>1.3_掛載階段
目標(biāo): 掌握掛載階段2個(gè)鉤子函數(shù)作用和執(zhí)行時(shí)機(jī)
含義講解:
template選項(xiàng)檢查
有 - 編譯template返回render渲染函數(shù)
無 – 編譯el選項(xiàng)對(duì)應(yīng)標(biāo)簽作為template(要渲染的模板)
虛擬DOM掛載成真實(shí)DOM之前
beforeMount – 生命周期鉤子函數(shù)被執(zhí)行
Create … – 把虛擬DOM和渲染的數(shù)據(jù)一并掛到真實(shí)DOM上
真實(shí)DOM掛載完畢
mounted – 生命周期鉤子函數(shù)被執(zhí)行
- 接下來，開始練習(xí)：
- 在components/Life.vue 中繼續(xù)書寫：
1.4_更新階段
目標(biāo): 掌握更新階段2個(gè)鉤子函數(shù)作用和執(zhí)行時(shí)機(jī)
含義講解:
當(dāng)data里數(shù)據(jù)改變, 更新DOM之前
beforeUpdate – 生命周期鉤子函數(shù)被執(zhí)行
Virtual DOM…… – 虛擬DOM重新渲染, 打補(bǔ)丁到真實(shí)DOM
updated – 生命周期鉤子函數(shù)被執(zhí)行
當(dāng)有data數(shù)據(jù)改變 – 重復(fù)這個(gè)循環(huán)
-
在components/Life.vue中繼續(xù)書寫：
-
準(zhǔn)備ul+li循環(huán), 按鈕添加元素, 觸發(fā)data改變->導(dǎo)致更新周期開始
1.5_銷毀階段
目標(biāo): 掌握銷毀階段2個(gè)鉤子函數(shù)作用和執(zhí)行時(shí)機(jī)
含義講解:
當(dāng)$destroy()被調(diào)用 – 比如組件DOM被移除(例v-if)
beforeDestroy – 生命周期鉤子函數(shù)被執(zhí)行
拆卸數(shù)據(jù)監(jiān)視器、子組件和事件偵聽器
實(shí)例銷毀后, 最后觸發(fā)一個(gè)鉤子函數(shù)
destroyed – 生命周期鉤子函數(shù)被執(zhí)行
主要: App.vue - 點(diǎn)擊按鈕讓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/)
- 特點(diǎn)
- 支持客戶端發(fā)送Ajax請(qǐng)求
- 支持服務(wù)端Node.js發(fā)送請(qǐng)求
- 支持Promise相關(guān)用法
- 支持請(qǐng)求和響應(yīng)的攔截器功能
- 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
- axios 底層還是原生js實(shí)現(xiàn), 內(nèi)部通過Promise封裝的
安裝命令
yarn add axios- axios的基本使用：語法
2.1_axios基本使用-獲取數(shù)據(jù)
目標(biāo): 調(diào)用文檔最后_獲取所有圖書信息接口
-
功能: 點(diǎn)擊調(diào)用后臺(tái)接口, 拿到所有數(shù)據(jù) – 打印到控制臺(tái)
-
接口: 看本文檔最后：接口文檔
-
引入: 下載axios, 引入后才能使用
-
例子如下:
-
components/UseAxios.vue
2.2_axios基本使用-傳參
目標(biāo): 調(diào)用接口-獲取某本書籍信息
- 功能: 點(diǎn)擊調(diào)用后臺(tái)接口, 查詢用戶想要的書籍信息 – 打印到控制臺(tái)
- 例子如下:
- components/UseAxios.vue
2.4_axios基本使用-全局配置
目標(biāo): 避免前綴基地址, 暴露在邏輯頁面里, 統(tǒng)一設(shè)置
axios.defaults.baseURL = "http://xxxx."// 所有請(qǐng)求的url前置可以去掉, 請(qǐng)求時(shí), axios會(huì)自動(dòng)拼接baseURL的地址在前面 getAllFn() {axios({url: "/api",method: "GET", // 默認(rèn)就是GET方式請(qǐng)求, 可以省略不寫}).then((res) => {console.log(res);});// axios()-原地得到Promise對(duì)象 },3. nextTick和refs知識(shí)
3.0 $refs-獲取DOM ***
目標(biāo): 利用 id 或 ref 可以用于獲取 dom 元素
-
雖然vue的語法盡量的避免Dom操作，但是有情況還得獲取到dom元素對(duì)象
-
PS：
- 給標(biāo)簽添加ref屬性之后，vue內(nèi)部會(huì)自動(dòng)獲取到此標(biāo)簽的dom對(duì)象，并放入$refs對(duì)象中
- ref：reference，引用，在這里我們把引用，理解為對(duì)象即可。（引用對(duì)象，實(shí)例對(duì)象）
- ref="myH1"相當(dāng)于是給h1的對(duì)象起了個(gè)名字叫myH1
- 所以，可以通過this.$refs.myH1找到h1標(biāo)簽
-
components/More.vue
總結(jié): 通過id / ref, 都可以獲取原生DOM標(biāo)簽
Vue中如何獲取原生DOM呢?
3.1 $refs-獲取組件對(duì)象
目標(biāo): 通過ref獲取組件對(duì)象, 調(diào)用組件里方法
- 具體操作：
- 新建：components/Child/Demo.vue
More.vue - 獲取組件對(duì)象 - 調(diào)用組件方法
<template><div><p>1. 獲取原生DOM元素</p><h1 id="h" ref="myH">我是一個(gè)孤獨(dú)可憐又能吃的h1</h1><p>2. 獲取組件對(duì)象 - 可調(diào)用組件內(nèi)一切</p><Demo ref="de"></Demo></div> </template><script> // 目標(biāo): 獲取組件對(duì)象 // 1. 創(chuàng)建組件/引入組件/注冊(cè)組件/使用組件 // 2. 組件起別名ref // 3. 恰當(dāng)時(shí)機(jī), 獲取組件對(duì)象 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.值 來獲取組件對(duì)象, 就能繼續(xù)調(diào)用組件內(nèi)的變量
PS：
如何獲取組件對(duì)象呢?
- 目標(biāo)組件添加ref屬性
- this.$refs.名字獲取組件對(duì)象
拿到組件對(duì)象能做什么?
- 調(diào)用組件里的屬性/方法
3.2 $nextTick使用
目標(biāo): 點(diǎn)擊修改data里的數(shù)據(jù)，立馬通過DOM元素獲取修改后的內(nèi)容
- 具體操作：
- components/Move.vue
總結(jié): 因?yàn)镈OM更新是異步的
3.3 $nextTick使用場(chǎng)景
目標(biāo): 點(diǎn)擊搜索按鈕自身隱藏，出現(xiàn)輸入框并馬上處于激活狀態(tài)
- 注意：一定要用v-if來寫，保證DOM異步更新前獲取不到輸入框，提醒$nextTick價(jià)值
- 如果使用v-show，那么v-show控制的標(biāo)簽，在界面加載的時(shí)候已經(jīng)在dom上了，只是控制顯示隱藏
- 控制顯示隱藏的速度是很快的，v-if是控制標(biāo)簽，掛載到dom并且顯示，速度比較慢
- 所以，v-if才會(huì)有延遲的效果，我們才需要使用$nextTick
- v-show，也得通過$nextTick來等待
- 具體操作：
- 新建：components/Tick.vue
3.4 組件name屬性使用
目標(biāo): 可以用組件的name屬性值, 來注冊(cè)組件名字
-
PS:
-
之前注冊(cè)組件的時(shí)候，：前邊的組件名是我們自己隨便寫的，現(xiàn)在我們想用人家自己的名字
-
ComName.name即為：“ComNameHaHa”
-
問題: 組件名不是可以隨便寫的?
-
答案: 我們封裝的組件-可以自己定義name屬性組件名-讓使用者有個(gè)統(tǒng)一的前綴風(fēng)格
-
具體操作：
-
新建：components/Com.vue
App.vue - 注冊(cè)和使用
<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使用場(chǎng)景</h1><Tick></Tick><hr><h1>5. 組件對(duì)象里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,//以下注冊(cè)寫法都可以// Tick: Tick,//"Tick": Tick, //將vetur禁用掉們才能添加成功[Com.name]: Com // 對(duì)象里的key是變量的話[]屬性名表達(dá)式//相當(dāng)于：//"ComNameHaHa": Com} } </script>今日總結(jié)
vue的生命周期哪4個(gè)階段, 哪8個(gè)方法（created ,mounted）
axios是什么, 底層是什么, 具體如何使用
axios返回的是什么, 如何接收結(jié)果
知道ref和$refs使用和作用以及場(chǎng)景?
知道$nextTick的作用
面試題
1、Vue 的 nextTick 的原理是什么? （高薪常問）
\1. 為什么需要 nextTick ，Vue 是異步修改 DOM 的并且不鼓勵(lì)開發(fā)者直接接觸 DOM，但有時(shí)候業(yè)務(wù)需要必須對(duì)數(shù)據(jù)更改--刷新后的 DOM 做相應(yīng)的處理，這時(shí)候就可以使用 Vue.nextTick(callback)這個(gè) api 了。\2. 理解原理前的準(zhǔn)備 首先需要知道事件循環(huán)中宏任務(wù)和微任務(wù)這兩個(gè)概念,常見的宏任務(wù)有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常見的微任務(wù)有 process.nextTick(Nodejs),Promise.then(), MutationObserver;\3. 理解 nextTick 的原理正是 vue 通過異步隊(duì)列控制 DOM 更新和 nextTick 回調(diào)函數(shù)先后執(zhí)行的方式。如果大家看過這部分的源碼，會(huì)發(fā)現(xiàn)其中做了很多 isNative()的判斷，因?yàn)檫@里還存在兼容性優(yōu)雅降級(jí)的問題。可見 Vue 開發(fā)團(tuán)隊(duì)的深思熟慮，對(duì)性能的良苦用心。2、vue生命周期總共分為幾個(gè)階段？（必會(huì)）
Vue 實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。
1**）beforeCreate**
在實(shí)例初始化之后，數(shù)據(jù)觀測(cè) (data observer) 和 event/watcher 事件配置之前被調(diào)用。2**）created**
在實(shí)例創(chuàng)建完成后被立即調(diào)用。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè) (data observer)， 屬性和方法的運(yùn)算，watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el 屬性目前不可見。3**）beforeMount**
在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。4**）mounted**
el 被新創(chuàng)建的 vm.el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果 root 實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時(shí) vm.el 也在文檔內(nèi)。5**）beforeUpdate**
數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動(dòng)移除已添加的事件監(jiān)聽器。該鉤子在服務(wù)器端渲染期間不被調(diào)用，因?yàn)橹挥谐醮武秩緯?huì)在服務(wù)端進(jìn)行。6**）updated**
由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。7**）activated**
keep-alive 組件激活時(shí)調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。8**）deactivated**
keep-alive 組件停用時(shí)調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。9**）beforeDestroy**
實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。10**）destroyed**
Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。11**）errorCaptured（2.5.0+ 新增）**
當(dāng)捕獲一個(gè)來自子孫組件的錯(cuò)誤時(shí)被調(diào)用。此鉤子會(huì)收到三個(gè)參數(shù)：錯(cuò)誤對(duì)象、發(fā)生錯(cuò)誤的組件實(shí)例以及一個(gè)包含錯(cuò)誤來源信息的字符串。此鉤子可以返回 false 以阻止該錯(cuò)誤繼續(xù)向上傳播。3、第一次加載頁面會(huì)觸發(fā)哪幾個(gè)鉤子函數(shù)？（必會(huì)）
當(dāng)頁面第一次頁面加載時(shí)會(huì)觸發(fā) beforeCreate, created, beforeMount, mounted 這幾個(gè)鉤子函數(shù)
總結(jié)
以上是生活随笔為你收集整理的Vue基础学习笔记Day05_生命周期_axios的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【https】对称加密与非对称加密再理解
- 下一篇： 【Vue知识点- No5.】生命周期、a