No5.生命周期、axios、購物車案例

知識點自測

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

學習目標

1.能夠說出 vue 組件的生命周期。
2.能夠掌握 axios 的使用。
4.能夠了解 $refs, $nextTick 使用和 name 使用。
4.能夠完成購物車案例開發。

1. vue生命周期

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

1-1.鉤子函數

含義: 鉤子函數是 Vue 框架的內置函數，隨著組件的生命周期階段，自動執行。

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

階段方法名方法名

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

官網文檔-生命周期圖示

1-2.初始化階段

含義講解:

1.new Vue() 表示 Vue實例化(組件也是一個小的Vue實例)

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

3.beforeCreate – 生命周期鉤子函數被執行，此時還無法獲取到data/methods

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

5.created – 生命周期鉤子函數被執行, 實例創建完畢（可以得到data和methods等等）

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

7.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},// data和methods初始化以后// 場景: 網絡請求, 注冊全局事件created(){console.log("created -- 執行");console.log(this.msg); // hello, Vuethis.timer = setInterval(() => {console.log("哈哈哈");}, 1000)} } </script>

• App.vue - 引入使用

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

1-3.掛載階段

含義講解:
1.template選項檢查
? 有 - 編譯 template 返回 render 渲染函數
? 無 – 編譯 el 選項對應標簽作為template(要渲染的模板)

2.虛擬DOM掛載成真實DOM之前

3.beforeMount – 生命周期鉤子函數被執行，此時還無法獲取“真實”DOM元素

4.Create vm.$el and replace “el” with it – 把虛擬DOM和渲染的數據一并掛到真實的DOM上

5.真實DOM掛載完畢

6.mounted – 生命周期鉤子函數被執行，組件掛載完畢，可以獲取到真實的“DOM”

• 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掛載以后// 場景: 掛載后真實DOMmounted(){console.log("mounted -- 執行");console.log(document.getElementById("myP")); // p} } </script>

1-4.更新階段

含義講解:
1.當data里數據改變, 更新DOM之前

2.beforeUpdate – 生命周期鉤子函數被執行。掛載以后data更新，將要更新DOM之前。

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

4.updated – 生命周期鉤子函數被執行，獲取更新的“真實”DOM

5.當有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},// 更新之后// 場景: 獲取更新后的真實DOMupdated(){console.log("updated -- 執行");console.log(document.querySelectorAll("#myUL>li")[4]); // li} } </script>

1-5.銷毀階段

含義講解: 銷毀：組件從真實的DOM上被移除。

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

2.beforeDestroy – 生命周期鉤子函數被執行，手動清除：定時器/計時器/eventBus事件（$off）

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

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

5.destroyed – 生命周期鉤子函數被執行，已經銷毀。

• components/Life.vue - 準備生命周期方法(Life組件即將要被刪除)

<script> export default {// ...省略其他代碼// 四. 銷毀// 前提: v-if="false" 銷毀Vue實例// 場景: 移除全局事件, 移除當前組件, 計時器, 定時器, eventBus移除事件$off方法beforeDestroy(){// console.log('beforeDestroy -- 執行');clearInterval(this.timer)},destroyed(){// console.log("destroyed -- 執行");} } </script>

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

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

2. axios

2-1.axios基本使用

定義：axios是一個專門用于發送ajax請求的庫。

axios官方文檔

什么是ajax？ 一種前端異步請求后端的技術。
ajax原理： 瀏覽器window接口的XMLHttpRequest。
axios是什么？ 基于原生ajax+Promise技術封裝的用于前后端的請求庫。

特點：

• 支持客戶端發送Ajax請求。
• 支持服務端Node.js發送請求。
• 支持Promise相關用法。
• 支持請求和響應的攔截器功能。
• 自動轉換JSON數據。
• axios 底層還是原生js實現, 內部通過Promise封裝的。

axios({method: '請求方式', // get posturl: '請求地址',data: { // 拼接到請求體的參數, post請求的參數xxx: xxx,},params: { // 拼接到請求行的參數, get請求的參數xxx: xxx } }).then(res => {console.log(res.data) // 后臺返回的結果 }).catch(err => {console.log(err) // 后臺報錯返回 })

get請求獲取數據

功能: 點擊調用后臺接口, 拿到所有數據 – 打印到控制臺。
接口: 參考：8.接口文檔
引入: 下載axios, 引入后才能使用。yarn add axios 或者 npm i axios
效果:

例子如下:

• components/UseAxios.vue

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

get傳參

功能: 點擊調用后臺接口, 查詢用戶想要的書籍信息 – 打印到控制臺上。
接口: 參考：8.接口文檔
效果:

例子如下:

• components/UseAxios.vue，拿到用戶輸入框表單中的值，最簡單的方式就是使用雙向綁定：v-model

<template><div><p>2.查詢某本書籍信息</p><input type="text" placeholder="請輸入要查詢的書名" v-model="bName" /><button @click="findFn">查詢</button></div> </template><script> import axios from "axios"; export default {data() {return {bName: ""}},methods: {// ...省略了查詢所有的代碼findFn() {axios({url: "http://123.57.109.30:3006/api/getbooks",method: "GET",params: { // 在params中寫的參數名都會被axios最終拼接到url的?后面bookname: this.bName}}).then(res => {console.log(res)})}}, } </script>

post傳參（發布書籍）

功能: 點擊新增按鈕, 把用戶輸入的書籍信息, 傳遞給后臺 – 把結果打印在控制臺上。
接口: 參考：8.接口文檔
效果:

ES6中的擴展運算符（…）

例子如下:

• components/UseAxios.vue
• ES6中的擴展運算符（…）

<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://123.57.109.30:3006/api/addbook",method: "POST",data: {appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",...this.bookObj// 等同于下面// bookname: this.bookObj.bookname,// author: this.bookObj.author,// publisher: this.bookObj.publisher}}) }}, } </script>

全局配置

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

• UseAxios.vue

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

3. $nextTick和$refs

問題：Vue中如何獲取真實的DOM元素呢？

3-1.$refs-獲取原生DOM

在 mounted 生命周期，有2種方式獲取原生DOM標簽。

• components/More.vue

<template><div><p>1.ref/id獲取原生DOM元素</p><h1 id="h" ref="myH">通過id或者ref屬性獲取原生DOM</h1></div> </template><script> // 目標: 獲取組件對象 // 1. 創建組件/引入組件/注冊組件/使用組件 // 2. 組件起別名ref // 3. 恰當時機, 通過id/通過ref屬性，獲取目標標簽。 export default {mounted(){console.log(document.getElementById("h")); // h1console.log(this.$refs.myH); // h1} } </script>

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

3-2.$refs-獲取組件對象

目標: 通過ref屬性獲取組件對象, 調用組件里的屬性或者方法。

1.創建Demo.vue組件，寫一個方法。
2.App.vue 使用Demo組件，給ref屬性（名字隨意）
3.通過ref屬性獲取組件對象，可調用組件對象里面的方法。

• components/Child/Demo.vue

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

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

<template><div><p>1.ref/id獲取原生DOM元素</p><h1 id="h" ref="myH">通過id或者ref屬性獲取原生DOM</h1><p>2.獲取組件對象 - 可調用組件內的一切</p><Demo ref="demo"></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.demo;demoObj.fn()},components: {Demo} } </script>

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

3-3.$nextTick使用

等DOM更新后，觸發此方法里的函數體執行。this.$nextTick(函數體)

Vue更新DOM是異步的

點擊count++, 馬上通過"原生DOM"拿標簽內容, 無法拿到新值。

• components/Move.vue - 繼續新增第三套代碼

<template><div><p>1.ref/id獲取原生DOM元素</p><h1 id="h" ref="myH">通過id或者ref屬性獲取原生DOM</h1><p>2.獲取組件對象 - 可調用組件內的一切</p><Demo ref="demo"></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.demo;demoObj.fn()},components: {Demo},data(){return {count: 0}},methods: {btn(){this.count++; // vue監測數據更新, 開啟一個DOM更新隊列(異步任務)console.log(this.$refs.myP.innerHTML); // 0// 點擊btn后，頁面中的count從0變成1了，// 但是控制臺還是0。【原因:】 Vue更新DOM是異步的。// 【解決】 用 this.$nextTick()// 【過程】 DOM更新完后會挨個觸發$nextTick里的函數體。this.$nextTick(() => {console.log(this.$refs.myP.innerHTML); // 1})}} } </script>

總結: 我們可以在哪里訪問到更新后的DOM呢？

• this.$nextTick里的函數體。
• updated生命周期鉤子函數。

3-4.$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: {async btn(){this.isShow = true;// this.$refs.myInp.focus()// 原因: isShow發生變化時，上面的DOM更新是異步的// 輸入框還沒有掛載到真實DOM上。// 【解決:】// this.$nextTick(() => {// this.$refs.myInp.focus()// })// 【擴展:】 await取代回調函數// $nextTick()原地返回Promise對象。await this.$nextTick()// 上面的一句意思是等待DOM更新完成后執行下面的代碼。this.$refs.myInp.focus()}} } </script>

優化：$nextTick() 這個函數在原地返回的是一個Promise對象，所以可以用$nextTick() 返回Promise配合await使用。await只能用在被async修飾的函數內。

3-5.組件name屬性使用

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

問題: 組件名不是可以隨便寫的?
答案: 我們封裝的組件-可以自己定義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,[Com.name]: Com // 對象里的key是變量的話[]屬性名表達式// "ComNameHaHa": Com} } </script>

4. 案例 - 購物車

4.0 項目初始化

目標: 初始化新項目, 清空不要的東西, 下載bootstrap庫, 下載less模塊

vue create shopcar-demo yarn add bootstrap 或者npm i bootstrap yarn add less less-loader@5.0.0 -D

按照需求, 把項目頁面拆分成幾個組件, 在components下創建：

• MyHeader組件、MyFooter組件、MyGoods組件 - 商品、MyCount組件
• 然后新建 vue.config.js，暫時關閉 eslint 檢查：

module.exports = {lintOnSave: false }

• 在main.js 中引入bootStrap庫

// 引入第三方包里的某個css文件 import "bootstrap/dist/css/bootstrap.css"

• components/MyHeader.vue

<template><div class="my-header">購物車案例</div> </template><script> export default { } </script><style lang="less" scoped>.my-header {height: 45px;line-height: 45px;text-align: center;background-color: #1d7bff;color: #fff;position: fixed;top: 0;left: 0;width: 100%;z-index: 2;} </style>

• components/MyGoods.vue

<template><div class="my-goods-item"><div class="left"><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="input"><label class="custom-control-label" for="input"><img src="http://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt=""></label></div></div><div class="right"><div class="top">商品名字</div><div class="bottom"><span class="price">￥ 100</span><span>數量組件</span></div></div></div> </template><script> export default { } </script><style lang="less" scoped> .my-goods-item {display: flex;padding: 10px;border-bottom: 1px solid #ccc;.left {img {width: 120px;height: 120px;margin-right: 8px;border-radius: 10px;}.custom-control-label::before,.custom-control-label::after {top: 50px;}}.right {flex: 1;display: flex;flex-direction: column;justify-content: space-between;.top{font-size: 14px;font-weight: 700;}.bottom {display: flex;justify-content: space-between;padding: 5px 0;align-items: center;.price {color: red;font-weight: bold;}}} } </style>

目標: 完成商品組件右下角商品組件的開發

• components/MyCount.vue

<template><div class="my-counter"><button type="button" class="btn btn-light" >-</button><input type="number" class="form-control inp" ><button type="button" class="btn btn-light">+</button></div> </template><script> export default { } </script><style lang="less" scoped> .my-counter {display: flex;.inp {width: 45px;text-align: center;margin: 0 10px;}.btn, .inp{transform: scale(0.9);} } </style>

• 在MyGoods.vue組件上引入MyCount.vue組件：

<template><div class="my-goods-item"><div class="left">// ....省略</div><div class="right"><div class="top">商品名字</div><div class="bottom"><span class="price">￥ 100</span><span><MyCount></MyCount></span></div></div></div> </template> <script> import Mycount from './MyCount' export default {components: {MyCount} } </script>

• components/MyFooter.vue

<template><!-- 底部 --><div class="my-footer"><!-- 全選 --><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="footerCheck"><label class="custom-control-label" for="footerCheck">全選</label></div><!-- 合計 --><div><span>合計:</span><span class="price">￥ 0</span></div><!-- 按鈕 --><button type="button" class="footer-btn btn btn-primary">結算 ( 0 )</button></div> </template><script> export default {} </script><style lang="less" scoped> .my-footer {position: fixed;z-index: 2;bottom: 0;width: 100%;height: 50px;border-top: 1px solid #ccc;display: flex;justify-content: space-between;align-items: center;padding: 0 10px;background: #fff;.price {color: red;font-weight: bold;font-size: 15px;}.footer-btn {min-width: 80px;height: 30px;line-height: 30px;border-radius: 25px;padding: 0;} } </style>

• 然后引入到App.vue上注冊

<template><div><MyHeader></MyHeader><div class="main"><MyGoods></MyGoods></div> <MyFooter></MyFooter></div> </template><script> import MyHeader from "./components/MyHeader" import MyGoods from "./components/MyGoods" import MyFooter from "./components/MyFooter"export default {components: {MyHeader,MyGoods,MyFooter,} } </script> <style scoped>.main {padding-top: 45px;padding-bottom: 50px;} </style>

啟動項目：yarn serve 或者 npm run serve

4.1 頭部自定義組件

目的: 頭部的標題, 顏色, 背景色可以隨便修改, props類型的校驗

思路：
1.在MyHeader.vue中準備props里變量, 然后使用。
2.在使用MyHeader.vue組件時, 傳入相應的值 (color和backgroundColor)
key值color和變量名重名了，所以可以簡寫成color。
動態style：:style="{css屬性名：值}"

• components/MyHeader.vue

<template><div class="my-header" :style="{backgroundColor: background, color}">{{ title }}</div> </template><script> // 目標: 讓 Header 組件支持不同的項目 - 自定義組件 // 1. 分析哪些可以自定義 (背景色, 文字顏色, 文字內容) // 2. 新知識點：可以對props的變量的值 進行校驗，props換成了對象的寫法 // 3. 內部使用props變量的值 // 4. 外部使用時, 遵守變量名作為屬性名, 值的類型也要遵守 export default {props: {background: String, // 外部插入此變量的值, 必須是字符串類型, 否則報錯color: {type: String, // 約束color值的類型default: "#fff" // color變量默認值(外部不給color傳值, 使用默認值)},title: { // 文字內容type: String,required: true // 必須傳入此變量的值}} } </script><style lang="less" scoped>.my-header {height: 45px;line-height: 45px;text-align: center;background-color: #1d7bff;color: #fff;position: fixed;top: 0;left: 0;width: 100%;z-index: 2;} </style>

• App.vue傳入相應自定義的值

<MyHeader backgrounnd="pink" title="購物車案例"></MyHeader>

總結:

• <MyHeader title=“購物車案例”></MyHeader>中title前面沒有加冒號表示是固定的值，如果加了冒號就代表是變量了。

【問題1】封裝的組件-如何支持不同的項目需求？

• 可以自定義props變量使用，使用組件者，傳入具體數據。

【問題2】props有哪2種定義方式：

• props: [] - 只能聲明變量和接收, 不能類型校驗。
• props: {} - 聲明變量和校驗類型規則 - 外部傳入值不對則報錯。

4.2 請求數據（axios掛載到Vue原型上）

配置基礎地址: https://www.escook.cn/api/cart (get方式)

1.下載axios：yarn add axios 或者 npm i axios
【問題】如何定義全局變量？ 在Vue的原型上添加，組件對象通過原型鏈可以訪問。
2.main.js中： axios掛載到Vue原型上，作為全局屬性。
3.但是，把 axios 掛載到 Vue 原型上，有一個缺點：不利于 API 接口的復用！！！

// 目標: 請求數據 - 打印 // 1. 下載axios庫, main.js - 全局綁定屬性 (確保任意.vue文件可以都訪問到這個axios方法) import axios from 'axios' // 2. 基礎地址 axios.defaults.baseURL = "https://www.escook.cn" // 3. axios方法添加到Vue的原型上 // 今后，在每個 .vue 組件中要發起請求，直接調用 this.$axios.xxx // 但是，把 axios 掛載到 Vue 原型上，有一個缺點：不利于 API 接口的復用！！！ Vue.prototype.$axios = axiosnew Vue({render: h => h(App), }).$mount('#app')

App.vue請求使用

<script> export default {// ... 省略其他代碼created(){// 不必再自己引入axios變量, 而是直接使用全局屬性$axiosthis.$axios({url: "/api/cart"}).then(res => {console.log(res);})} } </script>

總結: 利用axios, 調用接口, 把數據請求回來。

4.3 數據渲染

需求: 把上面請求的數據, 使用MyGoods組件展示。
1.App.vue把數據保存到data()定義的變量上。
2.使用v-for循環數組使用組件。
3.分別給商品組件傳入數據對象。

數據格式：

• App.vue

<MyGoods v-for="obj in list" :key="obj.id":gObj="obj" ></MyGoods><script> export default {data(){return {list: [] // 商品所有數據}},// ... 省略其他代碼created(){// 不必在自己引入axios變量, 而是直接使用全局屬性$axiosthis.$axios({url: "/api/cart"}).then(res => {console.log(res);// 這里用的是箭頭函數（不要用普通的function），// 所以this可以指向外層作用域中list的值this.list = res.data.list})} </script>

• 子MyGoods.vue- 父向子傳值。

<template><div class="my-goods-item"><div class="left"><div class="custom-control custom-checkbox"><!-- *重要:每個對象和組件都是獨立的對象里的goods_state關聯自己對應商品的復選框--><!-- bug:循環的所有label的for都是input, id也都是input - 默認只有第一個生效解決: 每次對象里的id值(1, 2), 分別給id和for使用即可區分--><input type="checkbox" class="custom-control-input" :id="gObj.id"v-model="gObj.goods_state"><label class="custom-control-label" :for="gObj.id"><img :src="gObj.goods_img" alt=""></label></div></div><div class="right"><div class="top">{{ gObj.goods_name }}</div><div class="bottom"><span class="price">￥ {{ gObj.goods_price }}</span><span><MyCount :obj="gObj"></MyCount></span></div></div></div> </template><script> import MyCount from './MyCount' export default {props: {gObj: Object // 修飾要傳過來的值的類型},components: {MyCount} } </script>

• MyCount.vue

<template><div class="my-counter"><button type="button" class="btn btn-light" >-</button><input type="number" class="form-control inp" v-model.number="obj.goods_count"><button type="button" class="btn btn-light" >+</button></div> </template><script> export default {props: {obj: Object // 商品對象// 因為數量控制要通過對象"互相引用的關系"來影響外面對象里的數量值，// 所以最好傳對象進來} } </script>

總結: 把各個組件關聯起來, 把數據都鋪設到頁面上。

4.4 商品選中

Bug：循環的所有label的for（要和關聯的input標簽的id屬性值一樣）值都是input，input標簽的id值也是input，這樣就導致默認只有第一個生效（點擊圖片不能使復選框選中）。
解決：每次對象里的id值，分別給id和for使用即可區分。因為id是唯一的, 如果用id=“input”，那么無論點擊哪一張圖片，都是第一個選框選中效果生效。所以用數據的id來作為標簽的id, 分別獨立, 為了兼容label點擊圖片也能選中的效果。

• MyGoods.vue

<input type="checkbox" class="custom-control-input" :id="gObj.id"v-model="gObj.goods_state"> <label class="custom-control-label" :for="gObj.id"><img :src="gObj.goods_img" alt=""> </label>

總結: lable標簽的for值對應input標簽的id值, 點擊label標簽就能讓對應input處于激活。
label標簽有什么用？關聯表單，點擊label標簽上，相當于點擊表單。

4.5 數量控制

需求: 點擊 + 和 - 或者直接修改輸入框的值影響商品購買的數量。

• MyCount.vue中的 obj.goods_count > 1 && 可以省略。

<template><div class="my-counter"><button type="button" class="btn btn-light" :disabled="obj.goods_count === 1" @click="obj.goods_count > 1 && obj.goods_count--">-</button><input type="number" class="form-control inp" v-model.number="obj.goods_count"><button type="button" class="btn btn-light" @click="obj.goods_count++">+</button></div> </template><script> // 目標: 商品數量 - 控制 // 1. 外部傳入數據對象 // 2. v-model關聯對象的goods_count屬性和輸入框 (雙向綁定) // 3. 商品按鈕 +和-, 商品數量最少1件 // 4. 偵聽數量改變, 小于1, 直接強制覆蓋1 export default {props: {obj: Object // 商品對象},// 因為數量控制要通過對象"互相引用的關系"來影響外面對象里的數量值, // 所以最好傳 對象進來watch: { // 偵聽輸入框中輸入的數據不能為小數obj: {deep: true,handler(){ // 拿到商品數量, 判斷小于1, 強制修改成1if (this.obj.goods_count < 1) {this.obj.goods_count = 1}}}} } </script>

4.6 全選功能

全選和小選框，互相影響的思路是什么？
全選 =》關聯計算屬性的set方法 =》 同步所有小選。
小選 =》 觸發計算屬性的get方法 =》 統計后返回全選狀態。

需求1：點擊全選影響所有單選。
需求2：點擊單選影響全選。
分析：
1.v-model用計算屬性，關聯全選框。
2.在set方法里，獲取全選狀態。
3.回傳到App.vue再同步給所有單選框。子MyFooter傳父App.vue。
4.在get方法里，統計單選框給全選賦值。父App.vue傳子MyFooter.vue

思路:
1.點擊獲取它的選中狀態。
2.同步給上面每個單選框 - 而單選框的選中狀態又在數組里。
3.把數組傳給MyFooter, 然后更新即可 - 因為對象都是引用關系的。

every()檢測數組所有元素是否都符合指定條件

MyFooter.vue

• 涉及到的知識點：every() 檢測數組所有元素是否都符合指定條件

<template><!-- 底部 --><div class="my-footer"><!-- 全選 --><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="footerCheck" v-model="isAll"><label class="custom-control-label" for="footerCheck">全選</label></div><!-- 合計 --><div><span>合計:</span><span class="price">￥ {{ allPrice }}</span></div><!-- 按鈕 --><button type="button" class="footer-btn btn btn-primary">結算 ( {{ allCount }} )</button></div> </template><script> // 目標: 全選 // 1. v-model關聯全選的復選框(v-model后的變量為計算屬性) // 2. 頁面(視圖層)v(true) 同步給 數據層的變量，這個變量是計算屬性(用完整寫法) // 3. 把全選 true/false同步給所有小選框的選中狀態上// 小選 -> 全選 // App.vue里list數組 -> MyFooter.vue // isAll的get方法里, 統計狀態影響全選框// 目標: 總數量統計 // 1. allCount計算屬性用 數組reduce+判斷統計數量并返回// 目標: 總價 // allPrice計算屬性, 數組reduce+單價*數量, 判斷選中, 才累加后返回export default {props: {arr: Array},computed: {isAll: {set(val){ // val就是關聯表單的值(true/false)this.$emit('changeAll', val)},get(){// 查找小選框關聯的屬性有沒有不符合勾選的條件// 如果有直接原地返回falsereturn this.arr.every(obj => obj.goods_state === true)}} } } </script>

JS中 map 和 forEach 的區別

• 涉及到的知識點：JS中的 forEach() 方法
• JS中 map 和 forEach 的區別
• App.vue

<MyFooter @changeAll="allFn" :arr="list"></MyFooter><script> methods: {allFn(bool){this.list.forEach(obj => obj.goods_state = bool)// 把MyFooter內的全選狀態true/false同步給所有小選框的關聯屬性上}} </script>

總結: 全選的v-model的值, 使用計算屬性完整寫法

4.7 總數量

需求: 完成底部組件, 顯示選中的商品的總數量。
1.計算屬性allCount變量
2.在統計數組里的數據時，要判斷勾選狀態才累加數量。
3.把累加好的數量返回給allCount變量使用顯示。

JS數組reduce()方法詳解及高級技巧

• MyFooter.vue

• 知識點：JS數組reduce()方法詳解及高級技巧

• ES6中的數組reduce()方法詳解

• arr.reduce(callback(accumulator, currentValue, [index], [array])[, initialValue])

回調函數第一次執行時，accumulator 和currentValue的取值有兩種情況：如果調用reduce()時提供了initialValue，accumulator取值為initialValue，currentValue取數組中的第一個值；如果沒有提供 initialValue，那么accumulator取數組中的第一個值，currentValue取數組中的第二個值。

如果沒有提供initialValue，reduce 會從索引1的地方開始執行 callback 方法，跳過第一個索引。如果提供initialValue，從索引0開始。

<!-- 按鈕 --> <button type="button" class="footer-btn btn btn-primary">結算 ( {{ allCount }} )</button>computed: {allCount(){return this.arr.reduce((sum, obj) => {// sum是用來累加的變量，obj為遍歷的對象，reduce的第二個形參為初始值if (obj.goods_state === true) { // 選中商品才累加數量sum += obj.goods_count;}return sum;}, 0)}, }

總結: 對象之間是引用關系, 對象值改變, 所有用到的地方都跟著改變。

4.8 總價

需求：統計已選中商品的總價格。

• components/MyFooter.vue

<span>合計:</span> <span class="price">￥ {{ allPrice }}</span>allPrice(){return this.arr.reduce((sum, obj) => {if (obj.goods_state){sum += obj.goods_count * obj.goods_price}return sum;}, 0) }

總結: 把數組傳給了MyFooter組件, 統計總價。

5.總結

vue的生命周期哪4個階段, 哪8個方法?
axios是什么, 底層是什么, 具體如何使用?
axios返回的是什么, 如何接收結果?
知道 ref 和 $refs 使用和作用以及場景?
知道 $nextTick 的作用。
完成購物車案例。

6.面試題

6-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 開發團隊的深思熟慮，對性能的良苦用心。

6-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 以阻止該錯誤繼續向上傳播。

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

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

7.接口文檔

axios請求接口使用，根域名: http://123.57.109.30:3006

案例 - 圖書相關

獲取

• 請求方式: GET
• 請求地址: 根域名/api/getbooks
• 請求參數:

不傳參獲取所有默認書籍, 也可以選擇傳遞下面任意1-多個參數, 獲取指定的相關書籍信息

參數名稱參數類型是否必選參數說明

id	Number	否	圖書Id
bookname	String	否	圖書名稱
author	String	否	作者
publisher	String	否	出版社
appkey	String	否	個人ID

返回示例:

{"status": 200, // 狀態碼200都代表完全成功 - 無任何意義隨便寫, 只是方便前端寫判斷條件"msg": "獲取圖書列表成功", // 后臺返回的提示消息, 隨便寫, 只是方便前端直接打印提示消息"data": [ // 后臺返回的數據{ "id": 1, "bookname": "西游記", "author": "吳承恩", "publisher": "北京圖書出版社" },{ "id": 2, "bookname": "紅樓夢", "author": "曹雪芹", "publisher": "上海圖書出版社" },{ "id": 3, "bookname": "三國演義", "author": "羅貫中", "publisher": "北京圖書出版社" }] }

添加

• 請求方式: POST
• 請求地址: 根域名/api/addbook
• 請求參數:

參數名稱參數類型是否必選參數說明

bookname	String	是	圖書名稱
author	String	是	作者
publisher	String	是	出版社
appkey	String	是	個人ID - 用’7250d3eb-18e1-41bc-8bb2-11483665535a’

返回示例:

{// 后臺返回數據邏輯層的狀態碼, 201代表后臺已經新增加了一個資源"status": 201, "data": {"author": "施大神""bookname": "水滸傳2""id": 41"publisher": "未來出版社"}"msg": "添加圖書成功" }

總結

以上是生活随笔為你收集整理的【Vue知识点- No5.】生命周期、axios、购物车案例的全部內容，希望文章能夠幫你解決所遇到的問題。

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