面試官常問的 web前端 問題(四)

2021-10-01 21:22:24 字數 2398 閱讀 4433

vue 兩大特點:響應式程式設計、元件化 ;

vue 的優勢:輕量級框架、簡單易學、雙向資料繫結、元件化、檢視、資料和結構的分離、虛擬 dom、執行速度快

mvvm 是 model-view-viewmodel 的簡寫,模型-檢視-檢視模型

【模型】指的是後端傳遞的資料(資料:json)。

【檢視】指的是所看到的頁面。

【檢視模型】mvvm 模式的核心,它是連線 view 和 model 的橋梁。

有兩個方向:

將【模型】轉化成【檢視】:即將後端傳遞的資料轉化成所看到的頁面(將後端ajax資料 渲染 到前端檢視)。實現的方式是:資料繫結。

將【檢視】轉化成【模型】:即將所看到的頁面轉化成後端的資料。 實現的方式是:dom 事件監聽。

這兩個方向都實現的,我們稱之為資料的雙向繫結。

總結:在 mvvm 的框架下檢視和模型是不能直接通訊的。

它們通過 viewmodel 來通訊,viewmodel 通常要實現乙個 observer 觀察者,當資料發生變化,viewmodel 能夠監聽到資料 的這種變化,然後通知到對應的檢視做自動更新,而當使用者操作檢視,viewmodel 也能監聽到檢視的變化,然後通知資料做改動,這 實際上就實現了資料的雙向繫結。並且 mvvm 中的 view 和 viewmodel 可以互相通訊

beforecreate(建立前) 在資料觀測和初始化事件還未開始;

created(建立後) 完成資料觀測,屬性和方法的運算,初始化事件,$el 屬性還沒有顯示出來 ;

beforemount(載入前) 在掛載開始之前被呼叫,相關的 render 函式首次被呼叫。例項已完成以下的配置:編譯模板,把 data 裡 面的資料和模板生成 html。注意此時還沒有掛載 html 到頁面上。

mounted(載入後) 在 el 被新建立的 vm.$el 替換,並掛載到例項上去之後呼叫。例項已完成以下的配置:用上面編譯好的 html 內容替換 el 屬性指向的 dom 物件。完成模板中的 html 渲染到 html 頁面中。此過程中進行 ajax 互動。

beforeupdate(更新前) 在資料更新之前呼叫,發生在虛擬 dom 重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態, 不會觸發附加的重渲染過程。

updated(更新後):在由於資料更改導致的虛擬 dom 重新渲染和打補丁之後呼叫。呼叫時,元件 dom 已經更新,所以可以執行 依賴於 dom 的操作。然而在大多數情況下,應該避免在此期間更改狀態,因為這可能會導致更新無限迴圈。該鉤子在伺服器端渲染期 間不被呼叫。

beforedestroy(銷毀前) 在例項銷毀之前呼叫。例項仍然完全可用。

destroyed(銷毀後) 在例項銷毀之後呼叫。呼叫後,所有的事件***會被移除,所有的子例項也會被銷毀。該鉤子在伺服器端 渲染期間不被呼叫。

當乙個 vue 例項建立時,vue 會遍歷 data 選項的屬性,用 object.defineproperty 將它們轉為 getter/setter 並且在內部追蹤相關依賴,在屬性被訪問和修改時通知變化。

每個元件例項都有相應的 watcher 程式例項,它會在元件渲染的過程中把屬性記錄為依賴, 之後當依賴項的 setter 被呼叫時,會通知 watcher 重新計算,從而致使它關聯的元件得以更新。

觸發這幾個 beforecreate、created、beforemount、mounted ,並在 mounted 的時候 dom 渲染完成

物件為引用型別,當重用元件時,由於資料物件都指向同乙個 data 物件,當在乙個元件中修改 data 時,其他重用的元件中的 data 會同時被修改;而使用返回物件的函式,由於每次返回的都是乙個新物件(object 的例項),引用位址不同,則不會出現這個問題。

v-text:將資料輸出到元素內部,如果輸出的資料有 html**,會作為普通文字輸出;

v-html:將資料輸出到元素內部,如果輸出的資料有 html **,會被渲染

}:插值表示式,可以直接獲取 vue 例項中定義的資料或函式,使用插值表示式的時候,值可能閃爍;而使用 v-html、v-text 不 會閃爍,有值就顯示,沒值就隱藏

vue-router 模組的 router-link 元件。

三種;全域性導航鉤子:router.beforeeach(to,from,next),作用:跳轉前進行判斷攔截;

元件內的鉤子;

單獨路由獨享元件;

$route 是「路由資訊物件」,包括 path,params,hash,query,fullpath,matched,name 等路由資訊引數;

$router 是「路由例項」 物件包括了路由的跳轉方法,鉤子函式等

面試官常問的設計模式

設計模式分為三大類 建立型模式,共五種 工廠方法模式 抽象工廠模式 單例模式 建造者模式 原型模式。結構型模式,共七種 介面卡模式 裝飾器模式 模式 外觀模式 橋接模式 組合模式 享元模式。行為型模式,共十一種 策略模式 模板方法模式 觀察者模式 迭代子模式 責任鏈模式 命令模式 備忘錄模式 狀態模...

面試官常問的集合框架問題(一)

有關集合框架問題 一 list 集合 1 迭代器的remove方法與集合的remove的區別?只需要了解迭代器在記憶體的執行 指標 迭代器與集合是兩個物件,如果說在迭代器中呼叫集合中的remove方法,會報currentmodifyexception錯誤。2 array與arraylist的有何區別...

面試官常問的 微服務 問題(二)

ps ef 或 ps aux kill 9 pid 注 先用 ps ef grep 查詢 pid kill 命令用於終止程序 9 強迫程序立即停止 linux中殺掉乙個程序可以用 kill 和 killall 命令 killall 命令用命令名字來殺死指定程序,而kill命令則是用程序pid來殺死程...