1关顷、vue的雙向綁定原理是什么？關(guān)鍵點(diǎn)在哪里始衅？
雙向綁定原理腦圖.png
2冷蚂、Vue中為什么data必須是一個(gè)函數(shù)缭保，而New Vue實(shí)例中，data可以直接是一個(gè)對象
data是函數(shù)以及實(shí)例中data是對象的原因
data.png
3蝙茶、vue的兩大核心
兩個(gè)核心.png
4艺骂、Vue中v-for為什么要加一個(gè)key
image.png
5、Vuex有幾個(gè)屬性及作用
image.png
6隆夯、Vue的監(jiān)聽屬性和計(jì)算屬性有什么區(qū)別
image.png
7钳恕、Vue的導(dǎo)航守衛(wèi)有哪些
image.png
8、Vue登陸攔截如何實(shí)現(xiàn)
image.png
9蹄衷、Vue組件通信的方式有哪些
image.png
10忧额、keep-alive是什么 有幾個(gè)周期？如何避免被其緩存愧口？
image.png
如何避免被keep-alive緩存
image.png
11睦番、vuex刷新頁面后數(shù)據(jù)丟失，如何保存數(shù)據(jù)
image.png
12耍属、vue是如何依賴收集的
image.png
13托嚣、vue $nextTick及其作用
image.png
14、vue兩種路由模式的區(qū)別
image.png
15恬涧、vue的優(yōu)缺點(diǎn)
image.png
16、請簡述vue數(shù)據(jù)傳遞過程
1碴巾、通過new Vuex.Store()創(chuàng)建一個(gè)倉庫 state是公共的狀態(tài)溯捆，state--->components渲染頁面；
2厦瓢、在組件內(nèi)部通過 this.$store.satate.屬性 來調(diào)用公共狀態(tài)中的state提揍，進(jìn)行頁面的渲染;
3、當(dāng)組件需要修改數(shù)據(jù)的時(shí)候煮仇，必須遵循單向數(shù)據(jù)流劳跃。通this.$store.dispatch來觸發(fā)actions中的方法
4、actions中的每個(gè)方法都會接受一個(gè)對象 這個(gè)對象里面有一個(gè)commit方法浙垫，用來觸發(fā)mutations里面的方法
5刨仑、mutations里面的方法用來修改state中的數(shù)據(jù) mutations里面的方法都會接收到2個(gè)參數(shù) 一個(gè)是store中的state另外一個(gè)是需要傳遞到參數(shù)
6、當(dāng)mutations中的方法執(zhí)行完畢后state會發(fā)生改變夹姥，因?yàn)関uex的數(shù)據(jù)是響應(yīng)式的 所以組件的狀態(tài)也會發(fā)生改變
17杉武、vue中mixin和mixins的區(qū)別
image.png
18、watch與 watchEffect
image.png
setup(props) {
const { reactive,toRefs,watch,watchEffect } = Vue;
const nameObj = reactive({ name:'yh' ,EnglishName:'ji'})
// watch 是有一定的惰性 lazy 加上 immediate:true 可以改變惰性 立即執(zhí)行
// 當(dāng) 監(jiān)聽是基礎(chǔ)數(shù)據(jù)是 可以使用 watch('name',() =>{})
// 當(dāng) 監(jiān)聽數(shù)據(jù) 是單個(gè)數(shù)據(jù)對象時(shí)
// watch(()=>nameObj.name,(curName,prevName)=>{
// console.log(curName,prevName)
// })
// 當(dāng) 監(jiān)聽數(shù)據(jù)是多個(gè)數(shù)據(jù)對象時(shí)
watch([()=>nameObj.name,()=>nameObj.EnglishName],([curName,curEng],[prevName,prevEng])=>{
console.log('watch',curName,curEng ,'---',prevName,prevEng)
})
// watchEffect 是立即執(zhí)行 不需要傳遞偵聽內(nèi)容 會自動感知 不需要很多參數(shù) 只需要一個(gè)回調(diào)函數(shù)
// 不能獲取之前數(shù)據(jù)的值
watchEffect(() =>{
console.log('abc')
})
const { name,EnglishName } = toRefs(nameObj)
return { name,EnglishName }
}
