面試官常問——vue篇

xingqiba 發(fā)布于2019-08-23 15:25 / 392人閱讀

摘要：如果要相應(yīng)狀態(tài)改變，通常最好使用計算屬性或取而代之。那解決問題的思路便是在改變的情況下，保證頁面的不刷新。后面值的變化，并不會導(dǎo)致瀏覽器向服務(wù)器發(fā)出請求，瀏覽器不發(fā)出請求，也就不會刷新頁面。

1.vue生命周期
2.vue 雙向綁定原理
3.vue router原理
4.vue router動態(tài)路由

1.vue 生命周期鉤子

注意:所有的生命周期鉤子自動綁定this上下文到實例中,因此你可以訪問數(shù)據(jù),對屬性和方法進行運算。這意味著你不能使用箭頭函數(shù)來定義一個生命周期方法(例如:created:() => this.fetchTodos() )。這是因為箭頭函數(shù)綁定了父級上下文，因此this與你期待的vue實例不同,this.fetchTodos的行為未定義。

beforeCreate 
 在實例初始化之后,數(shù)據(jù)觀測(data observer)和 event/watcher事件配置之前被調(diào)用。

created  
在實例創(chuàng)建完成后被立即調(diào)用.在這一步,實例已完成以下的配置:數(shù)據(jù)觀測(data observer),屬性和方法的運算,watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el屬性目前不可見。

beforeMount 
在掛載開始之前被調(diào)用:相關(guān)的 render 函數(shù)首次被調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。該鉤子在服務(wù)器渲染期間不被調(diào)用。

mounted 
el被新創(chuàng)建的 vm.$el 替換,病掛載到實例上去之后調(diào)用該鉤子。如果root實例掛載了一個文檔內(nèi)元素,當 mounted
被調(diào)用時 vm.$el 也在文檔內(nèi)。 注意： mounted 不會承諾所有子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用
vm.$nextTick 替換調(diào) mounted:(該鉤子在服務(wù)器端渲染期間不被調(diào)用)

    mounted:function() {
        this.$nextTick(function () {
        //code that will run only after the 
        //entire view has been rendered
   }) }

beforeUpdate  
數(shù)據(jù)更新時調(diào)用,發(fā)生在虛擬 DOM 打補丁之前。這里適合在更新之前訪問現(xiàn)有的DOM,比如
手動移除已經(jīng)添加的事件監(jiān)聽器。 
該鉤子在服務(wù)器端渲染期間不被調(diào)用，因為只有初次渲染會在服務(wù)端進行。

updated 
由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁,在這之后會調(diào)用該鉤子。當這個鉤子被調(diào)用時，組件DOM已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)。如果要相應(yīng)狀態(tài)改變，通常最好使用計算屬性或watcher取而代之。
注意 updated 不會承諾所有的子組件都一起被重繪。如果你希望等到整個視圖都重繪完畢，可以用vm.$nextTick 替換調(diào)
mounted:(該鉤子在服務(wù)器端渲染期間不被調(diào)用)

mounted:function() {
    this.$nextTick(function () {
    //code that will run only after the 
    //entire view has been rendered
}) }

activated 
keep-alive 組件激活時調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。 
構(gòu)建組件 keep-alive 
動態(tài)組件 keep-alive

deactivated 
keep-alive組件停用時調(diào)用。 該鉤子在服務(wù)器端渲染期間不被調(diào)用
構(gòu)建組件 keep-alive 
動態(tài)組件 keep-alive

beforeDestory 
實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。 
該鉤子在服務(wù)器端渲染期間不被調(diào)用。

destoryed 
vue實例銷毀后調(diào)用。調(diào)用后，vue實例指示的所有東西都會解綁定,所有的事件監(jiān)聽器會被移除,所有的子實例也會被銷毀。
該鉤子在服務(wù)器端渲染期間不被調(diào)用。

2.vue 雙向綁定原理

Object.defineProperty是ES5新增的一個API,其作用是給對象的屬性增加更多的控制
Object.defineProperty(obj,prop,descriptor)
參數(shù)：

 obj: 需要定義屬性的對象(目標對象)
 prop:需要定義或修改的屬性名(對象上的屬性或方法)
 對于setter和getter,我的理解是它們是一對鉤子hook函數(shù),當你對一個對象的某個屬性賦值時,則會自動調(diào)用相應(yīng)的setter函數(shù);
 而當獲取屬性時,則調(diào)用getter函數(shù)。這也是實現(xiàn)雙向數(shù)據(jù)綁定的關(guān)鍵。




    
    vue 雙向綁定

3.vue router原理

路由這個概念最先是后端出現(xiàn)的。在以前用模板引擎開發(fā)頁面時，經(jīng)常會看到這樣

http://www.xxx.com/login

大致流程可以看成這樣：

1.瀏覽器發(fā)出請求
2.服務(wù)器監(jiān)聽到80端口（或443）有請求過來，并解析url路徑
3.根據(jù)服務(wù)器路由配置，返回相應(yīng)的信息（可以是html字串,也可以是json數(shù)據(jù),圖片等）
4.瀏覽器根據(jù)數(shù)據(jù)包`Content-Type`來決定如何解析數(shù)據(jù)

簡單來說路由就是用來跟后端服務(wù)器進行交互的一種方式,通過不同的路徑,來請求不同的資源,請求不同的頁面是路由的其中一種功能。

前端路由
1.hash模式
隨著ajax的流行,異步數(shù)據(jù)請求交互運行在不刷新瀏覽器的情況下進行。而異步交互體驗的更高級版本就是SPA——單頁應(yīng)用。單頁應(yīng)用不僅僅在頁面交互是無刷新的，連頁面跳轉(zhuǎn)都是無刷新的，為了實現(xiàn)單頁應(yīng)用，所以就有了前端路由。
類似于服務(wù)器路由，前端路由實現(xiàn)起來其實也很簡單，就是匹配不同的url路徑,進行解析,然后動態(tài)的渲染出區(qū)域html內(nèi)容。但是這樣存在一個問題，就是URL每次變化的時候，都會造成頁面的刷新。那解決問題的思路便是在改變URL的情況下，保證頁面的不刷新。在2014年之前，大家是通過hash來實現(xiàn)路由，URL hash 就是類似于：

http://www.xxx.com/login

這種#。后面hash值的變化，并不會導(dǎo)致瀏覽器向服務(wù)器發(fā)出請求，瀏覽器不發(fā)出請求，也就不會刷新頁面。另外每次hash值的變化，還會觸發(fā)
hashchange這個事件,通過這個事件我們就可以知道hash值發(fā)生了哪些變化。然后我們便可以監(jiān)聽hashchang來實現(xiàn)更新頁面部分內(nèi)容的操作:

function matchAndUpdate () {
    // todo 匹配 hash 做 DOM 更新
}
window.addEventListener("hashchange",matchAndUpdate)

2.history 模式
14年后，因為HTML5標準發(fā)布。多了兩個API,pushState 和 replaceState,通過這兩個API 可以改變url地址且不會發(fā)送請求。同時還有 popState 事件。通過這些就能用另一種方式來實現(xiàn)前端路由了，但原理都是跟 hash 實現(xiàn)相同的。用了 HTML5 的實現(xiàn)，單頁路由的 url 就不會多出一個#，變得更加美觀。但因為沒有 # 號，所以當用戶刷新頁面之類的操作時，瀏覽器還是會給服務(wù)器發(fā)送請求。為了避免出現(xiàn)這種情況，所以這個實現(xiàn)需要服務(wù)器的支持，需要把所有路由都重定向到根頁面。

function matchAndUpdate () {
    // todo 匹配 hash 做 DOM 更新
}
window.addEventListener("popstate",matchAndUpdate)

vue router實現(xiàn)
我們在使用vue-router的時候,主要有以下幾步:


    
    



// 1. 安裝 插件
Vue.use(VueRouter);

// 2. 創(chuàng)建router對象
const router = new VueRouter({
    routes // 路由列表 eg: [{ path: "/foo", component: Foo }]
});

// 3. 掛載router
const app = new Vue({
    router
}).$mount("#app");

vue-router 實現(xiàn) -- install
理解Object.defineProperty的作用