2020-03-06


常見前端面試題---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需要

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • [TOC] Vue 學(xué)習(xí)筆記 Vue 源碼解析 - 主線流程 Vue 源碼解析 - 模板編譯 Vue 源碼解析 -...
    Whyn閱讀 671評論 0 1
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 簡單小巧、漸進(jìn)式、功能強(qiáng)大的技術(shù)棧 1.1.2 為什么學(xué)習(xí)...
    蔡華鵬閱讀 3,493評論 0 3
  • 第一章 Vue概述 what? Vue是實現(xiàn)UI層的漸進(jìn)式j(luò)s框架,核心庫關(guān)注視圖層,簡單的ui構(gòu)建,復(fù)雜的路由控...
    fastwe閱讀 832評論 0 0
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,361評論 0 6
  • 我發(fā)現(xiàn)弟弟已經(jīng)進(jìn)入青春期,我們交流不到一塊,三句話說不完就會大聲爭辯。家人因為他天天貪玩手機(jī)游戲,不好好學(xué)習(xí)的事嘮...
    喜歡文字的恬恬閱讀 197評論 0 0

友情鏈接更多精彩內(nèi)容