vue常見問題

vue的底層原理?

vue組件之間的通信?

JS中判斷數(shù)據(jù)類型的方法有幾種?

最常見的判斷方法:typeof

判斷已知對象類型的方法:instanceof

根據(jù)對象的constructor判斷: constructor

無敵萬能的方法:jquery.type()

vue與angular的區(qū)別?

1.vue僅僅是mvvm中的view層,只是一個如jquery般的工具庫,而不是框架,而angular而是mvvm框架。

2.vue的雙向邦定是基于ES5 中的 3.getter/setter來實現(xiàn)的,而angular而是由自己實現(xiàn)一套模版編譯規(guī)則,需要進行所謂的“臟”檢查,vue則不需要。因此,vue在性能上更高效,但是代價是對于ie9以下的瀏覽器無法支持。

4.vue需要提供一個el對象進行實例化,后續(xù)的所有作用范圍也是在el對象之下,而angular而是整個html頁面。一個頁面,可以有多個vue實例,而angular好像不是這么玩的。

5.vue真的很容易上手,學習成本相對低,不過可以參考的資料不是很豐富,官方文檔比較簡單,缺少全面的使用案例。高級的用法,需要自己去研究源碼,至少目前是這樣。


1.vue優(yōu)點?

答:輕量級框架:只關(guān)注視圖層,是一個構(gòu)建數(shù)據(jù)的視圖集合,大小只有幾十kb;

簡單易學:國人開發(fā),中文文檔,不存在語言障礙 ,易于理解和學習;

雙向數(shù)據(jù)綁定:保留了angular的特點,在數(shù)據(jù)操作方面更為簡單;

組件化:保留了react的優(yōu)點,實現(xiàn)了html的封裝和重用,在構(gòu)建單頁面應用方面有著獨特的優(yōu)勢;

視圖,數(shù)據(jù),結(jié)構(gòu)分離:使數(shù)據(jù)的更改更為簡單,不需要進行邏輯代碼的修改,只需要操作數(shù)據(jù)就能完成相關(guān)操作;

虛擬DOM:dom操作是非常耗費性能的, 不再使用原生的dom操作節(jié)點,極大解放dom操作,但具體操作的還是dom不過是換了另一種方式;

運行速度更快:相比較與react而言,同樣是操作虛擬dom,就性能而言,vue存在很大的優(yōu)勢。

2.vue父組件向子組件傳遞數(shù)據(jù)?

答:通過props

3.子組件像父組件傳遞事件?

答:$emit方法

4.v-show和v-if指令的共同點和不同點?

答: 共同點:都能控制元素的顯示和隱藏;

不同點:實現(xiàn)本質(zhì)方法不同,v-show本質(zhì)就是通過控制css中的display設置為none,控制隱藏,只會編譯一次;v-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素,若初始值為false,就不會編譯了。而且v-if不停的銷毀和創(chuàng)建比較消耗性能。

總結(jié):如果要頻繁切換某節(jié)點,使用v-show(切換開銷比較小,初始開銷較大)。如果不需要頻繁切換某節(jié)點使用v-if(初始渲染開銷較小,切換開銷比較大)。

5.如何讓CSS只在當前組件中起作用?

答:在組件中的style前面加上scoped

6.<keep-alive></keep-alive>的作用是什么?

答:keep-alive 是 Vue 內(nèi)置的一個組件,可以使被包含的組件保留狀態(tài),或避免重新渲染。

7.如何獲取dom?

答:ref="domName" 用法:this.$refs.domName

8.說出幾種vue當中的指令和它的用法?

答:v-model雙向數(shù)據(jù)綁定;

v-for循環(huán);

v-if v-show 顯示與隱藏;

v-on事件;v-once: 只綁定一次。

9. vue-loader是什么?使用它的用途有哪些?

答:vue文件的一個加載器,將template/js/style轉(zhuǎn)換成js模塊。

用途:js可以寫es6、style樣式可以scss或less、template可以加jade等

10.為什么使用key?

答:需要使用key來給每個節(jié)點做一個唯一標識,Diff算法就可以正確的識別此節(jié)點。

作用主要是為了高效的更新虛擬DOM。

11.axios及安裝?

答:請求后臺資源的模塊。npm install axios --save裝好,

js中使用import進來,然后.get或.post。返回在.then函數(shù)中如果成功,失敗則是在.catch函數(shù)中。

12.v-modal的使用。

答:v-model用于表單數(shù)據(jù)的雙向綁定,其實它就是一個語法糖,這個背后就做了兩個操作:

v-bind綁定一個value屬性;

v-on指令給當前元素綁定input事件。

13.請說出vue.cli項目中src目錄每個文件夾和文件的用法?

答:assets文件夾是放靜態(tài)資源;components是放組件;router是定義路由相關(guān)的配置; app.vue是一個應用主組件;main.js是入口文件。

14.分別簡述computed和watch的使用場景

答:computed:

    當一個屬性受多個屬性影響的時候就需要用到computed

    最典型的栗子: 購物車商品結(jié)算的時候

watch:

    當一條數(shù)據(jù)影響多條數(shù)據(jù)的時候就需要用watch

    栗子:搜索數(shù)據(jù)

15.v-on可以監(jiān)聽多個方法嗎?

答:可以,栗子:<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。

16.$nextTick的使用

答:當你修改了data的值然后馬上獲取這個dom元素的值,是不能獲取到更新后的值,

你需要使用$nextTick這個回調(diào),讓修改后的data值渲染更新到dom元素之后在獲取,才能成功。

17.vue組件中data為什么必須是一個函數(shù)?

答:因為JavaScript的特性所導致,在component中,data必須以函數(shù)的形式存在,不可以是對象。

  組建中的data寫成一個函數(shù),數(shù)據(jù)以函數(shù)返回值的形式定義,這樣每次復用組件的時候,都會返回一份新的data,相當于每個組件實例都有自己私有的數(shù)據(jù)空間,它們只負責各自維護的數(shù)據(jù),不會造成混亂。而單純的寫成對象形式,就是所有的組件實例共用了一個data,這樣改一個全都改了。

18.漸進式框架的理解

答:主張最少;可以根據(jù)不同的需求選擇不同的層級;

19.Vue中雙向數(shù)據(jù)綁定是如何實現(xiàn)的?

答:vue 雙向數(shù)據(jù)綁定是通過 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來實現(xiàn)的, 也就是說數(shù)據(jù)和視圖同步,數(shù)據(jù)發(fā)生變化,視圖跟著變化,視圖變化,數(shù)據(jù)也隨之發(fā)生改變;

核心:關(guān)于VUE雙向數(shù)據(jù)綁定,其核心是 Object.defineProperty()方法。

20.單頁面應用和多頁面應用區(qū)別及優(yōu)缺點

答:單頁面應用(SPA),通俗一點說就是指只有一個主頁面的應用,瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內(nèi)容都包含在這個所謂的主頁面中。但在寫的時候,還是會分開寫(頁面片段),然后在交互的時候由路由程序動態(tài)載入,單頁面的頁面跳轉(zhuǎn),僅刷新局部資源。多應用于pc端。

多頁面(MPA),就是指一個應用中有多個頁面,頁面跳轉(zhuǎn)時是整頁刷新

單頁面的優(yōu)點:

用戶體驗好,快,內(nèi)容的改變不需要重新加載整個頁面,基于這一點spa對服務器壓力較?。磺昂蠖朔蛛x;頁面效果會比較炫酷(比如切換頁面內(nèi)容時的專場動畫)。

單頁面缺點:

不利于seo;導航不可用,如果一定要導航需要自行實現(xiàn)前進、后退。(由于是單頁面不能用瀏覽器的前進后退功能,所以需要自己建立堆棧管理);初次加載時耗時多;頁面復雜度提高很多。

21.v-if和v-for的優(yōu)先級

答:當 v-if 與 v-for 一起使用時,v-for 具有比 v-if 更高的優(yōu)先級,這意味著 v-if 將分別重復運行于每個 v-for 循環(huán)中。所以,不推薦v-if和v-for同時使用。

如果v-if和v-for一起用的話,vue中的的會自動提示v-if應該放到外層去。

22.assets和static的區(qū)別

答:相同點:assets和static兩個都是存放靜態(tài)資源文件。項目中所需要的資源文件圖片,字體圖標,樣式文件等都可以放在這兩個文件下,這是相同點?

不相同點:assets中存放的靜態(tài)資源文件在項目打包時,也就是運行npm run build時會將assets中放置的靜態(tài)資源文件進行打包上傳,所謂打包簡單點可以理解為壓縮體積,代碼格式化。而壓縮后的靜態(tài)資源文件最終也都會放置在static文件中跟著index.html一同上傳至服務器。static中放置的靜態(tài)資源文件就不會要走打包壓縮格式化等流程,而是直接進入打包好的目錄,直接上傳至服務器。因為避免了壓縮直接進行上傳,在打包時會提高一定的效率,但是static中的資源文件由于沒有進行壓縮等操作,所以文件的體積也就相對于assets中打包后的文件提交較大點。在服務器中就會占據(jù)更大的空間。

建議:將項目中template需要的樣式文件js文件等都可以放置在assets中,走打包這一流程。減少體積。而項目中引入的第三方的資源文件如iconfoont.css等文件可以放置在static中,因為這些引入的第三方文件已經(jīng)經(jīng)過處理,我們不再需要處理,直接上傳。

23.vue常用的修飾符

答:.stop:等同于JavaScript中的event.stopPropagation(),防止事件冒泡;

.prevent:等同于JavaScript中的event.preventDefault(),防止執(zhí)行預設的行為(如果事件可取消,則取消該事件,而不停止事件的進一步傳播);

.capture:與事件冒泡的方向相反,事件捕獲由外到內(nèi);

.self:只會觸發(fā)自己范圍內(nèi)的事件,不包含子元素;

.once:只會觸發(fā)一次。

24.vue的兩個核心點

答:數(shù)據(jù)驅(qū)動、組件系統(tǒng)

數(shù)據(jù)驅(qū)動:ViewModel,保證數(shù)據(jù)和視圖的一致性。

組件系統(tǒng):應用類UI可以看作全部是由組件樹構(gòu)成的。

25.vue和jQuery的區(qū)別

答:jQuery是使用選擇器($)選取DOM對象,對其進行賦值、取值、事件綁定等操作,其實和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對象,而數(shù)據(jù)和界面是在一起的。比如需要獲取label標簽的內(nèi)容:$("lable").val();,它還是依賴DOM元素的值。?

Vue則是通過Vue對象將數(shù)據(jù)和View完全分離開來了。對數(shù)據(jù)進行操作不再需要引用相應的DOM對象,可以說數(shù)據(jù)和View是分離的,他們通過Vue對象這個vm實現(xiàn)相互的綁定。這就是傳說中的MVVM。

26. 引進組件的步驟

答: 在template中引入組件;

在script的第一行用import引入路徑;

用component中寫上組件名稱。

27.delete和Vue.delete刪除數(shù)組的區(qū)別

答:delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了數(shù)組 改變了數(shù)組的鍵值。

28.SPA首屏加載慢如何解決

答:安裝動態(tài)懶加載所需插件;使用CDN資源。

29.Vue-router跳轉(zhuǎn)和location.href有什么區(qū)別

答:使用location.href='/url'來跳轉(zhuǎn),簡單方便,但是刷新了頁面;

使用history.pushState('/url'),無刷新頁面,靜態(tài)跳轉(zhuǎn);

引進router,然后使用router.push('/url')來跳轉(zhuǎn),使用了diff算法,實現(xiàn)了按需加載,減少了dom的消耗。

其實使用router跳轉(zhuǎn)和使用history.pushState()沒什么差別的,因為vue-router就是用了history.pushState(),尤其是在history模式下。

30. vue slot

答:簡單來說,假如父組件需要在子組件內(nèi)放一些DOM,那么這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示,就是slot分發(fā)負責的活。

31.你們vue項目是打包了一個js文件,一個css文件,還是有多個文件?

答:根據(jù)vue-cli腳手架規(guī)范,一個js文件,一個CSS文件。

32.Vue里面router-link在電腦上有用,在安卓上沒反應怎么解決?

答:Vue路由在Android機上有問題,babel問題,安裝babel polypill插件解決。

33.Vue2中注冊在router-link上事件無效解決方法

答: 使用@click.native。原因:router-link會阻止click事件,.native指直接監(jiān)聽一個原生事件。

34.RouterLink在IE和Firefox中不起作用(路由不跳轉(zhuǎn))的問題

答: 方法一:只用a標簽,不適用button標簽;方法二:使用button標簽和Router.navigate方法

35.axios的特點有哪些

答:從瀏覽器中創(chuàng)建XMLHttpRequests;

node.js創(chuàng)建http請求;

支持Promise API;

攔截請求和響應;

轉(zhuǎn)換請求數(shù)據(jù)和響應數(shù)據(jù);

取消請求;

自動換成json。

axios中的發(fā)送字段的參數(shù)是data跟params兩個,兩者的區(qū)別在于params是跟請求地址一起發(fā)送的,data的作為一個請求體進行發(fā)送

params一般適用于get請求,data一般適用于post put 請求。

36.請說下封裝 vue 組件的過程?

答:1. 建立組件的模板,先把架子搭起來,寫寫樣式,考慮好組件的基本邏輯。(os:思考1小時,碼碼10分鐘,程序猿的準則。)

  2. 準備好組件的數(shù)據(jù)輸入。即分析好邏輯,定好 props 里面的數(shù)據(jù)、類型。

  3. 準備好組件的數(shù)據(jù)輸出。即根據(jù)組件邏輯,做好要暴露出來的方法。

  4. 封裝完畢了,直接調(diào)用即可

37.params和query的區(qū)別

答:用法:query要用path來引入,params要用name來引入,接收參數(shù)都是類似的,分別是this.$route.query.name和this.$route.params.name。

url地址顯示:query更加類似于我們ajax中g(shù)et傳參,params則類似于post,說的再簡單一點,前者在瀏覽器地址欄中顯示參數(shù),后者則不顯示

注意點:query刷新不會丟失query里面的數(shù)據(jù)

params刷新 會 丟失 params里面的數(shù)據(jù)。

38.vue初始化頁面閃動問題

答:使用vue開發(fā)時,在vue初始化之前,由于div是不歸vue管的,所以我們寫的代碼在還沒有解析的情況下會容易出現(xiàn)花屏現(xiàn)象,看到類似于{{message}}的字樣,雖然一般情況下這個時間很短暫,但是我們還是有必要讓解決這個問題的。

首先:在css里加上[v-cloak] {

display: none;

}。

如果沒有徹底解決問題,則在根元素加上style="display: none;" :style="{display: 'block'}"

39.vue更新數(shù)組時觸發(fā)視圖更新的方法

答:push();pop();shift();unshift();splice(); sort();reverse()

40.vue常用的UI組件庫

答:Mint UI,element,VUX

41.vue修改打包后靜態(tài)資源路徑的修改

答:cli2版本:將 config/index.js 里的 assetsPublicPath 的值改為 './' 。

build: {

...

assetsPublicPath: './',

...?

}

cli3版本:在根目錄下新建vue.config.js 文件,然后加上以下內(nèi)容:(如果已經(jīng)有此文件就直接修改)

module.exports = {

publicPath: '', // 相對于 HTML 頁面(目錄相同) }

生命周期函數(shù)面試題

1.什么是 vue 生命周期?有什么作用?

答:每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如,需要設置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做 生命周期鉤子 的函數(shù),這給了用戶在不同階段添加自己的代碼的機會。(ps:生命周期鉤子就是生命周期函數(shù))例如,如果要通過某些插件操作DOM節(jié)點,如想在頁面渲染完后彈出廣告窗, 那我們最早可在mounted 中進行。

2.第一次頁面加載會觸發(fā)哪幾個鉤子?

答:beforeCreate, created, beforeMount, mounted

3.簡述每個周期具體適合哪些場景

答:beforeCreate:在new一個vue實例后,只有一些默認的生命周期鉤子和默認事件,其他的東西都還沒創(chuàng)建。在beforeCreate生命周期執(zhí)行的時候,data和methods中的數(shù)據(jù)都還沒有初始化。不能在這個階段使用data中的數(shù)據(jù)和methods中的方法

create:data 和 methods都已經(jīng)被初始化好了,如果要調(diào)用 methods 中的方法,或者操作 data 中的數(shù)據(jù),最早可以在這個階段中操作

beforeMount:執(zhí)行到這個鉤子的時候,在內(nèi)存中已經(jīng)編譯好了模板了,但是還沒有掛載到頁面中,此時,頁面還是舊的

mounted:執(zhí)行到這個鉤子的時候,就表示Vue實例已經(jīng)初始化完成了。此時組件脫離了創(chuàng)建階段,進入到了運行階段。 如果我們想要通過插件操作頁面上的DOM節(jié)點,最早可以在和這個階段中進行

beforeUpdate: 當執(zhí)行這個鉤子時,頁面中的顯示的數(shù)據(jù)還是舊的,data中的數(shù)據(jù)是更新后的, 頁面還沒有和最新的數(shù)據(jù)保持同步

updated:頁面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了,都是最新的

beforeDestory:Vue實例從運行階段進入到了銷毀階段,這個時候上所有的 data 和 methods , 指令, 過濾器 ……都是處于可用狀態(tài)。還沒有真正被銷毀

destroyed: 這個時候上所有的 data 和 methods , 指令, 過濾器 ……都是處于不可用狀態(tài)。組件已經(jīng)被銷毀了。

4.created和mounted的區(qū)別

答:created:在模板渲染成html前調(diào)用,即通常初始化某些屬性值,然后再渲染成視圖。

mounted:在模板渲染成html后調(diào)用,通常是初始化頁面完成后,再對html的dom節(jié)點進行一些需要的操作。

5.vue獲取數(shù)據(jù)在哪個周期函數(shù)

答:一般 created/beforeMount/mounted 皆可.

比如如果你要操作 DOM , 那肯定 mounted 時候才能操作.

6.請詳細說下你對vue生命周期的理解?

答:總共分為8個階段創(chuàng)建前/后,載入前/后,更新前/后,銷毀前/后。

創(chuàng)建前/后: 在beforeCreated階段,vue實例的掛載元素$el和**數(shù)據(jù)對象**data都為undefined,還未初始化。在created階段,vue實例的數(shù)據(jù)對象data有了,$el還沒有。

載入前/后:在beforeMount階段,vue實例的$el和data都初始化了,但還是掛載之前為虛擬的dom節(jié)點,data.message還未替換。在mounted階段,vue實例掛載完成,data.message成功渲染。

更新前/后:當data變化時,會觸發(fā)beforeUpdate和updated方法。

銷毀前/后:在執(zhí)行destroy方法后,對data的改變不會再觸發(fā)周期函數(shù),說明此時vue實例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定,但是dom結(jié)構(gòu)依然存在。

vue路由面試題

1.mvvm 框架是什么?

答:vue是實現(xiàn)了雙向數(shù)據(jù)綁定的mvvm框架,當視圖改變更新模型層,當模型層改變更新視圖層。在vue中,使用了雙向綁定技術(shù),就是View的變化能實時讓Model發(fā)生變化,而Model的變化也能實時更新到View。

2.vue-router 是什么?它有哪些組件

答:vue用來寫路由一個插件。router-link、router-view

3.active-class 是哪個組件的屬性?

答:vue-router模塊的router-link組件。children數(shù)組來定義子路由

4.怎么定義 vue-router 的動態(tài)路由? 怎么獲取傳過來的值?

答:在router目錄下的index.js文件中,對path屬性加上/:id。 使用router對象的params.id。

5.vue-router 有哪幾種導航鉤子?

答:三種,

第一種:是全局導航鉤子:router.beforeEach(to,from,next),作用:跳轉(zhuǎn)前進行判斷攔截。

第二種:組件內(nèi)的鉤子

第三種:單獨路由獨享組件

6.$route 和 $router 的區(qū)別

答:$router是VueRouter的實例,在script標簽中想要導航到不同的URL,使用$router.push方法。返回上一個歷史history用$router.to(-1)

$route為當前router跳轉(zhuǎn)對象。里面可以獲取當前路由的name,path,query,parmas等。

7.vue-router的兩種模式

答:hash模式:即地址欄 URL 中的 # 符號;

history模式:window.history對象打印出來可以看到里邊提供的方法和記錄長度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定瀏覽器支持)。

8.vue-router實現(xiàn)路由懶加載( 動態(tài)加載路由 )

答:三種方式

第一種:vue異步組件技術(shù) ==== 異步加載,vue-router配置路由 , 使用vue的異步組件技術(shù) , 可以實現(xiàn)按需加載 .但是,這種情況下一個組件生成一個js文件。

第二種:路由懶加載(使用import)。

第三種:webpack提供的require.ensure(),vue-router配置路由,使用webpack的require.ensure技術(shù),也可以實現(xiàn)按需加載。這種情況下,多個路由指定相同的chunkName,會合并打包成一個js文件。

9.請詳細說下你對vue生命周期的理解?

總共分為8個階段創(chuàng)建前/后,載入前/后,更新前/后,銷毀前/后

創(chuàng)建前/后: 在beforeCreated階段,vue實例的掛載元素$el和數(shù)據(jù)對象data都為undefined,還未初始化。在created階段,vue實例的數(shù)據(jù)對象data有了,$el還沒有。載入前/后:在beforeMount階段,vue實例的$el和data都初始化了,但還是掛載之前為虛擬的dom節(jié)點,data.message還未替換。在mounted階段,vue實例掛載完成,data.message成功渲染。更新前/后:當data變化時,會觸發(fā)beforeUpdate和updated方法。銷毀前/后:在執(zhí)行destroy方法后,對data的改變不會再觸發(fā)周期函數(shù),說明此時vue實例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定。


10.請說下封裝 vue 組件的過程?

首先,組件可以提升整個項目的開發(fā)效率。能夠把頁面抽象成多個相對獨立的模塊,解決了我們傳統(tǒng)項目開發(fā):效率低、難維護、復用性等問題。

然后,使用Vue.extend方法創(chuàng)建一個組件,然后使用Vue.component方法注冊組件。子組件需要數(shù)據(jù),可以在props中接受定義。而子組件修改好數(shù)據(jù)后,想把數(shù)據(jù)傳遞給父組件??梢圆捎胑mit方法。


vuex常見面試題

你是怎么認識vuex的?

vuex可以理解為一種開發(fā)模式或框架。比如PHP有thinkphp,java有spring等。

通過狀態(tài)(數(shù)據(jù)源)集中管理驅(qū)動組件的變化(好比spring的IOC容器對bean進行集中管理)。

應用級的狀態(tài)集中放在store中; 改變狀態(tài)的方式是提交mutations,這是個同步的事物; 異步邏輯應該封裝在action中。

vue-loader是什么?使用它的用途有哪些?

解析.vue文件的一個加載器,跟template/js/style轉(zhuǎn)換成js模塊。

用途:js可以寫es6、style樣式可以scss或less、template可以加jade等

請說出vue.cli項目中src目錄每個文件夾和文件的用法?

assets文件夾是放靜態(tài)資源;components是放組件;router是定義路由相關(guān)的配置;view視圖;app.vue是一個應用主組件;main.js是入口文件

vue.cli中怎樣使用自定義的組件?有遇到過哪些問題嗎?

第一步:在components目錄新建你的組件文件(smithButton.vue),script一定要export default {

第二步:在需要用的頁面(組件)中導入:import smithButton from ‘../components/smithButton.vue’

第三步:注入到vue的子組件的components屬性上面,components:{smithButton}

第四步:在template視圖view中使用,<smith-button>? </smith-button>

問題有:smithButton命名,使用的時候則smith-button。

聊聊你對Vue.js的template編譯的理解?

簡而言之,就是先轉(zhuǎn)化成AST樹,再得到的render函數(shù)返回VNode(Vue的虛擬DOM節(jié)點)

詳情步驟:

首先,通過compile編譯器把template編譯成AST語法樹(abstract syntax tree 即 源代碼的抽象語法結(jié)構(gòu)的樹狀表現(xiàn)形式),compile是createCompiler的返回值,createCompiler是用以創(chuàng)建編譯器的。另外compile還負責合并option。

然后,AST會經(jīng)過generate(將AST語法樹轉(zhuǎn)化成render funtion字符串的過程)得到render函數(shù),render的返回值是VNode,VNode是Vue的虛擬DOM節(jié)點,里面有(標簽名、子節(jié)點、文本等等)

vue的歷史記錄

history 記錄中向前或者后退多少步

vuejs與angularjs以及react的區(qū)別?

1.與AngularJS的區(qū)別

相同點:

都支持指令:內(nèi)置指令和自定義指令。

都支持過濾器:內(nèi)置過濾器和自定義過濾器。

都支持雙向數(shù)據(jù)綁定。

都不支持低端瀏覽器。

不同點:

1.AngularJS的學習成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比較簡單、直觀。

2.在性能上,AngularJS依賴對數(shù)據(jù)做臟檢查,所以Watcher越多越慢。

Vue.js使用基于依賴追蹤的觀察并且使用異步隊列更新。所有的數(shù)據(jù)都是獨立觸發(fā)的。

對于龐大的應用來說,這個優(yōu)化差異還是比較明顯的。

2.與React的區(qū)別

相同點:

React采用特殊的JSX語法,Vue.js在組件開發(fā)中也推崇編寫.vue特殊文件格式,對文件內(nèi)容都有一些約定,兩者都需要編譯后使用。

中心思想相同:一切都是組件,組件實例之間可以嵌套。

都提供合理的鉤子函數(shù),可以讓開發(fā)者定制化地去處理需求。

都不內(nèi)置列數(shù)AJAX,Route等功能到核心包,而是以插件的方式加載。

在組件開發(fā)中都支持mixins的特性。

不同點:

React依賴Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM會對渲染出來的結(jié)果做臟檢查。

Vue.js在模板中提供了指令,過濾器等,可以非常方便,快捷地操作DOM。


1.vuex是什么?怎么使用?哪種功能場景使用它?

答:vue框架中狀態(tài)管理。在main.js引入store,注入。

新建了一個目錄store.js,….. export 。

場景有:單頁應用中,組件之間的狀態(tài)。音樂播放、登錄狀態(tài)、加入購物車

2.vuex有哪幾種屬性?

答:有五種,分別是 State、 Getter、Mutation 、Action、 Module

state => 基本數(shù)據(jù)(數(shù)據(jù)源存放地)

getters => 從基本數(shù)據(jù)派生出來的數(shù)據(jù)

mutations => 提交更改數(shù)據(jù)的方法,同步!

actions => 像一個裝飾器,包裹mutations,使之可以異步。

modules => 模塊化Vuex

3.Vue.js中ajax請求代碼應該寫在組件的methods中還是vuex的actions中?

答:如果請求來的數(shù)據(jù)是不是要被其他組件公用,僅僅在請求的組件內(nèi)使用,就不需要放入vuex 的state里。

如果被其他地方復用,這個很大幾率上是需要的,如果需要,請將請求放入action里,方便復用。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. 說一下 Vue 的雙向綁定數(shù)據(jù)的原理 vue 實現(xiàn)數(shù)據(jù)雙向綁定主要是:采用數(shù)據(jù)劫持結(jié)合“發(fā)布者 - 訂閱者”...
    莫小貝愛自由閱讀 332評論 0 0
  • 新建完項目,先做好準備工作 1 定義全局路由 1.1路由懶加載,當組件太多的時候,vue這種單頁面應用,如果沒有應...
    9fff47b4e20c閱讀 1,967評論 0 2
  • 1. el:"選擇器",如果頁面中多個選擇器需要監(jiān)控,那么new Vue()如何找到不同選擇器下的元素進行更新? ...
    c94c091dbbf4閱讀 654評論 0 0
  • 基于Vue的一些資料 內(nèi)容 UI組件 開發(fā)框架 實用庫 服務端 輔助工具 應用實例 Demo示例 element★...
    嘗了又嘗閱讀 1,276評論 0 1
  • 有時候什么都不想做,就惘然地坐著…… 忽地感覺跳出了這個世界,如一個天外來客木然的看著這世界充斥著...
    最愛那雨聲閱讀 632評論 0 1

友情鏈接更多精彩內(nèi)容