常見前端面試題---vue篇
2、vue生命周期
vue生命周期就是vue實例從創(chuàng)建到銷毀的過程。也就是從開始創(chuàng)建、初始化數(shù)據(jù),編譯模板、掛載DOM —渲染、更新—渲染、卸載等一系列過程,稱為Vue的生命周期 。分為? 8個階段 創(chuàng)建前后、掛載前后、 更新前后、 銷毀前后。
BeforeCreate 組件實例剛剛被創(chuàng)建,獲取不到props或者data中的數(shù)據(jù),這些數(shù)據(jù)初始化都在initState中。
Created 實例已經(jīng)被創(chuàng)建完成之后調(diào)用,可以訪問到之前不能訪問到的數(shù)據(jù),但是組件還沒有被掛載。
BeforeMount 掛載開始之前被調(diào)用。
Mounted? dom節(jié)點被渲染到文檔內(nèi),一些需要dom的操作在此時才能正常進(jìn)行。
BeforeUpdate 數(shù)據(jù)更新時調(diào)用,發(fā)生在虛擬dom重新渲染之前 在這個鉤子中進(jìn)一步地更改狀態(tài) 不會觸發(fā)附加的重渲染過程
Update 組件DOM已經(jīng)更新,可以執(zhí)行依賴于DOM的操作,但應(yīng)該避免在此期間更改狀態(tài) 有可能會導(dǎo)致更新無限循環(huán)。
BeforeDestory 實例銷毀之前調(diào)用,實例仍然可以調(diào)用。
Destroyed 實例被銷毀后調(diào)用 調(diào)用后vue實例指示的所有東西都會解綁,事件監(jiān)聽器會被移除,所有子實例也會被銷毀,該鉤子在服務(wù)器端渲染期間不被調(diào)用。
3、vue雙向數(shù)據(jù)綁定原理
在生成vue實例對象時,會給data里的屬性添加set和get方法,這個方法依賴于es5的defineProperty。
4、vue常用內(nèi)置指令
v-bind 綁定屬性
v-on 綁定事件
v-model:表單元素雙向綁定
v-for:遍歷
v-if:判斷 元素的添加和移除
v-show:元素的顯示和隱藏
5、Vue中computed和methods的區(qū)別
methods里的方法只要模板更新,就會重新執(zhí)行
compted中,只有當(dāng)依賴項發(fā)生變化時,才會觸發(fā)
6、如何解決vue跨域問題
①在config里的index.js文件中設(shè)置代理
在代理里面配置
proxyTable: {
'/api/**': {target:'http://localhost:3000',
????????????? pathRewrite:{'^/api':'/'}
?????????? },
},
7、vue的組件通信
父傳子用props,子傳父用自定義事件,當(dāng)側(cè)重于賦值的時候,可以使用vue提供的語法糖,v-model或者是.sync修飾符。
8、vue組件和實例的區(qū)別
①組件中的data是一個函數(shù)返回一個對象,而實例中的data是一個對象
②組件中沒有el這個掛載點
除了這兩點,實例和組件基本上一樣的
9、vue中操作dom節(jié)點
①一個組件中有完整的功能,但是想要修改內(nèi)容的時候
②只是一個提供容器的組件,放什么由使用者決定的時候
10、vue中的v-for種key的作用
雙向綁定一般用在獲取表單元素時,綁定表單元素的value值,監(jiān)聽它的input事件,將輸入框的值賦值給在data 里面設(shè)置的屬性
11、自定義指令的底層是什么?
自定義指令的底層是dom操作
12、自定義指令有哪些鉤子函數(shù)?
①當(dāng)元素插入頁面時調(diào)用 inserted 已經(jīng)插入父節(jié)點
binding? 還未插入父節(jié)點
一般使用inserted
②整個事例中,數(shù)據(jù)更新時? update:發(fā)生在子節(jié)點更新之前
componentUpdated:全部更新后調(diào)用
③unbind:解綁 減少內(nèi)存,移除節(jié)點,清空事件
這些鉤子函數(shù),第一個參數(shù)是el,標(biāo)識綁定的元素,第二個參數(shù)是binding,binding.value指的是你綁定的那個屬性的值,第三個參數(shù)是vnode,vnode.context指元素所在的vue實例
13、watch和computed的區(qū)別
①watch監(jiān)聽的屬性需要在data里定義,computed不需要
②watch監(jiān)聽的屬性,需要在created中初始化,computed不需要
③watch 里的方法不需要return ,computed需要