Vue基础学习笔记Day05_生命周期_axios
今日目標:
學習內容:
學習目錄:
知識點自測
- 知道window.onload的作用
- ajax是什么, XMLHttpRequest的使用步驟
- jQ的 $.ajax底層是什么?
- Promise的作用
- async和await的作用-如何和Promise配合
- 同步異步的概念, 代碼執行順序
- 請求和響應, 以及JSON解析能力
- Vue基礎, 組件使用, props傳值, 組件通信, 計算屬性使用, 對象引用類型使用
1. vue生命周期
1.0_組件-生命周期
- 一組件從 創建 到 銷毀 的整個過程就是生命周期
Vue的生命周期是什么?
1.1_鉤子函數
目標: Vue 框架內置函數,隨著組件的生命周期階段,自動執行
PS:這些函數,被稱為聲明周期函數,也叫鉤子函數
- 作用: 特定的時間點,執行特定的操作
- 場景: 組件創建完畢后,可以在created 生命周期函數中發起Ajax 請求,從而初始化 data 數據
- 分類: 4大階段8個方法
- 初始化
- 掛載
- 更新
- 銷毀
- 具體方法:
| 初始化 | beforeCreate | created |
| 掛載 | beforeMount | mounted |
| 更新 | beforeUpdate | updated |
| 銷毀 | beforeDestroy | destroyed |
- mount:掛載
- destory:銷毀
- 官方文檔
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
App.vue - 引入使用
<template><div><h1>1. 生命周期</h1><Life></Life></div> </template><script> import Life from './components/Life' export default {components: {Life} } </script>1.3_掛載階段
目標: 掌握掛載階段2個鉤子函數作用和執行時機
含義講解:
template選項檢查
有 - 編譯template返回render渲染函數
無 – 編譯el選項對應標簽作為template(要渲染的模板)
虛擬DOM掛載成真實DOM之前
beforeMount – 生命周期鉤子函數被執行
Create … – 把虛擬DOM和渲染的數據一并掛到真實DOM上
真實DOM掛載完畢
mounted – 生命周期鉤子函數被執行
- 接下來,開始練習:
- 在components/Life.vue 中繼續書寫:
1.4_更新階段
目標: 掌握更新階段2個鉤子函數作用和執行時機
含義講解:
當data里數據改變, 更新DOM之前
beforeUpdate – 生命周期鉤子函數被執行
Virtual DOM…… – 虛擬DOM重新渲染, 打補丁到真實DOM
updated – 生命周期鉤子函數被執行
當有data數據改變 – 重復這個循環
-
在components/Life.vue中繼續書寫:
-
準備ul+li循環, 按鈕添加元素, 觸發data改變->導致更新周期開始
1.5_銷毀階段
目標: 掌握銷毀階段2個鉤子函數作用和執行時機
含義講解:
當$destroy()被調用 – 比如組件DOM被移除(例v-if)
beforeDestroy – 生命周期鉤子函數被執行
拆卸數據監視器、子組件和事件偵聽器
實例銷毀后, 最后觸發一個鉤子函數
destroyed – 生命周期鉤子函數被執行
主要: 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的基本使用:語法
2.1_axios基本使用-獲取數據
目標: 調用文檔最后_獲取所有圖書信息接口
-
功能: 點擊調用后臺接口, 拿到所有數據 – 打印到控制臺
-
接口: 看本文檔最后:接口文檔
-
引入: 下載axios, 引入后才能使用
-
例子如下:
-
components/UseAxios.vue
2.2_axios基本使用-傳參
目標: 調用接口-獲取某本書籍信息
- 功能: 點擊調用后臺接口, 查詢用戶想要的書籍信息 – 打印到控制臺
- 例子如下:
- components/UseAxios.vue
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對象 },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
總結: 通過id / ref, 都可以獲取原生DOM標簽
Vue中如何獲取原生DOM呢?
3.1 $refs-獲取組件對象
目標: 通過ref獲取組件對象, 調用組件里方法
- 具體操作:
- 新建:components/Child/Demo.vue
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:
如何獲取組件對象呢?
- 目標組件添加ref屬性
- this.$refs.名字獲取組件對象
拿到組件對象能做什么?
- 調用組件里的屬性/方法
3.2 $nextTick使用
目標: 點擊修改data里的數據,立馬通過DOM元素獲取修改后的內容
- 具體操作:
- components/Move.vue
總結: 因為DOM更新是異步的
3.3 $nextTick使用場景
目標: 點擊搜索按鈕自身隱藏,出現輸入框并馬上處于激活狀態
- 注意:一定要用v-if來寫,保證DOM異步更新前獲取不到輸入框,提醒$nextTick價值
- 如果使用v-show,那么v-show控制的標簽,在界面加載的時候已經在dom上了,只是控制顯示隱藏
- 控制顯示隱藏的速度是很快的,v-if是控制標簽,掛載到dom并且顯示,速度比較慢
- 所以,v-if才會有延遲的效果,我們才需要使用$nextTick
- v-show,也得通過$nextTick來等待
- 具體操作:
- 新建:components/Tick.vue
3.4 組件name屬性使用
目標: 可以用組件的name屬性值, 來注冊組件名字
-
PS:
-
之前注冊組件的時候,:前邊的組件名是我們自己隨便寫的,現在我們想用人家自己的名字
-
ComName.name即為:“ComNameHaHa”
-
問題: 組件名不是可以隨便寫的?
-
答案: 我們封裝的組件-可以自己定義name屬性組件名-讓使用者有個統一的前綴風格
-
具體操作:
-
新建:components/Com.vue
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>今日總結
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的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【https】对称加密与非对称加密再理解
- 下一篇: (3).Mybatis动态sql的使用