當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue组件-提升

發布時間：2023/12/18 vue 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue组件-提升小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Vue組件-提升

二、學習目標

能夠說出vue組件生命周期

能夠掌握axios的使用

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

能夠完成購物車案例開發

三、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 - 創建一個文件

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對象 }

四、 $re f s 和$ 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 - 注冊和使用

五、案例 - 購物車

1. 項目初始化

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

vue create shoopcar yarn add bootstrap yarn add less less-loader@5.0.0 -D

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

MyHeader組件
MyFooter組件
MyGoods組件 - 商品
MyCount組件

然后引入到App.vue上注冊

在main.js中引入bootStrap庫

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

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

2. 頭部自定義

目的：頭部的標題，顏色，背景色可以隨便修改，props類型的效驗思路

思路:

在MyHeader.vue中準備props里變量，然后使用

在使用MyHeader.vue組件時，傳入相應的值(color和backgropundColor)

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傳入相應自定義的值

總結：

props:[ ] - 只能聲明變量和接收，不能類型校驗

props: { } - 聲明變量和校驗類型規則 - 外部傳入值不對則報錯

3. 請求數據

目標：使用axios把數據請求回來

數據地址： https://www.escook.cn/api/cart (get方式)

下載axios

yarn add axios

main.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 = axios

App.vue請求使用

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

4. 數據渲染

目標：把上面請求的數據，鋪設到頁面上

App.vue

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="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點擊圖片也能選中的效果

總結：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,然后更新即可 - 因為對象都是引用關系的

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的原理是什么？（高薪常問）

為什么需要nextTick？

Vue是異步修改DOM的并且不鼓勵開發者直接接觸DOM，但有時候業務需要必須對數據更改 - 刷新后的DOM做相應的處理，這時候就可以使用Vue.nextTick(callback)這個api了

理解原理前的準備

首先需要知道事件循環中宏任務和微任務這兩個概念，常見的宏任務有script,setTimeout,setlnterval,setlmmediate,I/O,UI rendering常見的微任務有process.nextTick(Node.js),Promise.then(),MutationObserver;

理解nextTick的原理正是vue通過異步隊列控制DOM更新和nextTick回調函數先后執行的方式。如果大家看過這部分的源碼，會發現其中做了很多isNative()的判斷，因為這里還存在兼容性優雅降級的問題。可見Vue開發團隊的深思熟慮，對性能的良苦用心。

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

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

beforeCreate

在實例初始化之后，數據觀察(data observer)和event/watcher事件配置之前被調用。

created

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

beforeMount

在掛載開始之前被調用：相關的render函數首次被調用

mounted

被新創建的vm. $e l 替換，并掛載到實例上去之后調用該鉤子函數。如果 roo t 實例掛載了一個文檔內的元素，當 m o u n t e d 被調用 v m .$ el也在文檔內。

beforeUpate

數據更新時調用，發生在虛擬DOM打補丁之前。這里適合在更新之前訪問現在有的DOM，比如手動移除已添加的事件監聽器。該鉤子在服務器渲染端期間不被調用，因為只有初次渲染會在服務器端進行。

updated

由于數據更改導致的虛擬DOM重新渲染和打補丁，在這之后會調用該鉤子

activated

keep-alive組件激活時調用。該鉤子在服務器端渲染期間不被調用

deactivated

keep-alive組件停用時調用。該鉤子在服務器渲染期間不被調用。

beforeDestroy

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

destroyed

Vue實例銷毀后調用。調用后，Vue實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的實例也會被銷毀。該鉤子在服務器渲染期間不被調用。

errorCaptured

當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回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生命周期總共分為幾個階段？（必會）

beforeCreate

在實例初始化之后，數據觀察(data observer)和event/watcher事件配置之前被調用。

created

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

beforeMount

在掛載開始之前被調用：相關的render函數首次被調用

mounted

被新創建的vm. $e l 替換，并掛載到實例上去之后調用該鉤子函數。如果 roo t 實例掛載了一個文檔內的元素，當 m o u n t e d 被調用 v m .$ el也在文檔內。

beforeUpate

數據更新時調用，發生在虛擬DOM打補丁之前。這里適合在更新之前訪問現在有的DOM，比如手動移除已添加的事件監聽器。該鉤子在服務器渲染端期間不被調用，因為只有初次渲染會在服務器端進行。

updated

由于數據更改導致的虛擬DOM重新渲染和打補丁，在這之后會調用該鉤子

activated

keep-alive組件激活時調用。該鉤子在服務器端渲染期間不被調用

deactivated

keep-alive組件停用時調用。該鉤子在服務器渲染期間不被調用。

beforeDestroy

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

destroyed

Vue實例銷毀后調用。調用后，Vue實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的實例也會被銷毀。該鉤子在服務器渲染期間不被調用。

errorCaptured

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

3. 第一次加載頁面會觸發那幾個鉤子函數？(必會)

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

總結

以上是生活随笔為你收集整理的Vue组件-提升的全部內容，希望文章能夠幫你解決所遇到的問題。

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

组件
Vue

上一篇：计算机蓝屏用故障卡,电脑蓝屏后一直卡在正
下一篇： html5倒计时秒杀怎么做,vue 设

vue

Vue组件-提升

Vue組件-提升

二、學習目標

三、vue生命周期

1. 人的-生命周期

2. 鉤子函數

3. 初始化階段

4. 掛載階段

5. 更新階段

6. 銷毀階段

三、axios

1. axios基本使用

2. axios基本使用-獲取數據

3. axios基本使用-傳參

4. axios基本使用-發布數據

5. axios基本使用-全局配置

四、refs和refs和refs和nextTick使用

1. $refs-獲取DOM

2. $refs-獲取組件對象

3. $nextTick使用

4. $nextTick使用場景

5. 組件name屬性使用

5. 組件name屬性使用

五、案例 - 購物車

1. 項目初始化

2. 頭部自定義

3. 請求數據

4. 數據渲染

5. 商品選中

6. 數量控制

7. 全選功能

8. 總數量

9.總價

總結

面試題

1. Vue的nextTick的原理是什么？（高薪常問）

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

3. 第一次加載頁面會觸發那幾個鉤子函數？(必會)

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

3. 第一次加載頁面會觸發那幾個鉤子函數？(必會)

總結

四、 $re f s 和$ nextTick使用