php開發面試題---vue面試題(vue.js的好處及做用)

php開發面試題---vue面試題(vue.js的好處及做用)

1、總結

一句話總結:

雙向數據綁定:在作ajax的時候,更新實在是太方便了
用數據綁定的思想,vue能夠簡單寫單個頁面,也能夠寫一個大的前端系統,也能夠作手機app的界面。

 

 

一、Vue.js是什麼?

漸進式框架 
自底向上增量開發的設計
易學習,易整合

Vue.js(讀音 /vjuː/, 相似於 view) 是一套構建用戶界面的 漸進式框架。與其餘重量級框架不一樣的是,Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層,而且很是容易學習,很是容易與其它庫或已有項目整合。另外一方面,Vue 徹底有能力驅動採用單文件組件和 Vue 生態系統支持的庫開發的複雜單頁應用。php

 

二、vue.js到底適合作哪一種類型的界面?

a、表單項繁多
b、內容須要根據用戶的操做進行修改

Vue.js就是一個用於搭建相似於網頁版知乎這種表單項繁多,且內容須要根據用戶的操做進行修改的網頁版應用。css

 

三、單頁應用程序(SPA)是什麼?

一個頁面就是應用(子應用)

顧名思義,單頁應用通常指的就是一個頁面就是應用,固然也能夠是一個子應用,好比說知乎的一個頁面就能夠視爲一個子應用。單頁應用程序中通常交互處理很是多,並且頁面中的內容須要根據用戶的操做動態變化。html

 

四、 前面說的網頁版知乎我也能夠用JQuery寫啊,爲何要用Vue.js呢?

產品是絕對須要反覆修改的,修改可能會致使DOM的關聯與嵌套層次要發生改變從而使jquery結構相關代碼變的異常複雜,vue.js能夠解決這個問題

產品是絕對須要反覆修改的,修改可能會致使DOM的關聯與嵌套層次要發生改變從而使jquery結構相關代碼變的異常複雜,vue.js能夠解決這個問題前端


你是否還記得你當初寫JQuery的時候,有寫過('#xxx').parent().parent().parent()這種代碼呢?當你第一次寫的時候,你以爲頁面元素很少,不就是找這個元素的爸爸的爸爸的爸爸嗎,我大不了在註釋裏面寫清楚這個元素的爸爸的爸爸的爸爸不就行了。可是萬一過幾天以後你的項目組長或者你的產品經理忽然對你作的網頁提出修改要求,這個修改要求將會影響頁面的結構,也就是DOM的關聯與嵌套層次要發生改變,那麼(‘#xxx’).parent().parent().parent()可能就會變成$(‘#xxx’).parent().parent().parent().parent().parent()了。

這還不算什麼,等之後產品迭代愈來愈快,修改愈來愈多,並且頁面中相似的關聯和嵌套DOM元素不止一個,那麼修改起來將很是費勁。並且JQuery選擇器查找頁面元素以及DOM操做自己也是有性能損失的,可能到時候打開這個頁面,會變得愈來愈卡,而你卻無從下手。

這個時候若是你學過Vue.js,那麼這些抱怨將不復存在。

vue

 

五、前端裏面常說的視圖層是什麼?

咱們把HTML中的DOM就能夠與其餘的部分獨立開來劃分出一個層次,這個層次就叫作視圖層。Vue 的核心庫只關注視圖層

 

六、使用jquery開發完整頁面的流程?

a、html寫構架
b、css裝飾
c、js交互

講到JQuery,就不得不說到JavaScript的DOM操做了。若是你用JQuery來開發一個知乎,那麼你就須要用JQuery中的各類DOM操做方法去操做HTML的DOM結構了。java

如今咱們把一個網頁應用抽象一下,那麼HTML中的DOM其實就是視圖,一個網頁就是經過DOM的組合與嵌套,造成了最基本的視圖結構,再經過CSS的修飾,在基本的視圖結構上「化妝」讓他們看起來更加美觀。最後涉及到交互部分,就須要用到JavaScript來接受用戶的交互請求,而且經過事件機制來響應用戶的交互操做,而且在事件的處理函數中進行各類數據的修改,好比說修改某個DOM中的innerHTML或者innerText部分。node

 

七、Vue.js爲何能讓基於網頁的前端應用程序開發起來這麼方便?

b、響應式的數據綁定
c、組件化的開發
d、Virtual DOM

由於Vue.js有聲明式,響應式的數據綁定,與組件化的開發,而且還使用了Virtual DOM這個看名字就以爲高大上的技術。jquery

 

八、vue.js中常說的數據動態綁定是什麼?

就是vue.js會自動響應數據的變化狀況,而且根據用戶在代碼中預先寫好的綁定關係,對全部綁定在一塊兒的數據和視圖內容都進行修改。

而這種綁定關係,在圖上是以input 標籤的v-model屬性來聲明的,所以你在別的地方可能也會看到有人粗略的稱vue.js爲聲明式渲染的模版引擎。git

 

九、前端中爲何要組件化開發?

非組件化開發代碼和工做量都很是大,修改起來生不如死

可是如今咱們作單頁應用,頁面交互和結構十分複雜,一個頁面上就有許許多多的模塊須要編寫,並且每每一個模塊的代碼量和工做量就很是龐大,若是還按照原先的方法來開發,那麼會累死人。並且遇到之後的產品需求變動,修改起來也很是麻煩,生怕動了其中一個div以後,其餘div跟着雪崩,整個頁面所有亂套,或者因爲JavaScript的事件冒泡機制,致使修改一些內層的DOM事件處理函數以後,出現各類莫名其妙的詭異BUG。github

 

十、前端中如何進行組件化開發?

a、借用的後端的面向對象中的模塊化思想(把一些大功能拆分紅許多函數,而後分配給不一樣的人來開發)
b、把一個單頁應用中的各類模塊拆分到一個一個單獨的組件(component)中,咱們只要先在父級應用中寫好各類組件標籤(佔坑),而且在組件標籤中寫好要傳入組件的參數(就像給函數傳入參數同樣,這個參數叫作組件的屬性),而後再分別寫好各類組件的實現(填坑)

在面向對象編程中,咱們可使用面向對象的思想將各類模塊打包成類或者把一個大的業務模塊拆分紅更多更小的幾個類。在面向過程編程中,咱們也能夠把一些大功能拆分紅許多函數,而後分配給不一樣的人來開發。

在前端應用,咱們是否也能夠像編程同樣把模塊封裝呢?這就引入了組件化開發的思想。

Vue.js經過組件,把一個單頁應用中的各類模塊拆分到一個一個單獨的組件(component)中,咱們只要先在父級應用中寫好各類組件標籤(佔坑),而且在組件標籤中寫好要傳入組件的參數(就像給函數傳入參數同樣,這個參數叫作組件的屬性),而後再分別寫好各類組件的實現(填坑),而後整個應用就算作完了。

 

十一、爲何有Virtual DOM技術(如今的網速愈來愈快了,不少人家裏都是幾十甚至上百M的光纖,手機也是4G起步了,按道理一個網頁才幾百K,並且瀏覽器自己還會緩存不少資源文件,那麼幾十M的光纖爲何打開一個以前已經打開過,已經有緩存的頁面仍是感受很慢呢?)?

(1)、瀏覽器自己處理DOM也是有性能瓶頸的
(2)、用JQuery或者原生的JavaScript DOM操做函數對DOM進行頻繁操做的時候,瀏覽器要不停的渲染新的DOM樹

a、問題

如今的網速愈來愈快了,不少人家裏都是幾十甚至上百M的光纖,手機也是4G起步了,按道理一個網頁才幾百K,並且瀏覽器自己還會緩存不少資源文件,那麼幾十M的光纖爲何打開一個以前已經打開過,已經有緩存的頁面仍是感受很慢呢?

b、緣由

(1)、瀏覽器自己處理DOM也是有性能瓶頸的

(2)、用JQuery或者原生的JavaScript DOM操做函數對DOM進行頻繁操做的時候,瀏覽器要不停的渲染新的DOM樹

這就是由於瀏覽器自己處理DOM也是有性能瓶頸的,尤爲是在傳統開發中,用JQuery或者原生的JavaScript DOM操做函數對DOM進行頻繁操做的時候,瀏覽器要不停的渲染新的DOM樹,致使頁面看起來很是卡頓。

 

十二、Virtual DOM如何實現?

a、預計算dom的各類操做,把最後一次的結果渲染出來(減小dom的渲染次數)

而Virtual DOM則是虛擬DOM的英文,簡單來講,他就是一種能夠預先經過JavaScript進行各類計算,把最終的DOM操做計算出來並優化,因爲這個DOM操做屬於預處理操做,並無真實的操做DOM,因此叫作虛擬DOM。最後在計算完畢才真正將DOM操做提交,將DOM操做變化反映到DOM樹上。

 

1三、到底該怎麼用Vue.js作單頁應用開發?

其實能夠直接看學習視頻開始幹,應該是最好的

a、介紹 - vue.js官方文檔的基礎部分硬着頭皮看一遍

個人建議是,先把介紹 - vue.js官方文檔的基礎部分硬着頭皮看一遍。除了組件這個小節涉及到了不少晦澀難懂的名詞之外,前面幾章徹底就是把Vue.js看成一個模版引擎來用。

b、ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,最好對Node.js也要有所瞭解

而後開始學習ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,最好對Node.js也要有所瞭解。

c、看網上各類實戰視頻以及文章還有別人開源的源代碼

最後組件部分先大體看一遍,瞭解組件裏面都有哪些概念以後,開始看網上各類實戰視頻以及文章還有別人開源的源代碼。

 

1四、ECMAScript是啥?

ECMAScript 和 JavaScript 的關係是,前者是後者的規格,後者是前者的一種實現(另外的 ECMAScript 方言還有 Jscript 和 ActionScript)。平常場合,這兩個詞是能夠互換的。

而ECMAScript6就是新一代的JavaScript語言。

 

1五、Webpack是啥?

a、前端打包工具

Webpack是一個前端打包和構建工具。若是你以前一直是手寫HTML,CSS,JavaScript,而且經過link標籤將CSS引入你的HTML文件,以及經過Script標籤的src屬性引入外部的JS腳本,那麼你確定會對這個工具感到陌生。沒關係,咱們先來了解一下爲何要用Webpack,而後帶着緣由去學習就行了。

 

1六、爲何要用Webpack?

a、方便管理各類素材
b、打包以便減小瀏覽器的訪問次數

前面說了,作一個單頁應用程序自己就至關複雜,並且在作的時候確定會使用到不少素材和別的第三方庫,咱們該如何去管理這些東西呢?

還有前面講到了Webpack是一個前端打包工具,前端代碼爲何要打包呢?由於單頁應用程序中用到不少素材,若是每個素材都經過在HTML中以src屬性或者link來引入,那麼請求一個頁面的時候,可能瀏覽器就要發起十屢次請求,每每請求的這些資源都是一些腳本代碼或者很小的圖片,這些資源自己才幾k,下載連1秒都不須要,可是因爲HTTP是應用層協議,它的下層是TCP這個運輸層協議,TCP的握手和揮手過程消耗的時間可能比下載資源自己還要長,因此須要把這些小文件所有打包成一個文件,這樣只要一次TCP握手和揮手的過程,就把多個資源給下載下來了,而且多個資源因爲都是共享一個HTTP請求,因此head等部分也是共享的,至關於造成了規模效應,讓網頁展示更快,用戶體驗更好。

 

1七、NPM和Node.js又是什麼?它們是什麼關係?

a、Node.js是一個服務端的JavaScript運行環境
b、Node.js能夠寫獨立程序(Webpack就是Node.js寫的)
c、NPM是一個node.js的包管理器(相似java的maven(包的依賴管理),php也有一個相似的)。

 

a、Node.js是一個服務端的JavaScript運行環境

Node.js是一個服務端的JavaScript運行環境,經過Node.js能夠實現用JavaScript寫獨立程序。

b、Node.js能夠寫獨立程序(Webpack就是Node.js寫的)

像咱們以前提到的Webpack就是Node.js寫的,因此做爲一個前端開發,即便你不用Node.js寫獨立程序,也得配一個Node.js運行環境,畢竟不少前端工具都是使用它寫的。

c、NPM是一個node.js的包管理器(相似java的maven(包的依賴管理),php也有一個相似的)。

NPM是一個node.js的包管理器。咱們在傳統開發的時候,JQuery.js大多都是百度搜索,而後去官網下載,或者直接引入CDN資源,這種方法太過於麻煩。若是之後遇到其餘的包,這個包的代碼自己可能還調用了其餘的包(也稱這個包和其餘的那幾個包存在依賴關係),那麼咱們要在本身的項目中引入一個包將變得十分困難。如今咱們有了NPM這個包管理器,直接能夠經過

npm install xxx包名稱

的方式引入它,好比說

npm install vue

 

1八、Vue-CLi是啥?

它是一個vue.js的腳手架工具。說白了就是一個自動幫你生成好項目目錄,配置好Webpack,以及各類依賴包的工具,

它能夠經過

npm install vue-cli -g

的方式安裝,後面的-g表示全局安裝的意思,意味着你能夠打開命令行以後直接經過vue命令調用它。

 

1九、Vuex和Vue-route是什麼(暫時瞭解便可)?

Vuex是vue的一個狀態管理器。用於集中管理一個單頁應用程序中的各類狀態。
Vue-route是vue的一個前端路由器,這個路由器不是咱們上網用的路由器,而是一個管理請求入口和頁面映射關係的東西。它能夠實現對頁面局部進行無刷新的替換,讓用戶感受就像切換到了網頁同樣。

要講清楚這兩個東西,又得花費大量篇幅,因此這裏只是簡單提一下,先學好vue.js自己纔是最重要的。

 

 

2、vue.js有什麼用,是用來作什麼的

用數據綁定的思想,vue能夠簡單寫單個頁面,也能夠寫一個大的前端系統,也能夠作手機app的界面。

相關文章
相關標籤/搜索