vue面試題及答案


繼續說面試題,這次主要是與vue有關的

vue生命周期

1.beforeCreate
創建前,此階段為實例初始化之后,this指向創建的實例,此時的數據觀察事件機制都未形成,不能獲得DOM節點。

2.created
創建后,此階段為實例已經創建,完成數據(data、props、computed)的初始化導入依賴項。
可訪問 data computed watch methods 上的方法和數據。
初始化完成時的事件寫在這里,異步請求也適宜在這里調用(請求不宜過多,避免白屏時間太長)。
可以在這里結束loading事件,還做一些初始化,實現函數自執行。
未掛載DOM,若在此階段進行DOM操作一定要放在Vue.nextTick()的回調函數中。

3.beforeMount
掛載前 雖然得不到具體的DOM元素,但vue掛載的根節點已經創建,下面vue對DOM的操作將圍繞這個根元素繼續進行。
beforeMount這個階段是過渡性的,一般一個項目只能用到一兩次。

4.mounted
掛載后,完成創建vm.$el,和雙向綁定
完成掛載DOM和渲染,可在mounted鈎子函數中對掛載的DOM進行操作。
可在這發起后端請求,拿回數據,配合路由鈎子做一些事情。

5.beforeUpdate
數據更新前,數據驅動DOM。
在數據更新后雖然沒有立即更新數據,但是DOM中的數據會改變,這是vue雙向數據綁定的作用。
可在更新前訪問現有的DOM,如手動移出添加的事件監聽器。

6.updated
數據更新后,完成虛擬DOM的重新渲染和打補丁。
組件DOM已完成更新,可執行依賴的DOM操作。
注意:不要在此函數中操作數據(修改屬性),會陷入死循環。

7.beforeDestroy 銷毀前
可做一些刪除提示,如:您確定刪除xx嗎?

8.destroyed 銷毀后,當前組件已被刪除,銷毀監聽事件,組件、事件、子實例也被銷毀。
這時組件已經沒有了,無法操作里面的任何東西了。

MVVM 和MVC
MVC Model-View-Controller
控制器(Controller)- 負責轉發請求,對請求進行處理。
視圖(View) - 界面設計人員進行圖形界面設計。
模型(Model) - 程序員編寫程序應有的功能(實現算法等等)、數據庫專家進行數據管理和數據庫設計(可以實現具體的功能)。

MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。
【模型】(Model)指的是后端傳遞的數據。
【視圖】(View)指的是所看到的頁面。
【視圖模型】(ViewModel)mvvm模式的核心,它是連接view和model的橋梁。它有兩個方向:一是將【模型】轉化成【視圖】,即將后端傳遞的數據轉化成所看到的頁面。實現的方式是:數據綁定。二是將【視圖】轉化成【模型】,即將所看到的頁面轉化成后端的數據。實現的方式是:DOM 事件監聽。
這兩個方向都實現的,我們稱之為數據的雙向綁定。

優點:解決controller過於臃腫、邏輯分離

vue-router
路由模塊的本質 就是建立起url和頁面之間的映射關系。
由於hash模式(路由默認模式)會在url中自帶#,如果不想要很丑的 hash,我們可以用路由的 history 模式,只需要在配置路由規則時,加入"mode: 'history'",這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面。

hash(#)是URL 的錨點,代表的是網頁中的一個位置,單單改變#后的部分,瀏覽器只會滾動到相應位置,不會重新加載網頁,

**active-class **
active-class屬於vue-router的樣式方法 當routerlink標簽被點擊時將會應用這個樣式 使用有兩種方法routerLink標簽內使用

<router-link to='/'active-class="active">首頁

首頁的active有時會有bug,會一直被應用

為了解決上面的問題,還需加入一個屬性exact,類似也有兩種方式:

在router-link中寫入exact

<router-link to='/'active-class="active"exact>首頁

vue常見的指令,v-show和v-if
指令
v-bind 動態地綁定一個或多個特性,或一個組件 prop 到表達式。 縮寫為 :
v-on:用於監聽指定元素的DOM事件 縮寫為 @
v-model:實現表單輸入和應用狀態之間的雙向綁定。
v-text指令:用於更新標簽包含的文本,它的作用跟雙大括號效果是一樣的。
v-html指令:綁定一些包含html代碼的數據在視圖上
v-once指令:只渲染一次,后面元素中的數據再更新變化,都不會重新渲染

v-show和v-if
相同點:v-show和v-if都能控制元素的顯示和隱藏。
不同點:實現本質方法不同
v-show本質就是通過設置css中的display設置為none,控制隱藏
v-if是動態的向DOM樹內添加或者刪除DOM元素
編譯的區別
v-show其實就是在控制css
v-if切換有一個局部編譯/卸載的過程,切換過程中合適地銷毀和重建內部的事件監聽和子組件
如果要頻繁切換某節點時,使用v-show,如果不需要頻繁切換某節點時,使用v-if

axios
特點:
1.Axios 是一個基於 promise 的 HTTP 庫,支持promise所有的API
2.它可以攔截請求和響應
3.它可以轉換請求數據和響應數據,並對響應回來的內容自動轉換成 JSON類型的數據
4.安全性更高,客戶端支持防御 XSRF

方法:

  1. axios.get(url[, config]) //get請求用於列表和信息查詢
  2. axios.delete(url[, config]) //刪除
  3. axios.post(url[, data[, config]]) //post請求用於信息的添加
  4. axios.put(url[, data[, config]]) //更新操作

組件傳值
1.父傳子:
子組件在props中創建一個屬性,用以接收父組件傳過來的值
父組件中注冊子組件
在子組件標簽中添加子組件props中創建的屬性
把需要傳給子組件的值賦給該屬性

2.子傳父
子組件中需要以某種方式例如點擊事件的方法來觸發一個自定義事件
將需要傳的值作為$emit的第二個參數,該值將作為實參傳給響應自定義事件的方法
在父組件中注冊子組件並在子組件標簽上綁定對自定義事件的監聽

無論是子組件向父組件傳值還是父組件向子組件傳值,他們都有一個共同點就是有中間介質,子向父的介質是自定義事件,父向子的介質是props中的屬性。

轉載:https://www.cnblogs.com/daiwenru/p/6694530.html

3.兄弟組件
首先創建一個事件總線;
接着在發送方組件里面使用關鍵字$emit()定義一個自定義事件,並傳入參數
然后接收方組件,只要使用this.bus.$on關鍵字就能夠監聽到發送方觸發的事件,並在內部通過一個函數接收傳入進來的參數,執行相關的動作,

注:this.bus為在main.js里定義好的一個中轉站變量,即事件總線

vue的優點
組件化,數據綁定

vue組件樣式隔離
標簽里面添加scoped

keep-alive
keep-alive是Vue提供的一個抽象組件,用來對組件進行緩存,從而節省性能,由於是一個抽象組件,所以在v頁面渲染完畢后不會被渲染成一個DOM元素
被包裹在keep-alive中的組件的狀態將會被保留,
例如我們將某個列表類組件內容滑動到第100條位置,那么我們在切換到一個組件后再次切換回到該組件,該組件的位置狀態依舊會保持在第100條列表處

注:部分內容來源於網絡,如有侵權,請留言
未完待續...


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM