Vue组件-提升
Vue組件-提升
二、學習目標
三、vue生命周期
1. 人的-生命周期
一組件從創建到銷毀的整個過程就是聲明周期
Vue-生命周期
2. 鉤子函數
目標：Vue框架內置函數，隨著組件的生命周期階段,自動執行
作用：特定的時間點，執行特定的操作
場景：組件創建完畢后，可以在created生命周期函數中發起Ajax請求，從而初始化data函數
分類：4大階段8個方法
| 初始化 | beforeCreate | created |
| 掛載 | beforeMount | mounted |
| 更新 | beforeUpdate | updated |
| 銷毀 | beforeDestroy | destroyed |
3. 初始化階段
目標：掌握初始化階段2個鉤子函數作用和執行時機
- 含義講解：
- new Vue() - Vue實例化(組件也是一個小的Vue實例)
- lnit Events & Lifecycle - 初始化事件和生命周期函數
- beforeCreate - 生命周期鉤子函數被執行
- lnit injections&reactivity - Vue內部添加了data和methods等
- created - 生命周期鉤子函數被執行 ,實例創建
- 接來下是編譯模板階段- - 開始分析
- Has el opton? - 是否有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>4. 掛載階段
目標：掌握掛載階段2個鉤子函數作用和執行機制
- 含義講解
- template選項檢查
- 有-編譯template返回render渲染函數
- 無-編譯el選項對應標簽作為tempate(要渲染的模板)
- 虛擬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掛載以后// 場景: 掛載后真實DOMmounted(){console.log("mounted -- 執行");console.log(document.getElementById("myP")); // p} } </script>5. 更新階段
目標：掌握更新階段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},// 更新之后// 場景: 獲取更新后的真實DOMupdated(){console.log("updated -- 執行");console.log(document.querySelectorAll("#myUL>li")[4]); // li} } </script>6. 銷毀階段
目標：掌握銷毀階段2個鉤子函數作用和執行時機
- 含義講解：
- 當$destroy()被調用-比如組件DOM被移除（例v-if）
- beforeDestroy - 生命周期鉤子函數被執行
- 拆卸數據監視器、子組件和事件偵聽器
- 實例銷毀后，最后觸發一個鉤子函數
- destroyed - 生命周期鉤子函數被執行
三、axios
1. axios基本使用
-
axios文檔：Axios 中文文檔 | Axios 中文網 | Axios 是一個基于 promise 的網絡請求庫，可以用于瀏覽器和 node.js (axios-http.cn)
-
特點：
-
支持客戶端發送Ajax請求
-
支持服務器Node.js發送請求
-
支持Promise相關語法
-
支持請求和響應的攔截器功能
-
自動轉換JSON數據
-
-
axios底層還是原生js實現，內部通過Promise封裝的
axios的基本使用
axios({method: '請求方式', // get,posturl: '請求地址',data: { // 拼接到請求體的參數，post請求的參數xxx:xxx },parmas: { // 拼接到請求行的參數, get請求的參數xxx:xxx} }).then(res => {console.log(res.data) // 后臺返回的結果 }).catch(err => {console.log(err) // 后臺撥錯返回 })2. axios基本使用-獲取數據
目標：調用文檔最后獲取所有圖書信息接口
- 功能：點擊調用后臺接口，拿到所有數據-打印到控制臺
- 接口：參考接口文檔
- 引入：下載axios,引入后才能使用
效果：
例子如下：
components/UseAxios.vue
<template><div><p>1. 獲取所有圖書信息</p><button @click="getAllFn">點擊查看所有圖書信息</button></div> </template><script> // 1. 目標：獲取所有圖書信息 // 1. 下載axios // 2. 引入axios import axios from 'axios' export default {methods: {getAllFn(){// 3. 發起axios請求axios({method: 'GET', // 默認就是GET方式請求，可以省略不寫url: 'http://123.57.109.30:3006/api/getbooks'}).then(res => {console.log(res);}).catch(err => { console.log(err);}) // axios() 原地得到Promise對象}} } </script><style></style>3. axios基本使用-傳參
目標：調用接口-獲取某本書籍信息
-
功能：點擊調用后臺接口，查詢用戶想要的書籍信息 - 打印到控制臺
-
接口：查看接口文檔
-
效果：
例子如下：
components/UseAxios.vue
<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: "/api/getbooks",method: "GET",params: { // 都會axios最終拼接到url?后面bookname: this.bName}}).then(res => {console.log(res);}).catch(err => {console.log(err)})}}, }; </script>4. 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: "/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>5. axios基本使用-全局配置
目標：避免前綴基地址，暴露在邏輯頁面里，統一設置
axios.default.baseURL = 'http://123.57.109.30:3006' //所有請求的rul前置可以去掉，請求時，axios會自動拼接baseURL的地址在前面 getAllFn() {axios({method: 'GET',url: '/api/getbooks'}).then(res => {console.log(ers)}).catch(err => {console.log(err)})// axios() 原地得到Promise對象 }四、refs和refs和refs和nextTick使用
1. $refs-獲取DOM
目標：利用ref和$refs可以用于獲取dom元素
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>2. $refs-獲取組件對象
目標：獲取組件對象,調用組件里方法
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值來獲取組件對象，就能進行調用組件內的變量
3. $nextTick使用
Vue更新DOM-異步的
目標：點擊count++,馬上通過"原生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>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()// 原因: data變化更新DOM是異步的// 輸入框還沒有掛載到真實DOM上// 解決:// this.$nextTick(() => {// this.$refs.myInp.focus()// })// 擴展: await取代回調函數// $nextTick()原地返回Promise對象await this.$nextTick()this.$refs.myInp.focus()}} } </script>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>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>五、案例 - 購物車
1. 項目初始化
目標：初始化新項目，清空不要的東西，下載bootstrap庫，下載less模塊
vue create shoopcar yarn add bootstrap yarn add less less-loader@5.0.0 -D- MyHeader組件
- MyFooter組件
- MyGoods組件 - 商品
- MyCount組件
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>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>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>2. 頭部自定義
目的：頭部的標題，顏色，背景色可以隨便修改，props類型的效驗思路
思路:
MyHeader.vue
<template><div class="my-header" :style="{backgroundColor: background, color}">{{ title }}</div> </template><script> // 目標: 讓Header組件支持不同的項目 - 自定義 // 1. 分析哪些可以自定義 (背景色, 文字顏色, 文字內容) // 2. (新) 可以對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 title="購物車案例"></MyHeader>總結：
props:[ ] - 只能聲明變量和接收，不能類型校驗
props: { } - 聲明變量和校驗類型規則 - 外部傳入值不對則報錯
3. 請求數據
目標：使用axios把數據請求回來
數據地址： https://www.escook.cn/api/cart (get方式)
下載axios
yarn add axiosmain.js - 原型上掛載
// 目標：請求數據 - 打印 // 1. 下載axios庫，main.js - 全局綁定屬性（確保任意.vue文件都可以訪問這個axios方法） import axios from 'axios' // 2. 基礎地址 axios.default.baseURL = 'https://www/escook.cn' // 3. axios方法添加到vue的原型上 Vue.prototype.$axios = axiosApp.vue請求使用
總結：利用axios,調用接口，把數據請求回來
4. 數據渲染
目標：把上面請求的數據，鋪設到頁面上
App.vue
<MyGoods v-for="obj in list" :key="obj.id":gObj="obj" ></MyGoods>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>總結：把各個組件關聯起來,把數據都鋪設到頁面上
5. 商品選中
問題：點擊發現總是第一個被選中
原來id和for都是’input’
但是id是唯一的，所有用數據的id來作為標簽的id，分別獨立，為了兼容label點擊圖片也能選中的效果
<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>總結：label和for值對應input的id，點擊label就能讓對應input處于激活
6. 數量控制
目標：點擊 + 和 - 或者直接修改輸入框的值影響商品購買的數量
<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>7. 全選功能
目標：在底部組件上，完成全選功能
思路：
MyFooter.vue
<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>App.vue
<MyFooter @changeAll="allFn" :arr="list"></MyFooter><script> methods: {allFn(bool){this.list.forEach(obj => obj.goods_state = bool)// 把MyFooter內的全選狀態true/false同步給所有小選框的關聯屬性上}} </script>8. 總數量
目標：完成底部組件，顯示選中的商品的總數量
MyFooter.vue
allCount(){return this.arr.reduce((sum, obj) => {if (obj.goods_state === true) { // 選中商品才累加數量sum += obj.goods_count;}return sum;}, 0) },總結：對象之間是引用關系，對象值改變，所有用到的地方都跟著改變
9.總價
目標：完成選中商品計算價格
components/MyFooter.vue
allPrice(){return this.arr.reduce((sum, obj) => {if (obj.goods_state){sum += obj.goods_count * obj.goods_price}return sum;}, 0)}總結
- vue的生命周期那4個階段，那8個方法
- axios是什么，底層是什么，具體如何使用
- axios返回的是什么，如何接收結果
- 中的ref和$refs使用和作用以及場景
- 知道$nextTick的作用
- 完成購物車案例
面試題
1. Vue的nextTick的原理是什么？（高薪常問）
- Vue是異步修改DOM的并且不鼓勵開發者直接接觸DOM，但有時候業務需要必須對數據更改 - 刷新后的DOM做相應的處理，這時候就可以使用Vue.nextTick(callback)這個api了
- 首先需要知道事件循環中宏任務和微任務這兩個概念，常見的宏任務有script,setTimeout,setlnterval,setlmmediate,I/O,UI rendering常見的微任務有process.nextTick(Node.js),Promise.then(),MutationObserver;
2. vue生命周期總共分為幾個階段？（必會）
Vue實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載Dom -> 渲染、更新 -> 渲染、卸載等一系列過程，我們稱這是Vue的生命周期
- 在實例初始化之后，數據觀察(data observer)和event/watcher事件配置之前被調用。
- 在實例創建完成后被立即調用。在這一步，實例已完成以下的配置：數據觀測（data observer），屬性和方法的運算，watch/event事件回調。然而，掛載階段還沒開始，$el屬性目前不可見。
- 在掛載開始之前被調用：相關的render函數首次被調用
- 被新創建的vm.el替換，并掛載到實例上去之后調用該鉤子函數。如果root實例掛載了一個文檔內的元素，當mounted被調用vm.el替換，并掛載到實例上去之后調用該鉤子函數。如果root實例掛載了一個文檔內的元素，當mounted被調用vm.el替換，并掛載到實例上去之后調用該鉤子函數。如果root實例掛載了一個文檔內的元素，當mounted被調用vm.el也在文檔內。
- 數據更新時調用，發生在虛擬DOM打補丁之前。這里適合在更新之前訪問現在有的DOM，比如手動移除已添加的事件監聽器。該鉤子在服務器渲染端期間不被調用，因為只有初次渲染會在服務器端進行。
- 由于數據更改導致的虛擬DOM重新渲染和打補丁，在這之后會調用該鉤子
- keep-alive組件激活時調用。該鉤子在服務器端渲染期間不被調用
- keep-alive組件停用時調用。該鉤子在服務器渲染期間不被調用。
- 實例銷毀之前調用。在這一步，實例仍然完全可用。該鉤子在服務器端渲染期間不被調用
- Vue實例銷毀后調用。調用后，Vue實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的實例也會被銷毀。該鉤子在服務器渲染期間不被調用。
- 當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回false以阻止該錯誤繼續向上傳播。
3. 第一次加載頁面會觸發那幾個鉤子函數？(必會)
異步修改DOM的并且不鼓勵開發者直接接觸DOM，但有時候業務需要必須對數據更改 - 刷新后的DOM做相應的處理，這時候就可以使用Vue.nextTick(callback)這個api了
2. 理解原理前的準備
- 首先需要知道事件循環中宏任務和微任務這兩個概念，常見的宏任務有script,setTimeout,setlnterval,setlmmediate,I/O,UI rendering常見的微任務有process.nextTick(Node.js),Promise.then(),MutationObserver;
2. vue生命周期總共分為幾個階段？（必會）
Vue實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載Dom -> 渲染、更新 -> 渲染、卸載等一系列過程，我們稱這是Vue的生命周期
- 在實例初始化之后，數據觀察(data observer)和event/watcher事件配置之前被調用。
- 在實例創建完成后被立即調用。在這一步，實例已完成以下的配置：數據觀測（data observer），屬性和方法的運算，watch/event事件回調。然而，掛載階段還沒開始，$el屬性目前不可見。
- 在掛載開始之前被調用：相關的render函數首次被調用
- 被新創建的vm.el替換，并掛載到實例上去之后調用該鉤子函數。如果root實例掛載了一個文檔內的元素，當mounted被調用vm.el替換，并掛載到實例上去之后調用該鉤子函數。如果root實例掛載了一個文檔內的元素，當mounted被調用vm.el替換，并掛載到實例上去之后調用該鉤子函數。如果root實例掛載了一個文檔內的元素，當mounted被調用vm.el也在文檔內。
- 數據更新時調用，發生在虛擬DOM打補丁之前。這里適合在更新之前訪問現在有的DOM，比如手動移除已添加的事件監聽器。該鉤子在服務器渲染端期間不被調用，因為只有初次渲染會在服務器端進行。
- 由于數據更改導致的虛擬DOM重新渲染和打補丁，在這之后會調用該鉤子
- keep-alive組件激活時調用。該鉤子在服務器端渲染期間不被調用
- keep-alive組件停用時調用。該鉤子在服務器渲染期間不被調用。
- 實例銷毀之前調用。在這一步，實例仍然完全可用。該鉤子在服務器端渲染期間不被調用
- Vue實例銷毀后調用。調用后，Vue實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的實例也會被銷毀。該鉤子在服務器渲染期間不被調用。
- 當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回false以阻止該錯誤繼續向上傳播。
3. 第一次加載頁面會觸發那幾個鉤子函數？(必會)
? 當頁面第一次加載時會觸發beforeCreate、created、beforeMount、mounted這幾個鉤子函數
總結
- 上一篇： 计算机蓝屏用故障卡,电脑蓝屏后一直卡在正
- 下一篇： vue3的那些事