：每個(gè)人都需要掌握的「Vue2」50個(gè)知識(shí)點(diǎn)，金山銀四沖！開始復(fù)習(xí)
1、Vue的優(yōu)點(diǎn)？Vue的缺點(diǎn)？
優(yōu)點(diǎn)：
缺點(diǎn)：
2、為什么說Vue是一個(gè)漸進(jìn)式框架？
Vue的全家桶，你可以選擇不用，或者只選幾樣去用，比如不用vuex
3、Vue跟React的異同點(diǎn)？
相同點(diǎn)：
不同點(diǎn)：
- 數(shù)據(jù)改變，前者響應(yīng)式，后者手動(dòng)setState
- React狀態(tài)管理工具Redux、Mobx，Vue狀態(tài)管理工具Vuex
4、MVVM是什么？和MVC有何區(qū)別呢？
MVC
- Model：負(fù)責(zé)從數(shù)據(jù)庫中取數(shù)據(jù)
- View：負(fù)責(zé)展示數(shù)據(jù)
- Controller：用戶交互的地方，例如點(diǎn)擊事件
- 思想：Controller將Model的數(shù)據(jù)展示在View上
MVVM
- VM：就是View-Model，數(shù)據(jù)雙向綁定
- 思想：View和Model實(shí)現(xiàn)數(shù)據(jù)同步，不需要手動(dòng)更新
注意：Vue不嚴(yán)格符合MVVM，因?yàn)镸VVM規(guī)定Model和View不能直接通信，而Vue可以使用ref進(jìn)行通信
5、Vue和JQuery的區(qū)別在哪？為什么放棄JQuery用Vue？
- JQuery直接操作DOM，而Vue不直接操作DOM，而是只需操作數(shù)據(jù)
- Vue集成了一些庫，大大提高開發(fā)效率，例如Route、Vuex等等
6、為什么data是個(gè)函數(shù)并且返回一個(gè)對(duì)象呢？
防止組件被多個(gè)頁面使用時(shí)，造成的變量互相污染
7、使用過哪些Vue的修飾符呢？
.lazy：輸入框失焦時(shí)才會(huì)更新v-model的值.trim：講v-model綁定的值首位空格給去掉.number：將v-medol綁定的值轉(zhuǎn)數(shù)字.self：點(diǎn)擊事件綁定本身才觸發(fā).native：綁定事件在自定義組件上時(shí)，確保能執(zhí)行.left、.middle、.right：鼠標(biāo)左中右鍵的觸發(fā)passive：相當(dāng)于給移動(dòng)端滾動(dòng)事件加一個(gè).lazycamel：確保變量名會(huì)被識(shí)別成駝峰命名
8、路由的幾種模式？
- hash：哈希模式，根據(jù)hash值的更改進(jìn)行組件切換，而不刷新頁面
- history：歷史模式，依賴于HTML5的pushState和replaceState
9、路由的鉤子函數(shù)？
全局鉤子
- to：將要跳轉(zhuǎn)進(jìn)入的路由對(duì)象
- to：將要跳轉(zhuǎn)進(jìn)入的路由對(duì)象
路由獨(dú)享鉤子
routes: [
{
path: '/xxx',
component: xxx,
beforeEnter: (to, from, next) => {
}
}
]
組件內(nèi)路由鉤子
- beforeRouteEnter(to, from, next)：跳轉(zhuǎn)路由渲染組件時(shí)觸發(fā)
- beforeRouteUpdate(to, from, next)：跳轉(zhuǎn)路由且組件被復(fù)用時(shí)觸發(fā)
- beforeRouteLeave(to, from, next)：跳轉(zhuǎn)路由且離開組件時(shí)觸發(fā)
10、使用過哪些Vue的內(nèi)部指令呢？
11、組件之間的傳值方式有哪些？
- 子傳父，子組件使用
$emit對(duì)父組件進(jìn)行傳值 - 父子之間通過
$parent和$chidren獲取實(shí)例進(jìn)而通信 - localStorage、sessionStorage
12、如何設(shè)置動(dòng)態(tài)class，動(dòng)態(tài)style？
- 動(dòng)態(tài)class對(duì)象：
<div :class="{ 'is-active': true, 'red': isRed }"></div> - 動(dòng)態(tài)class數(shù)組：
<div :class="['is-active', isRed ? 'red' : '' ]"></div> - 動(dòng)態(tài)style對(duì)象：
<div :style="{ color: textColor, fontSize: '18px' }"></div> - 動(dòng)態(tài)style數(shù)組：`
13、v-if和v-show有何區(qū)別？
v-if：通過操作DOM來控制顯隱，適用于偶爾顯隱的情況v-show：通過改變樣式display屬性控制顯隱，適用于頻繁顯隱的情況
14、computed和watch有何區(qū)別？
computed：依賴多個(gè)變量計(jì)算出一個(gè)變量，且具有緩存機(jī)制，依賴值不變的情況下，會(huì)復(fù)用計(jì)算值。computed中不能進(jìn)行異步操作watch：通常監(jiān)聽一個(gè)變量的變化，而去做一些事，可異步操作- 簡(jiǎn)單記就是：一般情況下
computed的多對(duì)一，watch一對(duì)多
15、Vue的生命周期，講一講？
beforeCreate：實(shí)例Vue，未初始化和響應(yīng)式數(shù)據(jù)created：已初始化和響應(yīng)式數(shù)據(jù)，可訪問數(shù)據(jù)beforeMount：render調(diào)用，虛擬DOM生成，未轉(zhuǎn)真實(shí)DOMbeforeUpdate：數(shù)據(jù)更新，新虛擬DOM生成updated：新舊虛擬DOM進(jìn)行對(duì)比，打補(bǔ)丁，然后進(jìn)行真實(shí)DOM更新beforeDestroy：實(shí)例銷毀前，仍可訪問數(shù)據(jù)destroy：實(shí)例銷毀，子實(shí)例銷毀，指令解綁，解綁本實(shí)例的事件activated：keep-alive所緩存組件激活時(shí)調(diào)用deactivated：keep-alive所緩存組件停用時(shí)調(diào)用errorCaptured：子孫組件的錯(cuò)誤捕獲，此函數(shù)可返回false阻止繼續(xù)向上傳播
16、為什么v-if和v-for不建議用在同一標(biāo)簽？
v-for優(yōu)先級(jí)高于v-if，每項(xiàng)都通過v-for渲染出來后再去通過v-if判斷顯隱，做了很多無用功
17、 vuex的有哪些屬性？用處是什么？
getter：從store從取數(shù)據(jù)mutation：更改store中狀態(tài)，只能同步操作action：用于提交mutation，而不直接更改狀態(tài)，可異步操作
18、不需要響應(yīng)式的數(shù)據(jù)應(yīng)該怎么處理？
- 使用Object.freeze進(jìn)行數(shù)據(jù)凍結(jié)
19、watch有哪些屬性，分別有什么用？
- immediate：初次加載時(shí)立即執(zhí)行
- handler：監(jiān)聽的回調(diào)函數(shù)
20、父子組件生命周期順序？
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
21、對(duì)象新屬性無法更新視圖，刪除屬性無法更新視圖，為什么？怎么辦？
- 原因：Object.defineProperty沒有對(duì)對(duì)象的新屬性進(jìn)行劫持
- 新增屬性：
Vue.set(target, key, value) - 刪除屬性：
Vue.delete(target, key)
22、直接arr[index] = xxx無法更新視圖怎么辦？為什么？怎么辦？
- 原因：Vue出于性能考慮沒有對(duì)數(shù)組下標(biāo)進(jìn)行劫持，而是通過改寫數(shù)組原型方法
splice：arr.splice(index, 1, value)Vue.set(target, index, value)
23、插槽的使用以及原理？
具體：https://juejin.cn/post/6949848530781470733
普通插槽 普通插槽slot會(huì)被當(dāng)做子元素進(jìn)行解析，最終會(huì)被解析成一個(gè)_t函數(shù)，他接收的第一個(gè)參數(shù)為插槽的名稱，默認(rèn)是default，也就是_t('default')，執(zhí)行此函數(shù)進(jìn)行最終元素的渲染，如果是具名插槽，則傳對(duì)應(yīng)的插槽名 作用域插槽 插槽會(huì)被封裝成一個(gè)函數(shù)放置在scopeSlotes對(duì)象中，解析時(shí)_t第二個(gè)參數(shù)接收子組件的數(shù)據(jù)，并進(jìn)行渲染
24、為什么不建議用index做key，為什么不建議用隨機(jī)數(shù)做key？
舉個(gè)例子：
<div v-for="(item, index) in list" :key="index">{{item.name}}</div>
list: [
{ name: '小明', id: '123' },
{ name: '小紅', id: '124' },
{ name: '小花', id: '125' }
]
渲染為
<div key="0">小明</div>
<div key="1">小紅</div>
<div key="2">小花</div>
現(xiàn)在我執(zhí)行 list.unshift({ name: '小林', id: '122' })
渲染為
<div key="0">小林</div>
<div key="1">小明</div>
<div key="2">小紅</div>
<div key="3">小花</div>
新舊對(duì)比
<div key="0">小明</div> <div key="0">小林</div>
<div key="1">小紅</div> <div key="1">小明</div>
<div key="2">小花</div> <div key="2">小紅</div>
<div key="3">小花</div>
可以看出，如果用index做key的話，其實(shí)是更新了原有的三項(xiàng)，并新增了小花，雖然達(dá)到了渲染目的，但是損耗性能
現(xiàn)在我們使用id來做key，渲染為
<div key="123">小明</div>
<div key="124">小紅</div>
<div key="125">小花</div>
現(xiàn)在我執(zhí)行 list.unshift({ name: '小林', id: '122' })，渲染為
<div key="122">小林</div>
<div key="123">小明</div>
<div key="124">小紅</div>
<div key="125">小花</div>
新舊對(duì)比
<div key="122">小林</div>
<div key="123">小明</div> <div key="123">小明</div>
<div key="124">小紅</div> <div key="124">小紅</div>
<div key="125">小花</div> <div key="125">小花</div>
可以看出，原有的三項(xiàng)都不變，只是新增了小林這個(gè)人，這才是最理想的結(jié)果
用index和用隨機(jī)數(shù)都是同理，隨機(jī)數(shù)每次都在變，做不到專一性，很渣男，也很消耗性能，所以，拒絕渣男，選擇老實(shí)人
25、自定義指令的鉤子函數(shù)？
這里只說Vue2的
bind：指令綁定到指定元素時(shí)調(diào)用，只調(diào)用一次inserted：指定元素插入父節(jié)點(diǎn)時(shí)調(diào)用update：所在組件的 VNode 更新時(shí)調(diào)用componnetUpdated：所在組件以及其子組件 VNode 全部更新后調(diào)用unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用
26、說說nextTick的用處？
修改數(shù)據(jù)時(shí)不能馬上得到最新的DOM信息，所以需要使用nextTick，在nectTick回調(diào)中可以獲取最新DOM信息
27、為什么nextTick優(yōu)先是微任務(wù)？
優(yōu)先是Promise.then方法，是個(gè)微任務(wù)，這樣可以避免多一次隊(duì)列，進(jìn)而少一次UI渲染，節(jié)省性能
28、Vue的SSR是什么？有什么好處？
SSR全稱Server Side Render
- 有利于SEO：由于是在服務(wù)端，將數(shù)據(jù)填充進(jìn)HTML之后再推送到瀏覽器，所以有利于SEO的爬取
29、Vue響應(yīng)式是怎么實(shí)現(xiàn)的？
- 1、劫持：通過
Object.defineProperty對(duì)對(duì)象進(jìn)行遞歸劫持屬性的get、set - 2、觀察者模式：使用
watcher進(jìn)行觀察數(shù)據(jù)使用的地方 - 3、發(fā)布訂閱模式：使用
dep收集watcher，數(shù)據(jù)更改時(shí)，通過notify方法通知dep里的watcher去進(jìn)行相應(yīng)的更新 - 4、數(shù)組：數(shù)組沒有使用劫持的模式，而是通過重寫數(shù)組原型上的方法，來實(shí)現(xiàn)數(shù)組的響應(yīng)式
30、為什么只對(duì)對(duì)象劫持，而要對(duì)數(shù)組進(jìn)行方法重寫？
數(shù)組的元素大概率是成百上千的，所以對(duì)數(shù)組下標(biāo)進(jìn)行劫持的話會(huì)非常消耗性能。Vue通過對(duì)數(shù)組原型上方法的重寫，實(shí)現(xiàn)數(shù)組的響應(yīng)式
31、Vue的模板編譯原理？
具體：https://juejin.cn/post/6969563640416436232
32、Vue的computed和watch的原理？
具體：https://juejin.cn/post/6974293549135167495
33、Vue.set方法的原理？
Vue.set(target, key, value)
- 第一步：判斷target是數(shù)組的話，則調(diào)用target.splice(key, 1, value)
- 第二步：判斷target是對(duì)象的話，再判斷傳入的key是否已存在target中
- 否：調(diào)用defineReactive(target, key, val)進(jìn)行響應(yīng)式處理
export default function set(target, key, val) {
if (Array.isArray(target)) {
target.length = Math.max(target.length, key)
target.splice(key, 1, val)
return val
}
const ob = target.__ob__
if (key in target && !(key in target.prototype) || !ob) {
target[key] = val
return val
}
defineReactive(target, key, val)
return val
}
34、Vue.delete方法的原理？
Vue.delete(target, key)
- 第一步：判斷target是否為數(shù)組，是的話調(diào)用target.splice(key, 1)
- 第二步：判斷target是對(duì)象的話，調(diào)用delete關(guān)鍵字刪除屬性，并調(diào)用__ob__.dep.notify進(jìn)行更新通知
export default function del (target, key) {
if (Array.isArray(target)) {
target.splice(key, 1)
return
}
const ob = target.__ob__
if (!(key in target)) return
delete target[key]
if (!ob) return
ob.dep.notify()
}
35、nextTick的原理？
維護(hù)一個(gè)數(shù)組，每次調(diào)用時(shí)講回調(diào)函數(shù)壓入這個(gè)數(shù)組，然后優(yōu)先選擇微任務(wù)，在微任務(wù)回調(diào)中去執(zhí)行數(shù)組中的所有回調(diào)，同時(shí)維護(hù)一個(gè)布爾值，確保每一次隊(duì)列進(jìn)行一次執(zhí)行數(shù)組所有回調(diào)
let callbacks = []; //回調(diào)函數(shù)
let pending = false;
function flushCallbacks() {
pending = false; //把標(biāo)志還原為false
// 依次執(zhí)行回調(diào)
for (let i = 0; i < callbacks.length; i++) {
callbacks[i]();
}
}
let timerFunc; //先采用微任務(wù)并按照優(yōu)先級(jí)優(yōu)雅降級(jí)的方式實(shí)現(xiàn)異步刷新
if (typeof Promise !== "undefined") {
// 如果支持promise
const p = Promise.resolve();
timerFunc = () => {
p.then(flushCallbacks);
};
} else if (typeof MutationObserver !== "undefined") {
// MutationObserver 主要是監(jiān)聽dom變化 也是一個(gè)異步方法
let counter = 1;
const observer = new MutationObserver(flushCallbacks);
const textNode = document.createTextNode(String(counter));
observer.observe(textNode, {
characterData: true,
});
timerFunc = () => {
counter = (counter + 1) % 2;
textNode.data = String(counter);
};
} else if (typeof setImmediate !== "undefined") {
// 如果前面都不支持 判斷setImmediate
timerFunc = () => {
setImmediate(flushCallbacks);
};
} else {
// 最后降級(jí)采用setTimeout
timerFunc = () => {
setTimeout(flushCallbacks, 0);
};
}
export function nextTick(cb) {
callbacks.push(cb);
if (!pending) {
pending = true;
timerFunc();
}
}
36、說說 虛擬dom 和 diff算法 吧？
虛擬dom
虛擬dom是一個(gè)對(duì)象，一個(gè)描述真實(shí)DOM的對(duì)象，每次數(shù)據(jù)更新時(shí)，新舊虛擬DOM都會(huì)互相進(jìn)行同層對(duì)比，而diff算法優(yōu)化就是在此時(shí)做優(yōu)化的。
diff算法
- 第一步：調(diào)用
patch方法，傳入新舊虛擬DOM，開始同層對(duì)比 - 第二步：調(diào)用
isSameNode方法，對(duì)比新舊節(jié)點(diǎn)是否同類型節(jié)點(diǎn) - 第三步：如果不同，新節(jié)點(diǎn)直接代替舊節(jié)點(diǎn)
- 第四步：如果相同，調(diào)用
patchNode進(jìn)行對(duì)比節(jié)點(diǎn) - 如果舊節(jié)點(diǎn)和新節(jié)點(diǎn)都是文本節(jié)點(diǎn)，則新文本代替舊文本
- 如果舊節(jié)點(diǎn)有子節(jié)點(diǎn)，新節(jié)點(diǎn)沒，則刪除舊節(jié)點(diǎn)的子節(jié)點(diǎn)
- 如果舊節(jié)點(diǎn)沒有子節(jié)點(diǎn)，新節(jié)點(diǎn)有，則把子節(jié)點(diǎn)新增上去
- 如果都有子節(jié)點(diǎn)，則調(diào)用
updateChildren方法進(jìn)行新舊子節(jié)點(diǎn)的對(duì)比 - 子節(jié)點(diǎn)對(duì)比為首尾對(duì)比法
37、如果子組件改變props里的數(shù)據(jù)會(huì)發(fā)生什么？
- 基礎(chǔ)類型：如果父?jìng)鹘o子的是基礎(chǔ)類型，修改則會(huì)報(bào)錯(cuò)
- 引用類型：如果父?jìng)鹘o子的是引用類型，修改屬性則會(huì)同時(shí)修改父組件數(shù)據(jù)
38、props怎么自定義驗(yàn)證
props: {
num: {
default: 1,
validator: function (value) {
// 返回值為false則驗(yàn)證不通過，報(bào)錯(cuò)
return [
1, 2, 3, 4, 5
].indexOf(value) !== -1
}
}
}
}
39、watch的immediate屬性有什么用？
Vue實(shí)例初始化的時(shí)候立即調(diào)用watch的監(jiān)聽回調(diào)函數(shù)
40、watch監(jiān)聽一個(gè)對(duì)象時(shí)，如何排除某些屬性的監(jiān)聽
mounted() {
Object.keys(this.params)
.filter((_) => !["c", "d"].includes(_)) // 排除對(duì)c，d屬性的監(jiān)聽
.forEach((_) => {
this.$watch((vm) => vm.params[_], handler, {
deep: true,
});
});
},
data() {
return {
params: {
a: 1,
b: 2,
c: 3,
d: 4
},
};
},
watch: {
params: {
deep: true,
handler() {
this.getList;
},
},
}
41、審查元素時(shí)發(fā)現(xiàn)data-v-xxxxx，這是啥？
樣式模塊化scoped的效果，在本組件的標(biāo)簽都會(huì)帶上data-v-xxx的屬性，然后通過屬性選擇器實(shí)現(xiàn)樣式模塊化的效果
42、vue的hook的使用？
這是我們常用的使用定時(shí)器的方式
export default{
data(){
timer:null
},
mounted(){
this.timer = setInterval(()=>{
//具體執(zhí)行內(nèi)容
console.log('1');
},1000);
}
beforeDestory(){
clearInterval(this.timer);
this.timer = null;
}
}
上面做法不好的地方在于：得全局多定義一個(gè)timer變量，可以使用hook這么做：
export default{
methods:{
fn(){
let timer = setInterval(()=>{
//具體執(zhí)行代碼
console.log('1');
},1000);
this.$once('hook:beforeDestroy',()=>{
clearInterval(timer);
timer = null;
})
}
}
}
如果子組件需要在mounted時(shí)觸發(fā)父組件的某一個(gè)函數(shù)，平時(shí)都會(huì)這么寫：
//父組件
<rl-child @childMounted="childMountedHandle"
/>
method () {
childMountedHandle() {
// do something...
}
},
// 子組件
mounted () {
this.$emit('childMounted')
},
使用hook的話可以更方便：
//父組件
<rl-child @hook:mounted="childMountedHandle"
/>
method () {
childMountedHandle() {
// do something...
}
},
43、provide和inject是響應(yīng)式的嗎？
引用數(shù)據(jù)類型響應(yīng)式，基礎(chǔ)數(shù)據(jù)類型不響應(yīng)式
44、Vue的el屬性和$mount優(yōu)先級(jí)？
同時(shí)存在時(shí)，el > $mount
45、動(dòng)態(tài)指令和參數(shù)使用過嗎？
<aButton @[someEvent]="handleSomeEvent()" :[someProps]="1000" />
46、相同的路由組件如何重新渲染？
更改如有組件上的key即可
47、自定義v-model
export default: {
model: {
event: 'change',
prop: 'checked'
}
}
48、如何將獲取data中某一個(gè)數(shù)據(jù)的初始狀態(tài)？
使用this.$options.data().xxx獲取初始值
49、計(jì)算變量時(shí)，methods和computed哪個(gè)好？
computed比較好，computed有緩存機(jī)制，可以節(jié)省性能。而method則每次更新都會(huì)重新計(jì)算，不考慮緩存
50、router.push、router.replace、router.go的區(qū)別？
router.push：跳轉(zhuǎn)，并向history棧中加一個(gè)記錄，可以后退到上一個(gè)頁面router.replace：跳轉(zhuǎn)，不會(huì)向history棧中加一個(gè)記錄，不可以后退到上一個(gè)頁面router.go：傳正數(shù)向前跳轉(zhuǎn)，傳負(fù)數(shù)向后跳轉(zhuǎn)
該文章在 2024/2/26 16:59:09 編輯過
400 186 1886
