AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置:首頁 > 科技  > 軟件

金三銀四!分享度小滿的前端面經,考Vue考的比較多

來源: 責編: 時間:2024-04-19 09:27:40 144觀看
導讀金三銀四馬上就到了金三銀四的重要時刻了!!今天給大家分享一個度小滿的面經。考Vue考的多一些~~~面經1.怎么理解Vue單向數據流?父組件傳輸局props給子組件時,子組件只能使用而不能修改,這是為了組件之間能更高地去解耦。比

金三銀四

馬上就到了金三銀四的重要時刻了!!今天給大家分享一個度小滿的面經。考Vue考的多一些~~~FVT28資訊網——每日最新資訊28at.com

FVT28資訊網——每日最新資訊28at.com

面經

1.怎么理解Vue單向數據流?

父組件傳輸局props給子組件時,子組件只能使用而不能修改,這是為了組件之間能更高地去解耦。比如有一個父組件,傳props給10個子組件,如果某一個子組件修改了,那么會影響其他9個子組件跟著刷新,所以不推薦子組件修改props。FVT28資訊網——每日最新資訊28at.com

2.Vue 組件之間的通信方式都有哪些,用過 eventbus 么,eventbus 的思想是什么

  • 父組件傳值給子組件數據props
  • 子組件傳值給父組件,通過$emit事件對父組件進行傳值
  • 父組件和子組件通過$parent和$children進行獲取實例數據
  • 二次封裝時經常使用$attrs和$listener進行傳值
  • 使用$refs獲取組件實例,進而獲取數據
  • 使用Vuex進行狀態管理
  • 使用eventBus進行跨組件傳值,進而傳遞數據(發布訂閱模式)
  • 使用provide和inject,官方不建議
  • 瀏覽器本地緩存,例如localStorage
  • 路由傳值

3.寫個自定義 v-model?

v-model實際是:value + @input的語法糖FVT28資訊網——每日最新資訊28at.com

<input v-model="inputValue" /><input :value="inputValue" @input="inputValue = $event.target.value" />

4.$attrs 和 $listener 有了解嗎?

常用于對組件進行二次封裝時,比如A -> B -> C,B可以直接將爺爺組件的所有數據或者事件直接傳給孫子。FVT28資訊網——每日最新資訊28at.com

5.Vue 生命周期有哪些,都是做什么的,updated 什么情況下會觸發,beforeCreate 的時候能拿到 Vue 實例么,組件銷毀的時候調用的是哪個 API

生命周期:FVT28資訊網——每日最新資訊28at.com

  • beforeVCreated:實例了Vue但是還沒有進行數據初始化與響應式處理
  • created:數據已經被初始化和響應式處理,這里可以訪問和修改數據
  • beforeMount:render函數在這里調用,生成虛擬DOM,但是還沒轉真實DOM并替代到el
  • mounted:真實DOM掛載完畢
  • beforeUpdated:數據更新后,新的虛擬DOM生成,但還沒更舊虛擬DOM對比打補丁
  • update:新舊虛擬DOM對比打補丁后,進行真實DOM的更新
  • activated:被keep-alive緩存的組件被激活時調用
  • deactivated:被keep-alive緩存的組件停用時調用
  • beforeDestroy:實例銷毀之前調用,在這一步,依然可以訪問數據
  • destroyed:實例銷毀后調用。Vue實例的所有指令都被解綁,實例的監聽器被移除,所有子實例也都被銷毀
  • errorCaptured:捕獲子孫組件的錯誤時被調用。此鉤子會收到三個參數:錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子可以返回false以阻止該錯誤繼續向上傳播。

6.什么情況下會觸發組件銷毀,銷毀的時候會卸載自定義事件和原生事件么?

組件銷毀時會自動卸載組件本身綁定的事件,但是僅限于組件本身。例如一些定時器、全局對象的事件綁定、eventBus則不會自動解綁,需要手動解綁。FVT28資訊網——每日最新資訊28at.com

7.自定義指令寫過么,自定義指令都有哪些鉤子?

Vue2:FVT28資訊網——每日最新資訊28at.com

  • bind:指令綁定到指定元素時觸發,只觸發一次
  • inserted:指定元素插入到DOM時觸發,只觸發一次
  • update:VNode更新時觸發,會觸發多次
  • unbind:指令解綁時觸發,只觸發一次

Vue3:FVT28資訊網——每日最新資訊28at.com

  • created:指定元素的attribute或事件監聽器被應用之前被調用
  • beforeMount:指令綁定到指定元素上觸發
  • mounted:指定元素被掛載時觸發
  • beforeUpdate:在更新包含組件的VNode之前觸發
  • updated:在包含組件的VNode及其VNode更新后調用
  • beforeUnMount:在卸載指定元素的父組件之前觸發
  • unmounted:指令解綁時觸發

8.傳統前端開發和框架開發的區別是什么?

傳統的前端開發就像是蓋房子時需要自己從零開始,用了框架開發就相當于有人事先給你搭好架子,你只需要添磚加瓦就行了。框架有他自己的一套開發模式和開發流程,只要跟著他的流程走,并利用好其開發模式,做起事來會事半功倍,這也是為什么現在的前端越來越趨于框架開發的原因,畢竟時間就是金錢,節省時間很重要。FVT28資訊網——每日最新資訊28at.com

9.Vue2 的數據響應式有兩個缺陷,你知道是哪兩個缺陷么,為什么會有這樣的缺陷,如何解決?

  • 對象新增屬性或修改新增的屬性時,無法觸發視圖更新,需要使用 Vue.set,對象刪除屬性時需要使用Vue.delete才能觸發更新
  • 數組直接通過下標修改元素無法觸發視圖更新,需要使用數組的方法splice、push等等

10.Vue 如何實現的數組的監聽,為什么 Vue 沒有對數組下標修改做劫持?

Vue2是通過重寫了數組原型上的方法來達到對數組的修改的監聽,Vue2沒有對數組下標做劫持,是出于心梗的考慮,因為通常數組元素都是非常多的,可能成百上千,如果每個元素都進行劫持,則非常耗費性能。FVT28資訊網——每日最新資訊28at.com

11.Symbol 有了解嗎,迭代器有了解嗎,哪些是可迭代的?

(1) SymbolFVT28資訊網——每日最新資訊28at.com

是ES6的特性,具體使用場景有:FVT28資訊網——每日最新資訊28at.com

  • 充當對象的屬性名,實現私有屬性
  • 充當變量,實現單獨變量
  • 用來定義類里的私有屬性

(2) 迭代FVT28資訊網——每日最新資訊28at.com

迭代器:Iterator,可迭代對象有Array、Set、Map,想將不可迭代對象變成可迭代對象,可以設置Symbol.iterator屬性FVT28資訊網——每日最新資訊28at.com

const t = {  name: '林三心',  age: 12}t[Symbol.iterator] = function () {  let index = 0,    self = this,    keys = Object.keys(this)  return {    next() {      if (index < keys.length) {        return {          value: self[keys[index++]],          done: false        }      } else {        return {          value: undefined,          done: true        }      }    }  }}for (let value of t) {  console.log(value)}

(3) 迭代器和迭代對象FVT28資訊網——每日最新資訊28at.com

12.用Set獲取兩個數組的交集,如何做?

合集:FVT28資訊網——每日最新資訊28at.com

const heji = (arr1, arr2) => {  return [...new Set(arr1.concat(arr2))]}

交集:FVT28資訊網——每日最新資訊28at.com

const jiaoji = (arr1, arr2) => {  const temp = new Set(arr1)  return Array.from(new Set(arr2)).filter(item => {    return temp.has(item)  })}

差集:FVT28資訊網——每日最新資訊28at.com

const chaji = (arr1, arr2) => {  const temp1 = new Set(arr1)  const temp2 = new Set(arr2)  const res = []  for (let item of temp1) {    !temp2.has(item) && res.push(item)  }  return res}

13.實現 Promise.all?

Promise.sx_all = (promises) => {    return new Promise((resolve, reject) => {        const result = []        let count = 0        for (let i = 0; i < promises.length; i++) {            const promise = Promise.resolve(promises[i])            promise.then(res => {                result[i] = res                count++                if (count === promises.length) {                    resolve(result)                }            }).catch(err => {                reject(err)            })        }    })}

14.animation 和 transition 的區別?

  • animation需配合@keyframe,而transition不需要
  • animation可以出發多次,transition只能觸發一次
  • animation可以設置多個幀,而transition只有兩幀
  • 前者可能會引起多次重回回流,后者會比較少

15.寫個動畫,一個盒子,開始時縮放是 0,50%時是 1,100%時是 0,開始結束都是慢速,持續 2 秒,延遲 2 秒,結束后固定在結束的效果

.box {    width: 100px;    height: 100px;    background-color: pink;    animation: scale 2s 9999999 alternate;  }  @keyframes scale {    from { transform: scale(0); }    to { transform: scale(1); }  }}

FVT28資訊網——每日最新資訊28at.com

本文鏈接:http://www.tebozhan.com/showinfo-26-84013-0.html金三銀四!分享度小滿的前端面經,考Vue考的比較多

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 探索未來計算趨勢:qutip模塊助力量子計算技術發展!

下一篇: 前端實現無縫刷新 Token

標簽:
  • 熱門焦點
Top