vue.js的相關(guān)問(wèn)題有哪些

這篇文章主要講解了“vue.js的相關(guān)問(wèn)題有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue.js的相關(guān)問(wèn)題有哪些”吧！

1、Vue.js是什么？

　●　漸進(jìn)式框架

　●　自底向上增量開(kāi)發(fā)的設(shè)計(jì)

　●　易學(xué)習(xí)

　●　易整合

Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。

【推薦課程：vuejs教程】

2、vue.js到底適合做哪種類型的界面？

a、表單項(xiàng)繁多

b、內(nèi)容需要根據(jù)用戶的操作進(jìn)行修改

Vue.js就是一個(gè)用于搭建類似于網(wǎng)頁(yè)版知乎這種表單項(xiàng)繁多，且內(nèi)容需要根據(jù)用戶的操作進(jìn)行修改的網(wǎng)頁(yè)版應(yīng)用。

3、單頁(yè)應(yīng)用程序（SPA）是什么？

一個(gè)頁(yè)面就是應(yīng)用（子應(yīng)用）

顧名思義，單頁(yè)應(yīng)用一般指的就是一個(gè)頁(yè)面就是應(yīng)用，當(dāng)然也可以是一個(gè)子應(yīng)用，比如說(shuō)知乎的一個(gè)頁(yè)面就可以視為一個(gè)子應(yīng)用。單頁(yè)應(yīng)用程序中一般交互處理非常多，而且頁(yè)面中的內(nèi)容需要根據(jù)用戶的操作動(dòng)態(tài)變化。

4、 前面說(shuō)的網(wǎng)頁(yè)版知乎我也可以用JQuery寫啊，為什么要用Vue.js呢？

a、產(chǎn)品是絕對(duì)需要反復(fù)修改的

b、修改可能會(huì)導(dǎo)致DOM的關(guān)聯(lián)與嵌套層次要發(fā)生改變從而使jquery結(jié)構(gòu)相關(guān)代碼變的異常復(fù)雜

c、vue.js可以解決這個(gè)問(wèn)題

你是否還記得你當(dāng)初寫JQuery的時(shí)候，有寫過(guò)('#xxx').parent().parent().parent()這種代碼呢？當(dāng)你第一次寫的時(shí)候，你覺(jué)得頁(yè)面元素不多，不就是找這個(gè)元素的爸爸的爸爸的爸爸嗎，我大不了在注釋里面寫清楚這個(gè)元素的爸爸的爸爸的爸爸不就好了。但是萬(wàn)一過(guò)幾天之后你的項(xiàng)目組長(zhǎng)或者你的產(chǎn)品經(jīng)理突然對(duì)你做的網(wǎng)頁(yè)提出修改要求，這個(gè)修改要求將會(huì)影響頁(yè)面的結(jié)構(gòu)，也就是DOM的關(guān)聯(lián)與嵌套層次要發(fā)生改變，那么(‘#xxx’).parent().parent().parent()可能就會(huì)變成$(‘#xxx’).parent().parent().parent().parent().parent()了。

這還不算什么，等以后產(chǎn)品迭代越來(lái)越快，修改越來(lái)越多，而且頁(yè)面中類似的關(guān)聯(lián)和嵌套DOM元素不止一個(gè)，那么修改起來(lái)將非常費(fèi)勁。而且JQuery選擇器查找頁(yè)面元素以及DOM操作本身也是有性能損失的，可能到時(shí)候打開(kāi)這個(gè)頁(yè)面，會(huì)變得越來(lái)越卡，而你卻無(wú)從下手。

這個(gè)時(shí)候如果你學(xué)過(guò)Vue.js，那么這些抱怨將不復(fù)存在。

5、前端里面常說(shuō)的視圖層是什么？

我們把HTML中的DOM就可以與其他的部分獨(dú)立開(kāi)來(lái)劃分出一個(gè)層次，這個(gè)層次就叫做視圖層。

Vue 的核心庫(kù)只關(guān)注視圖層

6、使用jquery開(kāi)發(fā)完整頁(yè)面的流程？

a、html寫構(gòu)架

b、css裝飾

c、js交互

講到JQuery，就不得不說(shuō)到JavaScript的DOM操作了。如果你用JQuery來(lái)開(kāi)發(fā)一個(gè)知乎，那么你就需要用JQuery中的各種DOM操作方法去操作HTML的DOM結(jié)構(gòu)了。

現(xiàn)在我們把一個(gè)網(wǎng)頁(yè)應(yīng)用抽象一下，那么HTML中的DOM其實(shí)就是視圖，一個(gè)網(wǎng)頁(yè)就是通過(guò)DOM的組合與嵌套，形成了最基本的視圖結(jié)構(gòu)，再通過(guò)CSS的修飾，在基本的視圖結(jié)構(gòu)上“化妝”讓他們看起來(lái)更加美觀。最后涉及到交互部分，就需要用到JavaScript來(lái)接受用戶的交互請(qǐng)求，并且通過(guò)事件機(jī)制來(lái)響應(yīng)用戶的交互操作，并且在事件的處理函數(shù)中進(jìn)行各種數(shù)據(jù)的修改，比如說(shuō)修改某個(gè)DOM中的innerHTML或者innerText部分。

7、Vue.js為什么能讓基于網(wǎng)頁(yè)的前端應(yīng)用程序開(kāi)發(fā)起來(lái)這么方便？

a、有聲明式

b、響應(yīng)式的數(shù)據(jù)綁定

c、組件化的開(kāi)發(fā)

d、Virtual DOM

因?yàn)閂ue.js有聲明式，響應(yīng)式的數(shù)據(jù)綁定，與組件化的開(kāi)發(fā)，并且還使用了Virtual DOM這個(gè)看名字就覺(jué)得高大上的技術(shù)。

8、vue.js中常說(shuō)的數(shù)據(jù)動(dòng)態(tài)綁定是什么？

就是vue.js會(huì)自動(dòng)響應(yīng)數(shù)據(jù)的變化情況，并且根據(jù)用戶在代碼中預(yù)先寫好的綁定關(guān)系，對(duì)所有綁定在一起的數(shù)據(jù)和視圖內(nèi)容都進(jìn)行修改。而這種綁定關(guān)系，在圖上是以input 標(biāo)簽的v-model屬性來(lái)聲明的，因此你在別的地方可能也會(huì)看到有人粗略的稱vue.js為聲明式渲染的模版引擎。

9、前端中為什么要組件化開(kāi)發(fā)？

a、非組件化開(kāi)發(fā)代碼和工作量都非常大

b、修改起來(lái)生不如死

但是現(xiàn)在我們做單頁(yè)應(yīng)用，頁(yè)面交互和結(jié)構(gòu)十分復(fù)雜，一個(gè)頁(yè)面上就有許許多多的模塊需要編寫，而且往往一個(gè)模塊的代碼量和工作量就非常龐大，如果還按照原先的方法來(lái)開(kāi)發(fā)，那么會(huì)累死人。而且遇到以后的產(chǎn)品需求變更，修改起來(lái)也非常麻煩，生怕動(dòng)了其中一個(gè)div之后，其他div跟著雪崩，整個(gè)頁(yè)面全部亂套，或者由于JavaScript的事件冒泡機(jī)制，導(dǎo)致修改一些內(nèi)層的DOM事件處理函數(shù)之后，出現(xiàn)各種莫名其妙的詭異BUG。

10、前端中如何進(jìn)行組件化開(kāi)發(fā)？

a、借用的后端的面向?qū)ο笾械哪K化思想（把一些大功能拆分成許多函數(shù)，然后分配給不同的人來(lái)開(kāi)發(fā)）

b、把一個(gè)單頁(yè)應(yīng)用中的各種模塊拆分到一個(gè)一個(gè)單獨(dú)的組件（component）中，我們只要先在父級(jí)應(yīng)用中寫好各種組件標(biāo)簽（占坑），并且在組件標(biāo)簽中寫好要傳入組件的參數(shù)（就像給函數(shù)傳入?yún)?shù)一樣，這個(gè)參數(shù)叫做組件的屬性），然后再分別寫好各種組件的實(shí)現(xiàn)（填坑）

在面向?qū)ο缶幊讨?，我們可以使用面向?qū)ο蟮乃枷雽⒏鞣N模塊打包成類或者把一個(gè)大的業(yè)務(wù)模塊拆分成更多更小的幾個(gè)類。在面向過(guò)程編程中，我們也可以把一些大功能拆分成許多函數(shù)，然后分配給不同的人來(lái)開(kāi)發(fā)。

在前端應(yīng)用，我們是否也可以像編程一樣把模塊封裝呢？這就引入了組件化開(kāi)發(fā)的思想。

Vue.js通過(guò)組件，把一個(gè)單頁(yè)應(yīng)用中的各種模塊拆分到一個(gè)一個(gè)單獨(dú)的組件（component）中，我們只要先在父級(jí)應(yīng)用中寫好各種組件標(biāo)簽（占坑），并且在組件標(biāo)簽中寫好要傳入組件的參數(shù)（就像給函數(shù)傳入?yún)?shù)一樣，這個(gè)參數(shù)叫做組件的屬性），然后再分別寫好各種組件的實(shí)現(xiàn)（填坑），然后整個(gè)應(yīng)用就算做完了。

11、為什么有Virtual DOM技術(shù)？

a、問(wèn)題

現(xiàn)在的網(wǎng)速越來(lái)越快了，很多人家里都是幾十甚至上百M(fèi)的光纖，手機(jī)也是4G起步了，按道理一個(gè)網(wǎng)頁(yè)才幾百K，而且瀏覽器本身還會(huì)緩存很多資源文件，那么幾十M的光纖為什么打開(kāi)一個(gè)之前已經(jīng)打開(kāi)過(guò)，已經(jīng)有緩存的頁(yè)面還是感覺(jué)很慢呢？

b、原因

（1）、瀏覽器本身處理DOM也是有性能瓶頸的

（2）、用JQuery或者原生的JavaScript DOM操作函數(shù)對(duì)DOM進(jìn)行頻繁操作的時(shí)候，瀏覽器要不停的渲染新的DOM樹

這就是因?yàn)闉g覽器本身處理DOM也是有性能瓶頸的，尤其是在傳統(tǒng)開(kāi)發(fā)中，用JQuery或者原生的JavaScript DOM操作函數(shù)對(duì)DOM進(jìn)行頻繁操作的時(shí)候，瀏覽器要不停的渲染新的DOM樹，導(dǎo)致頁(yè)面看起來(lái)非?？D。

12、Virtual DOM如何實(shí)現(xiàn)？

a、預(yù)計(jì)算dom的各種操作，把最后一次的結(jié)果渲染出來(lái)（減少dom的渲染次數(shù)）

而Virtual DOM則是虛擬DOM的英文，簡(jiǎn)單來(lái)說(shuō)，他就是一種可以預(yù)先通過(guò)JavaScript進(jìn)行各種計(jì)算，把最終的DOM操作計(jì)算出來(lái)并優(yōu)化，由于這個(gè)DOM操作屬于預(yù)處理操作，并沒(méi)有真實(shí)的操作DOM，所以叫做虛擬DOM。最后在計(jì)算完畢才真正將DOM操作提交，將DOM操作變化反映到DOM樹上。

13、到底該怎么用Vue.js做單頁(yè)應(yīng)用開(kāi)發(fā)？

其實(shí)可以直接看學(xué)習(xí)視頻開(kāi)始干，應(yīng)該是最好的

a、介紹 - vue.js官方文檔的基礎(chǔ)部分硬著頭皮看一遍

我的建議是，先把介紹 - vue.js官方文檔的基礎(chǔ)部分硬著頭皮看一遍。除了組件這個(gè)小節(jié)涉及到了很多晦澀難懂的名詞以外，前面幾章完全就是把Vue.js當(dāng)作一個(gè)模版引擎來(lái)用。

b、ECMAScript6，Webpack，NPM以及Vue-Cli的基本用法，最好對(duì)Node.js也要有所了解

然后開(kāi)始學(xué)習(xí)ECMAScript6，Webpack，NPM以及Vue-Cli的基本用法，最好對(duì)Node.js也要有所了解。

c、看網(wǎng)上各種實(shí)戰(zhàn)視頻以及文章還有別人開(kāi)源的源代碼

最后組件部分先大致看一遍，了解組件里面都有哪些概念之后，開(kāi)始看網(wǎng)上各種實(shí)戰(zhàn)視頻以及文章還有別人開(kāi)源的源代碼。

14、ECMAScript是啥？

ECMAScript 和 JavaScript 的關(guān)系是，前者是后者的規(guī)格，后者是前者的一種實(shí)現(xiàn)（另外的 ECMAScript 方言還有 Jscript 和 ActionScript）。日常場(chǎng)合，這兩個(gè)詞是可以互換的。

而ECMAScript6就是新一代的JavaScript語(yǔ)言。

15、Webpack是啥？

a、前端打包工具

Webpack是一個(gè)前端打包和構(gòu)建工具。如果你之前一直是手寫HTML，CSS，JavaScript，并且通過(guò)link標(biāo)簽將CSS引入你的HTML文件，以及通過(guò)Script標(biāo)簽的src屬性引入外部的JS腳本，那么你肯定會(huì)對(duì)這個(gè)工具感到陌生。不要緊，我們先來(lái)了解一下為什么要用Webpack，然后帶著原因去學(xué)習(xí)就好了。

16、為什么要用Webpack？

a、方便管理各種素材

b、打包以便減少瀏覽器的訪問(wèn)次數(shù)

前面說(shuō)了，做一個(gè)單頁(yè)應(yīng)用程序本身就相當(dāng)復(fù)雜，而且在做的時(shí)候肯定會(huì)使用到很多素材和別的第三方庫(kù)，我們?cè)撊绾稳ス芾磉@些東西呢？

還有前面講到了Webpack是一個(gè)前端打包工具，前端代碼為什么要打包呢？因?yàn)閱雾?yè)應(yīng)用程序中用到很多素材，如果每一個(gè)素材都通過(guò)在HTML中以src屬性或者link來(lái)引入，那么請(qǐng)求一個(gè)頁(yè)面的時(shí)候，可能瀏覽器就要發(fā)起十多次請(qǐng)求，往往請(qǐng)求的這些資源都是一些腳本代碼或者很小的圖片，這些資源本身才幾k，下載連1秒都不需要，但是由于HTTP是應(yīng)用層協(xié)議，它的下層是TCP這個(gè)運(yùn)輸層協(xié)議，TCP的握手和揮手過(guò)程消耗的時(shí)間可能比下載資源本身還要長(zhǎng)，所以需要把這些小文件全部打包成一個(gè)文件，這樣只要一次TCP握手和揮手的過(guò)程，就把多個(gè)資源給下載下來(lái)了，并且多個(gè)資源由于都是共享一個(gè)HTTP請(qǐng)求，所以head等部分也是共享的，相當(dāng)于形成了規(guī)模效應(yīng)，讓網(wǎng)頁(yè)展現(xiàn)更快，用戶體驗(yàn)更好。

17、NPM和Node.js又是什么？它們是什么關(guān)系？

a、Node.js是一個(gè)服務(wù)端的JavaScript運(yùn)行環(huán)境

Node.js是一個(gè)服務(wù)端的JavaScript運(yùn)行環(huán)境，通過(guò)Node.js可以實(shí)現(xiàn)用JavaScript寫?yīng)毩⒊绦颉?/p>

b、Node.js可以寫?yīng)毩⒊绦颍╓ebpack就是Node.js寫的）

像我們之前提到的Webpack就是Node.js寫的，所以作為一個(gè)前端開(kāi)發(fā)，即使你不用Node.js寫?yīng)毩⒊绦颍驳门湟粋€(gè)Node.js運(yùn)行環(huán)境，畢竟很多前端工具都是使用它寫的。

c、NPM是一個(gè)node.js的包管理器（類似java的maven（包的依賴管理），php也有一個(gè)類似的）。

NPM是一個(gè)node.js的包管理器。我們?cè)趥鹘y(tǒng)開(kāi)發(fā)的時(shí)候，JQuery.js大多都是百度搜索，然后去官網(wǎng)下載，或者直接引入CDN資源，這種方法太過(guò)于麻煩。如果以后遇到其他的包，這個(gè)包的代碼本身可能還調(diào)用了其他的包（也稱這個(gè)包和其他的那幾個(gè)包存在依賴關(guān)系），那么我們要在自己的項(xiàng)目中引入一個(gè)包將變得十分困難?，F(xiàn)在我們有了NPM這個(gè)包管理器，直接可以通過(guò)

npm install xxx包名稱

的方式引入它，比如說(shuō)

npm install vue

18、Vue-CLi是啥？

它是一個(gè)vue.js的腳手架工具。說(shuō)白了就是一個(gè)自動(dòng)幫你生成好項(xiàng)目目錄，配置好Webpack，以及各種依賴包的工具，它可以通過(guò)

npm install vue-cli -g

的方式安裝，后面的-g表示全局安裝的意思，意味著你可以打開(kāi)命令行之后直接通過(guò)vue命令調(diào)用它。

19、Vuex和Vue-route是什么

Vuex是vue的一個(gè)狀態(tài)管理器。用于集中管理一個(gè)單頁(yè)應(yīng)用程序中的各種狀態(tài)。

Vue-route是vue的一個(gè)前端路由器，這個(gè)路由器不是我們上網(wǎng)用的路由器，而是一個(gè)管理請(qǐng)求入口和頁(yè)面映射關(guān)系的東西。它可以實(shí)現(xiàn)對(duì)頁(yè)面局部進(jìn)行無(wú)刷新的替換，讓用戶感覺(jué)就像切換到了網(wǎng)頁(yè)一樣。

要講清楚這兩個(gè)東西，又得花費(fèi)大量篇幅，所以這里只是簡(jiǎn)單提一下，先學(xué)好vue.js本身才是最重要的。

感謝各位的閱讀，以上就是“vue.js的相關(guān)問(wèn)題有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vue.js的相關(guān)問(wèn)題有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！