- N +

vuejs面試題及答案 前端面試一問三不知怎么辦

大家好,今天小編來為大家解答vuejs面試題及答案這個問題,前端面試一問三不知怎么辦很多人還不知道,現在讓我們一起來看看吧!

vue底層原理面試題

vue的底層原理面試題有,vue如何實現數據的響應式?利用object.defineObject來實現的。

dom_diff的算法?

還有v_model的實現原理?以及生命周期是怎樣實現的?

還有nextTick的實現原理等等,這些都是vue的底層面試題

通過視頻通話來面試,這可行嗎

面試的類型多種多樣,視頻電話面試也是市場上常見的,特別是銷售崗位用的比較多。

嚴格來說,面試是一件很嚴肅的事情。通過面對面的交流或者設置一定的環節,全方位考察面試者的綜合素質。視頻電話面試是對面試的一種創新,但是,一般的國家公職類機關單位與大型企業不會采用,只有銷售類私企或者初創企業才會采用。很簡單的原因,真正的面試場景考察的不僅僅只是知識面跟談吐還有形象,更重要的是心理素質。以公職類結構化面試為例,考場設置有嚴格的標準,考官也是多年資深的老干部。在他們那幫老人精面前,是驢子是馬,人家一看一聽就知道了。這是視頻電話面試絕對沒有的效果。

vue和react區別面試題

區別

一.設計思想

react

1函數式思想,allinjs,jsx語法,js操控css

2單項數據流

3setState重新渲染

4每當應用的狀態被改變時,全部子組件都會重新渲染。當然,這可以通過shouldComponentUpdate這個生命周期方法來進行控制,如果為true繼續渲染、false不渲染,但Vue將此視為默認的優化。

vue

1響應式思想,也就是基于數據可變的。把html、js、css、組合到一起,也可以通過標簽引擎組合到一個頁面中

2雙向綁定,每一個屬性都需要建立watch監聽(頁面不用,涉及到組件更新的話需要)

3Vue宣稱可以更快地計算出VirtualDOM的差異,這是由于它在渲染過程中,會跟蹤每一個組件的依賴關系,不需要重新渲染整個組件樹

二、性能

react----大型項目

優化需要手動去做,狀態可控

vue------中小型項目

狀態改變需要watch監聽,數據量太大的話會卡頓

三、擴展性

react

1類式寫法api少,更容易結合ts

2可以通過高階組件來擴展

vue

1聲明式寫法,結合ts比較復雜

2需要通過mixin方式來擴展

React剛開始也有mixin的寫法,通過React.createClass的api,不過現在很少用了。

Vue也不是不能實現高階組件,只是特別麻煩,因為Vue對與組件的option做了各種處理,想實現高階組件就要知道每一個option是怎么處理的,然后正確的設置。

vue雙向綁定原理面試題怎么回答

Vue雙向綁定的原理是通過數據劫持和發布-訂閱模式實現的。

具體實現過程如下:

1.Vue在初始化時,會對data選項中的數據進行遍歷,使用Object.defineProperty()方法將這些數據轉化為getter/setter,并且在內部收集依賴,即將訂閱者Watcher添加到訂閱者列表中。

2.當數據發生變化時,會觸發setter方法,setter方法會通知訂閱者Watcher進行更新。

3.Watcher收到通知后,會調用對應的update()方法,更新視圖。

4.當頁面中的input等表單元素發生變化時,會觸發對應的事件,事件處理函數會調用Vue實例中的方法,將新的值賦給data中對應的屬性,從而觸發setter方法,更新數據。

通過數據劫持和發布-訂閱模式的結合,Vue實現了雙向綁定的功能。當數據發生變化時,視圖會自動更新;當視圖發生變化時,數據也會自動更新,從而實現了數據和視圖的同步更新。

在回答該面試題時,可以結合實際的代碼示例進行說明,講解具體的實現過程和原理,同時也可以結合自己的理解和思考進行回答。

你遇到的前端面試題都有什么

1.cookiesession的用途和區別,以及有效期

1、cookie數據存放在客戶的瀏覽器上,session數據放在服務器上。

2、cookie不是很安全,別人可以分析存放在本地的COOKIE并進行COOKIE欺騙

考慮到安全應當使用session。

3、session會在一定時間內保存在服務器上。當訪問增多,會比較占用你服務器的性能

考慮到減輕服務器性能方面,應當使用COOKIE。

4、單個cookie保存的數據不能超過4K,很多瀏覽器都限制一個站點最多保存20個cookie。

2.vue的數據綁定原理,mvvm與mvc的區別

MVVM:

m:model數據模型層v:view視圖層vm:ViewModelvue中采用的是mvvm模式,這是從mvc衍生過來的MVVM讓視圖與viewmodel直接的關系特別的緊密,就是為了解決mvc反饋不及時的問題

圖片說明一下:

說到MVVM就要說一下雙向綁定和數據劫持的原理,

MVC:

m:model數據模型層v:view視圖層c:controller控制器

原理:c層需要控制model層的數據在view層進行顯示

MVC兩種方式,圖片說明:

總結:

mvvm與mvc最大的區別:MVVM實現了view與model的自動同步,也就是model屬性改變的時候,我們不需要再自己手動操作dom元素去改變view的顯示,而是改變屬性后該屬性對應的view層會自動改變。

不懂得可以復制鏈接查看:

https://www.pianshen.com/article/3716256399/

3.storage的區別sessionStoragelocalStorage

localStorage的生命周期是永久性的。假若使用localStorage存儲數據,即使關閉瀏覽器,也不會讓數據消失,除非主動的去刪除數據,使用的方法如上所示。localStorage有length屬性

sessionStorage的生命周期是在瀏覽器關閉前。也就是說,在整個瀏覽器未關閉前,其數據一直都是存在的。sessionStorage也有length屬性,其基本的判斷和使用方法和localStorage的使用是一致的

4.v-model雙向數據原理

有一個文本框通過v-bind綁定了value屬性值為myname是我們在vue實例中定義的屬性傳統我們獲取文本框值方法可能通過getElementById找到文本框然后獲取其value屬性但是vue中直接通過v-bind綁定了value屬性所以不需要像之前那樣獲取值所以在后面的按鈕中獲取name值直接獲取vue實例對象data里面的myname屬性即可

【數據為尊----數據映射到瀏覽器如果數據v-model后修改(肯定input)然后到數據在有數據映射到瀏覽器頁面----映射關系統稱】

5.keepAlive用過嗎?什么作用?

緩存路由組件

使用的是vue的一個組件,參考vue的官方文檔

使用這個東西可以保證我們在切換組件的時候,原來顯示的組件不被銷毀

-----【保障組件的數據不會被切換路由而銷毀數據】

<keep-aliveinclude="Home">Home是對應的組件對象的名字,不是路由的名字

<router-view></router-view>

</keep-alive>

6.多維數組拍平

數組拍平也稱數組扁平化,就是將數組里面的數組打開,最后合并為一個數組

一紅六種方法吧……

了解的請看:https://www.cnblogs.com/guan-shan/p/10165737.html

7.跨域的原因解決方案

跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源,這里跨域是廣義的。

這樣就可以說同源策略----協議---端口---域名

原生的src和href可以解決跨域

代理可以解決

請求頭也可以攜帶瀏覽器提示的也可以解決

一般都是后端解決跨域問題

【別的需要了解看下方鏈接】

https://blog.csdn.net/qq_41604383/article/details/100770100

8.uniApp兼容問題

§如果你使用cli創建項目(即項目根目錄是package.json),不管用什么ide,即便是用HBuilderX,切記cli項目的編譯器是在項目下的,HBuilderX不管怎么升級都不會影響編譯器版本。你需要手動npmupdate來升級編譯器。以及如果你想要安裝less、scss等預編譯器,也需要自己npm安裝在項目下,而不是在HBuilderX的插件管理里安裝。

§如果你使用離線打包,請注意HBuilderX升級后,真機運行基座和云打包對應引擎跟隨HBuilderX升級,而你的sdk需要手動升級。sdk的版本升級一般滯后HBuilderX正式版升級一兩天。

§如果你使用自定義基座,之前制作的自定義基座是不會跟隨HBuilderX升級的,升級HBuilderX后你應該重新制作新版自定義基座。

§如果你使用wgt升級,新版HBuilderX編譯的wgt,運行到之前的runtime上,一定要先測試好,看有沒有兼容性問題。如果有問題,就不要wgt升級,整包升級。

§考慮到向下兼容,uni-app編譯器在升級為新的自定義組件模式后,同時保留了對老編譯模式的向下兼容。在HBuilderXalpha版中,App端一定會使用新編譯器,不理會manifest配置。在HBuilderX正式版中,新創建的項目會使用新編譯器,老項目不會強制使用,而是開發者自己在manifest里配置開啟。

§如果你使用其他ide開發uni-app,會經常因為拼錯單詞而運行失敗,因為經過webpack編譯一道,很多錯誤反應的不夠直觀,排錯時間很長,不如從開始就依賴有良好提示的HBuilderX,避免敲錯單詞。

§云打包的引擎版本說明HBuilderXAlpha,只有1套云打包機,不管你的HBuilderXalpha版本多少,對應的打包機一定是最新的alpha版的客戶端引擎。HBuilderX正式版,有2套打包機,一個是最新正式版,一個是次新正式版。中間的緊急更新版本沒有獨立打包機。舉個例子:HBuilderX有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。那么當前可用的打包機有1.9.1和1.8.2這2臺。(即每個大版本的最后一個版本)除了這2個HBuilderX版本外,其他版本的云打包都指向最新的1.9.1版對應的打包機。(即只保留2個大版本的云打包機)

【詳情請看】

https://ask.dcloud.net.cn/article/35845

好了,文章到此結束,希望可以幫助到大家。

返回列表
上一篇:
下一篇: