1.$nextTick()
- dom更新是異步的，$nextTick()中的代碼會在dom更新后執(zhí)行保證執(zhí)行順序
- 原理:支持 Promise 的環(huán)境中,Promise.then,否則就用setTimeOut 或 setImmediate
2.keep-alive
- 組件緩存,把組件放入內(nèi)存中避免銷毀和重建
3.混入(重點)mixin
- 是一個擁有vue組件所有選項的對象 , 這個對象上的所有選項可以加入到.vue的文件中
- 在組件本身和mixin發(fā)生沖突,以組件本身為準
- 想在項目中每個組件上都某些事情的時候就用到混入mixin
- 實際應(yīng)用: 計算項目中所有組件的數(shù)量
每個組件都有mothen鉤子函數(shù),渲染時都會執(zhí)行
聲明一個變量為0,將
在main.js中調(diào)用vue實例的mixin方法傳入一個對象,對象中可以聲明mothen鉤子函數(shù),讓變量++,在打印這個變量
4.v-modle原理(重點)
<input :vaule="msg" @input="msg=$event.terget.value"/>- 將input標簽的value屬性動態(tài)綁定一個變量,通過input事件拿到輸入的內(nèi)容賦值給變量
5.開發(fā)中遇到的困難(重點)
6.數(shù)組方法
- arr.map((item,index)=>{ })映射數(shù)組
- arr.forEach((item,index)=>{ })遍歷數(shù)組
- arr.filter((item,index)=>{ })
- arr.sort() 將數(shù)組里的項從小到大排序
- arr.reverse() 反轉(zhuǎn)數(shù)組項的順序。
- arr.concat()，合并數(shù)組,括號里面寫內(nèi)容 ("字符串要加引號"),
- arr.slice( 1 , 3 )截取數(shù)組參數(shù)1是開始下標,參數(shù)2是結(jié)束下標,包括開始不包括結(jié)束
- arr.splice( 2,0,4,6 )動態(tài)刪除添加
- arr.every(item=>{return item>3}) 判斷數(shù)組中每一項都是否滿足條件，只有所有項都滿足條件，才會返回true。
- arr.some(item=>{return item>3}) 判斷數(shù)組中是否存在滿足條件的項，只要有一項滿足條件，就會返回true。
7.computend()
- 一個變量是由另一個變量計算處理后得來就用到計算屬性
- 計算屬性相比普通函數(shù)的優(yōu)勢:計算屬性會把計算結(jié)果存入內(nèi)存,依賴項不變直接從內(nèi)存中取結(jié)果,不會重新計算
8.宏任務(wù),微任務(wù)
- JSv8引擎是單線程的,所以耗時任務(wù)(異步任務(wù))會交給宿主環(huán)境去執(zhí)行,執(zhí)行結(jié)束后會把回調(diào)放到任務(wù)隊列中排隊
- 此時就有了微任務(wù)和宏任務(wù),異步任務(wù)的兩種分類
9.this.$set()
- vue2中給data中聲明的響應(yīng)式對象數(shù)據(jù)添加屬性,
語法: this.$set('對象名','key','value')
10.注冊指令
- 在install方法中參數(shù)可以獲取vue實例.vue實例上有directive方法用來注冊自定義指令,
- 第一個參數(shù)是指令名,第二個參數(shù)是對象對象中有邏輯函數(shù),函數(shù)有兩個形參el,binding,
- el是綁定的標簽,binding是自定義屬性值
12.vue3和vue2區(qū)別
- 1.vue3中拋出了兩個函數(shù) createVNode()創(chuàng)建虛擬Dom 和 render()掛載到真實Dom上
- 2.vue2中響應(yīng)式依賴ES5 Object.defineproperty() 缺陷不能偵聽屬性的增加 vue3中依賴ES6 Proxy 14種對象操作方法都可以攔截
- 3.vue2選項式api,vue3組合式api,并且可以混用
- 4.移除了this關(guān)鍵字,新增setup函數(shù),形參props,{emit}
- 5.響應(yīng)式數(shù)據(jù)在ref函數(shù)中聲明
...
13.虛擬DOM
- 就是對象,保存了標簽名,屬性,子節(jié)點信息
- vue3中拋出了兩個函數(shù) createVNode()創(chuàng)建虛擬Dom 和 render()掛載到真實Dom上
- 語法: 引入 improt {createVNode,render} from 'vue'
創(chuàng)建虛擬Dom const obj = createVNode('標簽或者組件',{屬性},[子節(jié)點])
渲染真實Dom render(VNode,真實Dom節(jié)點)
14.http狀態(tài)碼
- 200 - 請求成功^^^^
- 201 - 已創(chuàng)建。成功請求并創(chuàng)建了新的資源
- 202 - 已經(jīng)接受請求，但未處理完成
- 301 - 資源（網(wǎng)頁等）被永久轉(zhuǎn)移到其它URL^^^^
- 303 - 請求的資源已被永久的移動到新URI，返回信息會包括新的URI，瀏覽器會自動定向到新URI。
今后任何新的請求都應(yīng)使用新的URI代替 - 306 - 已經(jīng)被廢棄的HTTP狀態(tài)碼
- 401 - token過期,請求過期^^^^^
- 404 - 請求的資源（網(wǎng)頁等）不存在,請求失敗^^^^
- 500 - 內(nèi)部服務(wù)器錯誤
- 501 - 服務(wù)器不支持請求的功能，無法完成請求
15.請求響應(yīng)攔截器
- axios.interceptors.response.use(因特撒噴特斯)
- 請求攔截器:在請求頭上添加token
- 響應(yīng)攔截器:服務(wù)器返回登錄狀態(tài)失效，需要重新登錄的時候，跳轉(zhuǎn)到登錄頁。token過期,token續(xù)簽
16.路由前置守衛(wèi)
- router.beforeEach((to, from, next) => {})
- 作用:判斷用戶是否有權(quán)限跳轉(zhuǎn)某些路由,to()到哪里去,from()從哪里來,next()放行,next(false)不放行
- 例如:用戶沒有登錄 而是直接通過修改瀏覽器 url 來訪問網(wǎng)頁，這種操作無疑是不安全的。
- 路由導(dǎo)航守衛(wèi)可以讓我們對用戶要跳轉(zhuǎn)的路由做一次檢查，符合條件后放行，不符合條件則強制用戶跳轉(zhuǎn)登錄頁面。
17.原生js實現(xiàn)輪播圖
- 維護一個索引值
- 遍歷所有圖片 , 把所有圖片透明度設(shè)置為0 , 在把當前圖片根據(jù)索引透明度設(shè)置為1
- 使用定時器讓索引值++,如果大于圖片索引長度就設(shè)置為0
- 注冊鼠標移入事件清除定時器 , 鼠標移入事件重新調(diào)用定時器
- 上一張按鈕下一頁按鈕就是注冊點擊事件讓索引++或--
18.輸入url地址按下回車發(fā)生了什么？
- 1.輸入url地址后，首先進行DNS解析，將相應(yīng)的域名解析為IP地址；
- 2.客戶端根據(jù)IP地址去尋找相應(yīng)的服務(wù)器；本地緩存,遠程服務(wù)器
- 3.與服務(wù)器進行TCP的三次握手；
- 4.客戶端找到相應(yīng)的資源庫；
- 5.根據(jù)資源庫返回頁面信息；
- 6.瀏覽器根據(jù)自身的執(zhí)行機制解析頁面；渲染頁面
- 7.最后服務(wù)器將解析信息返回給客戶端，進行TCP的四次揮手。
- Object.defineProperty 響應(yīng)式原理?
- Object.defineProperty() 可以攔截對于對象屬性的訪問
- 這個方法中第一個參數(shù)是攔截對象名,第二個是對象中的key,第三個是對象
- 對象中有g(shù)et和set兩個函數(shù),訪問對象的屬性值時,獲取到的就是get函數(shù)的返回值
- 設(shè)置對象的屬性值時,set函數(shù)的參數(shù)newvalue就是設(shè)置的新值
- 可以再set函數(shù)中將新值賦值給input的value值就實現(xiàn)了數(shù)據(jù)影響視圖
- 還可通過監(jiān)聽input事件拿到視圖中的值賦值給get函數(shù)中return的變量實現(xiàn)視圖影響數(shù)據(jù)
