46個vue源碼解析

Ⅰ vue-lazyload 源碼解析

/src/lazy.js

定義變數接收實例化參數。

lazy.js 默認導出一個函數，該函數返回一個 Lazy 類，形成閉包，保持對 Vue 的引用。

判斷是否支持Webp圖片

/src/listener.js

定義變數接收實例化參數。

filter 方法將配置的 filter 對象中的方法執行，接收兩個參數，一個為 ReactiveListener 實例，一個為 options 參數對象。

initState 方法給元素添加 data-set 屬性，值為圖片地址 src，並且定義了圖片狀態對象 state 。在 Lazy 中已經根據像素比選擇了最適配屏幕的圖片，顧這里不需要考慮 srcset 屬性。另外，我們自定義指令是 v-lazy，到目前為止，還沒有給圖片的 src 屬性賦值。

render 方法，是在 Lazy 中實例化 ReactiveListener 時傳遞過來的參數。

回過頭再來結合 lazy.js 中的 lazyLoadHandler 方法與 ReactiveListener 暴露的方法來看。

/src/lazy-container.js

LazyContainer 的核心是 container 下的選擇器selector(默認 img 標簽)遍歷後調用 lazy 的 add 方法進行綁定，自定義指令 v-lazyload-container。

/src/lazy-component.js

上述實現元素綁定主要是通過自定義指令 v-lazy ， v-lazy-container 。那麼 LazyComponent 則是通過注冊的 lazy-component 組件，完成綁定，默認渲染成為 div 標簽，作為 img 的容器。

/src/lazy-image.js

通 LazyComponent 組件，只不過 LazyImage 注冊的 lazy-image 組件，渲染成的是 img 標簽，多了 src 屬性。

通過自定義指令 v-lazy 將設置背景圖的元素或者 img元素，通過 _addListenerTarget 方法收集與數組 TargetQueue 中，並遍歷觸發懶載入的方法， addEventListener 綁定在該元素上，觸發的事件為 lazyLoadHandler ；

在需要懶載入的元素上設置屬性 data-src ，這是期望的圖片地址(filter 配置項可以預先過濾賦值)，元素上自定義 lazyLoad 表示圖片狀態(狀態變更後，adapter 中觸發回調)；

ListenerQueue 數組中收集的是 ReactiveListener 類的實例，主要是用於懶載入不同狀態下的圖片載入，loading - loaded - error；

當觸發 EventListener 了，執行 lazyLoadHandler 方法，根據演算法，進入 viewport 後， ReactiveListener 元素如果與觸發元素匹配，則進行圖片的載入及渲染。

Ⅱ 【面試題解析】從 Vue 源碼分析 key 的作用

最近看了面試題中有一個這樣的題， v-for 為什麼要綁定 key？

Vue 中 key 很多人都弄不清楚有什麼作用，甚至還有些人認為不綁定 key 就會報錯。

其實沒綁定 key 的話，Vue 還是可以正常運行的，報警告是因為沒通過 Eslint 的檢查。

接下來將通過源碼一步步分析這個 key 的作用。

Virtual DOM 最主要保留了 DOM 元素的層級關系和一些基本屬性，本質上就是一個 JS 對象。相對於真實的 DOM，Virtual DOM 更簡單，操作起來速度更快。

如果需要改變 DOM，則會通過新舊 Virtual DOM 對比，找出需要修改的節點進行真實的 DOM 操作，從而減小性能消耗。

傳統的 Diff 演算法需要遍歷一個樹的每個節點，與另一棵樹的每個節點對比，時間復雜度為 O(n²)。

Vue 採用的 Diff 演算法則通過逐級對比，大大降低了復雜性，時間復雜度為 O(n)。

VNode 更新首先會經過 patch 函數， patch 函數源碼如下：

vnode 表示更新後的節點，oldVnode 表示更新前的節點，通過對比新舊節點進行操作。

1、vnode 未定義，oldVnode 存在則觸發 destroy 的鉤子函數

2、oldVnode 未定義，則根據 vnode 創建新的元素

3、oldVnode 不為真實元素並且 oldVnode 與 vnode 為同一節點，則會調用 patchVnode 觸發更新

4、oldVnode 為真實元素或者 oldVnode 與 vnode 不是同一節點，另做處理

接下來會進入 patchVnode 函數，源碼如下：

1、vnode 的 text 不存在，則會比對 oldVnode 與 vnode 的 children 節點進行更新操作

2、vnode 的 text 存在，則會修改 DOM 節點的 text

接下來在 updateChildren 函數內就可以看到 key 的用處。

key 的作用主要是給 VNode 添加唯一標識，通過這個 key，可以更快找到新舊 VNode 的變化，從而進一步操作。

key 的作用主要表現在以下這段源碼中。

updateChildren 過程為：

1、分別用兩個指針（startIndex, endIndex）表示 oldCh 和 newCh 的頭尾節點

2、對指針所對應的節點做一個兩兩比較，判斷是否屬於同一節點

3、如果4種比較都沒有匹配，那麼判斷是否有 key，有 key 就會用 key 去做一個比較；無 key 則會通過遍歷的形式進行比較

4、比較的過程中，指針往中間靠，當有一個 startIndex > endIndex，則表示有一個已經遍歷完了，比較結束

從 VNode 的渲染過程可以得知，Vue 的 Diff 演算法先進行的是同級比較，然後再比較子節點。

子節點比較會通過 startIndex、endIndex 兩個指針進行兩兩比較，再通過 key 比對子節點。如果沒設置 key，則會通過遍歷的方式匹配節點，增加性能消耗。

所以不綁定 key 並不會有問題，綁定 key 之後在性能上有一定的提升。

綜上，key 主要是應用在 Diff 演算法中，作用是為了更快速定位出相同的新舊節點，盡量減少 DOM 的創建和銷毀的操作。

希望以上內容能夠對各位小夥伴有所幫助，祝大家面試順利。

Vue 的文檔中對 key 的說明如下：

關於就地修改，關鍵在於 sameVnode 的實現，源碼如下：

可以看出，當 key 未綁定時，主要通過元素的標簽等進行判斷，在 updateChildren 內會將 oldStartVnode 與 newStartVnode 判斷為同一節點。

如果 VNode 中只包含了文本節點，在 patchVnode 中可以直接替換文本節點，而不需要移動節點的位置，確實在不綁定 key 的情況下效率要高一丟丟。

某些情況下不綁定 key 的效率更高，那為什麼大部分Eslint的規則還是要求綁定 key 呢？

因為在實際項目中，大多數情況下 v-for 的節點內並不只有文本節點，那麼 VNode 的位元組點就要進行銷毀和創建的操作。

相比替換文本帶來的一丟丟提升，這部分會消耗更多的性能，得不償失。

了解了就地修改，那麼我們在一些簡單節點上可以選擇不綁定 key，從而提高性能。

如果你喜歡我的文章，希望可以關注一下我的公眾號【前端develop】

Ⅲ 慕課網上沒搜到vue源碼，有沒有課程透徹分析Vue 源碼的

有，你在實戰里找是huangyi講的，印象中是從 Vue 的跨平台編譯入手，從 Vue 的幾個核心能力開始分析Vue 源碼。 Vue 的靜態全局 API 與屬性， Vue 的響應式原理，非同步組件、組件化、diff 演算法等等方面，都是進行了詳細的分析，最後還附帶了vuex和vuerouter。

Ⅳ vuejs源碼用了什麼設計模式，具體點的

最簡單的訂閱者模式

// Observer
class Observer {
constructor (data) {
this.walk(data)
}
walk (data) {
// 遍歷
let keys = Object.keys(data)
for(let i = 0; i < keys.length; i++){
defineReactive(data, keys[i], data[keys[i]])
}
}
}

function defineReactive (data, key, val) {
observer(val)

// dep 為什麼要在這里實例化, 就是為了實現, 對象每一層的 每一個key都有自己的一個訂閱實例, 比如 a.b 對應 dep1, a.c 對應dep2, 這里雖然都是let dep = new Dep()
// 但每次來到這個方法, dep都是獨立的, 會一直保留在內存. 這樣在每次調用set方法都能找到這個a.b對應的dep
// dep 這里會一直保存, 是因為閉包的關系, Object這個全局的函數, 引用了上層的作用域, 這個作用域包含了 dep, 除非Object = null, 或者退出瀏覽器, dep才會消失

//實例化之後, dep就有了被訂閱, 和發布消息的功能, dep不寫在這里也是可以的, 多定義一個全局函數, 每次obser的時候增加一個dep
let dep = new Dep()
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function () {
//每次new Watch('a.b'), 都會先執行get方法, 進而來到這里, 觸發 dep.depend(), 這個dep就是 a.b 對應的 訂閱,
dep.depend()
return val
},
set: function (newVal) {
if(val === newVal){
return

Ⅳ vue項目實現動態路由和動態菜單搭建插件式開發框架免費源碼

以往我們在開發vue項目的時候，總是通過將路徑和路由寫在route/index.js文件中，然後直接進行訪問即可，一般實現許可權匹配都是通過菜單下面的許可權參數和路由守衛進行一個驗證攔截和許可權匹配，然而這樣安全性仍然不足。因為我們在route/index.js中已經寫滿了所有的路由，這樣子不僅造成靜態路由內容過多、修改困難，同時當靜態路由內容過多的時候，我們在路由中的內容就顯得極其復雜。

而後端對前端的控制也顯得較為無力，無法實現嚴格性的控制。

由此我們發現通過動態路由控制是必然的，此時我們只需要通過後端獲取數據菜單和路由信息json，然後動態添加路由並生成菜單，使菜單與動態路由內容進行一個匹配，這樣子我們可以實現由後端控制前端的菜單和路由，我們的項目往往只需要內置幾個組件無需許可權的公共頁面如登陸、注冊、忘記密碼和404錯誤這幾個常用頁面組件。

我們只需要將寫好的組件放置到我們的view視圖下，然後我們通過動態的路由和菜單實現路由添加和菜單進行匹配，我們便可實現對插件進行訪問，我們減少了對route/index.js內容寫入，同時也有利於減少內存的佔用。

我們通過動態路由的形式，我們生成的菜單許可權更加的完善，不僅實現依靠菜單與路由守衛攔截實現鑒權，也可以通過動態路由實現動態載入vue文件，控制更加深度

我們通過動態路由的形式，我們可以將項目分給不同的人進行完成，便於組建一個開發團隊，因為他們所開發的組件，我們只需要在具備基本的javascript庫的情況下。我們直接進行動態路由的一個掛載和菜單生成便可完成項目合作，減少了對route/index.js文件的操作，保證項目的完整性。

最後我發現在非node環境的開發條件下，我們可以實現遠程的vue文件載入，這不僅為我們開發提供了便利，同時也有利於我們及時修改文件，以達到項目的需求，更有利於保障安全，實現伺服器vue文件載入。

Vue：2.6.11。

Vue-route：3.2.0。

主頁

聊天

第一通過後端返回的一個路由json數據，我們通過前端生成符合路由路由靜態內容數組的一個數組，然後再通過addRoute進行一個循環添加，我們以此生成動態路由。在登陸時獲取後端返回的菜單信息，我們進行菜單的一個循環生成，由此我們的一個動態項目就已經完成。

第二怎樣對動態路由和菜單項目進行一個管理。

我們首先可以通過搭建一個組件通過添加路由信息和管理菜單實現二者的動態匹配。我們只需要對路由信息進行一個添加和修改，並和菜單相互間進行匹配，我們便可實現簡單的路由掛載。

組件管理

菜單管理

此時將數據提交的後端由後端進行數據保存，我們此時的組件只需要放在views文件夾下，添加路由進行文件載入，我們便可實現路由管理。

第一登陸頁面配置。

我們需要在靜態文件夾下創建一個menu.json和route.json。兩個json文件模擬伺服器登錄時返回的數據。

我們在登錄頁面模擬獲取數據之後，我們通過菜單的一個方法進行生成菜單，通過路由的方法生成路由數組並進行循環添加，然後執行路由跳轉。

第二配置路由初始化內容。我們將route/index.js的路由信息填為空是非常不理智的，而且會報錯，因為路由初始化在載入前已經完成。有些頁面完全不需要許可權便可訪問，比如登錄、注冊、找回密碼和404錯誤，這種不需要許可權的頁面，我們還是需要將其直接以靜態的形式寫在route/index.js文件中。

Index初始數據

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue . use ( VueRouter )

const routes = [{

path: '/' , //訪問url

name: 'login' , //路由名稱

component : () => import ( '@/unitui/pages/Login.vue' ), //載入模板文件

meta: {

show_site: 0 , //是否全屏顯示

web_title: "登錄" //網站標題

}

},

{

path: '/register' , //訪問url

name: 'register' , //路由名稱

component : () => import ( '@/unitui/pages/Register.vue' ), //載入模板文件

meta: {

show_site: 0 , //是否全屏顯示

web_title: "注冊" //網站標題

}

},

{

path: '/forget' , //訪問url

name: 'forget' , //路由名稱

component : () => import ( '@/unitui/pages/Forget.vue' ), //載入模板文件

meta: {

show_site: 0 , //是否全屏顯示

web_title: "找回密碼" //網站標題

}

},

{

path: '/404' , //訪問url

name: '404' , //路由名稱

component : () => import ( '@/unitui/pages/404.vue' ), //載入模板文件

meta: {

show_site: 0 , //是否全屏顯示

web_title: "404錯誤" //網站標題

}

},

]

const router = new VueRouter ({

routes

})

router . beforeEach (( to , from , next ) => {

document . title = to . meta . web_title

console . log ( to );

next ()

})

export default router

第三，關於防止刷新後丟失的問題。我們需要在app.vue文件中的methods方法中定義一個路由生成方法。

示例：

init_route () { //初始化路由，防止刷新丟失

if ( sessionStorage . getItem ( "route_data" ) != null ) { //只有後端已經返回數據的情況下才允許生成

const route_data = JSON . parse ( sessionStorage . getItem ( "route_data" )); //獲取路由信息

const data = []; //默認路由數組

for ( let index = 0 ; index < route_data . length ; index ++) { //生成路由信息

data [ index ] = {

path: route_data [ index ]. path , //訪問url

name: route_data [ index ]. name , //路由名稱

component : resolve =>

require ([ `@/views/ ${ route_data [ index ]. component } ` ], resolve ), //載入模板文件

meta: {

show_site: route_data [ index ]. meta . show_site , //是否全屏顯示

web_title: route_data [ index ]. meta . web_title //網站標題

}

};

}

for ( let index = 0 ; index < data . length ; index ++) { //循環添加路由

this . $router . addRoute ( data [ index ]);

}

}

}

在mounted中進行方法調用，防止刷新的時路由丟失，導致發生錯誤。該方法內容基本和登陸頁面的菜單出路由初始內容基本相同，但我們唯一差別的是，我們需要判斷登陸所獲取的路由信息是否存在，只有在存在的時候及後端已經返回了路由信息，即證明登錄成功的時候，我們才會動態添加路由。

第一在刷新之後，默認跳轉到path:』*』的一個路由界面中去，此時我們解決方法只需要將path:』*』路由進行一個刪除,將其刪除就變可正常訪問。

第二動態路由跳轉時發生Cannot find mole xxx錯誤。

意思是無法載入我們指定的一個vue文件，這是由於route3.0版本後import方式不支持傳入變數，此時我們只需要將其改為require方式便可。

我們此次動態vue項目開發已經基本完成，我的開發的項目是基於element-ui進行，那麼如果你需要源碼參考。可以私信回復unit便可獲取。

Ⅵ 什麼是vue框架

什麼是vue

是一套構建用戶界面的漸進式（用到哪一塊就用哪一塊，不需要全部用上）前端框架，Vue 的核心庫只關注視圖層

vue的兼容性

Vue.js 不支持 IE8 及其以下版本，因為 Vue.js 使用了 IE8 不能模擬的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的瀏覽器。

vue學習資源

vue.js中文官網：http://cn.vuejs.org/

vue.js源碼：https://github.com/vuejs/vue

vue.js官方工具：https://github.com/vuejs

vue.js官方論壇：forum.vuejs.org

對比其他框架-React

React 和 Vue 有許多相似之處，它們都有使用 Virtual DOM；提供了響應式（Reactive）和組件化（Composable）的視圖組件。將注意力集中保持在核心庫，而將其他功能如路由和全局狀態管理交給相關的庫。React 比 Vue 有更豐富的生態系統

都有支持native的方案，React的RN，vue的Wee下

都支持SSR服務端渲染

都支持props進行父子組件間的通信

性能方面：React 和 Vue 在大部分常見場景下都能提供近似的性能。通常 Vue 會有少量優勢，因為 Vue 的 Virtual DOM 實現相對更為輕量一些。

不同之處就是：

數據綁定方面，vue實現了數據的雙向數據綁定，react數據流動是單向的
virtual DOM不一樣,vue會跟蹤每一個組件的依賴關系,不需要重新渲染整個組件樹.而對於React而言,每當應用的狀態被改變時,全部組件都會重新渲染,所以react中會需要shouldComponentUpdate這個生命周期函數方法來進行控制
state對象在react應用中不可變的,需要使用setState方法更新狀態;在vue中,state對象不是必須的,數據由data屬性在vue對象中管理（如果要操作直接this.xxx）
組件寫法不一樣, React推薦的做法是 JSX , 也就是把HTML和CSS全都寫進JavaScript了,即'all in js'; Vue推薦的做法是webpack+vue-loader的單文件組件格式,即html,css,js寫在同一個文件

對比其他框架-angular

在性能方面，這兩個框架都非常的快，我們也沒有足夠的實際應用數據來下一個結論。如果你一定想看些數據的話，你可以參考這個第三方跑分。單就這個跑分來看，Vue 似乎比 Angular 要更快一些。

在大小方面，最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技術後使得最終的代碼體積減小了許多。但即使如此，一個包含了 vuex + vue-router 的 Vue 項目 (30kb gzipped) 相比使用了這些優化的 Angular CLI 生成的默認項目尺寸 (~130kb) 還是要小的多。

靈活性：Vue 相比於 Angular 更加靈活，Vue 官方提供了構建工具來協助你構建項目，但它並不限制你去如何組織你的應用代碼。有人可能喜歡有嚴格的代碼組織規范，但也有開發者喜歡更靈活自由的方式。

vue.js的核心特點—響應的數據綁定

傳統的js操作頁面：在以前使用js操作頁面的時候是這樣的，需要操作某個html元素的數據，就的使用js代碼獲取元素然後在處理業務邏輯

響應式數據綁定的方式操作頁面，可以直接使用像下面代碼那樣的寫法就可以將數據填充到頁面中

<template>
<div id="app">
{{ message }}
</div>
</template>

<script>
export default {
name: 'app',
data () {
return {
message: 'Welcome to Your Vue.js App'
}
}
}
</script>

<style>
</style>

vue.js的核心特點—可組合的視圖組件

一個頁面映射為組件樹。劃分組件可維護、可重用、可測試，也就是一個頁面由多個組件組合而成

vue中實現組件引入示例

第一步：import導入需要引入的組件文件；

第二步：注冊組件；

第三步：在需要引入組件的文件中加上組件標簽（這個標簽的標簽名就是注冊的組件名字，多個單詞的和這里有xx-xx的形式）

需要注意的是：組件可以嵌套引入，也就是說組件可以引入其他組件

首先創建一個組件，用於被引入的組件，組件名字叫Hello.vue
————————————————
版權聲明：本文為CSDN博主「胡椒粉0121」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。

Ⅶ 如何閱讀Vuejs源碼，學習筆記

1. # 下載最新的vue$ npm install vue

2. js 引用 vue.js

3. 開始代碼，感受vue強大的雙向數據綁定

實戰代碼：

Vue整個生命周期示意圖：

Ⅷ 47道基礎的VueJS面試題(附答案)

1、什麼是MVVM框架？它適用於哪些場景？

MVVM框架是一個 Model-View-View Model框架，其中 ViewModel連接模型Model）和視圖（View）。

在數據操作比較多的場景中，MVVM框架更合適，有助於通過操作數據渲染頁面。

2、active- class是哪個組件的屬性？

它是 vue-router模塊的 router-link組件的屬性。

3、如何定義Vue- router的動態路由？

在靜態路由名稱前面添加冒號，例如，設置id動態路由參數，為路由對象的path屬性設置/:id。

4、如何獲取傳過來的動態參數？

在組件中，使用$router對象的 params.id，即 $route.params.id 。

5、vue- router有哪幾種導航鉤子？

有3種。

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

第二種是組件內的鉤子。

第三種是單獨路由獨享組件。

6、mint-ui是什麼？如何使用？

它是基於 Vue.js的前端組件庫。用npm安裝，然後通過 import導入樣式和JavaScript代碼。vue.use(mintUi)用於實現全局引入， import {Toast} from ' mint-ui'用於在單個組件局部引入。

7、V-model是什麼？有什麼作用？

v- model是 Vue. js中的一條指令，可以實現數據的雙向綁定。

8、Vue.js中標簽如何綁定事件？

綁定事件有兩種方式。

第一種，通過v-on指令， 。

第二種，通過@語法糖， input@ click= doLog()/>。

9、vuex是什麼？如何使用？在哪種功能場景中使用它？

vuex是針對 Vue. js框架實現的狀態管理系統。

為了使用vuex，要引入 store，並注入Vue.js組件中，在組件內部即可通過$ ostore訪問 store對象。

使用場景包括：在單頁應用中，用於組件之間的通信，例如音樂播放、登錄狀態管理、加入購物車等。

10、如何實現自定義指令？它有哪些鉤子函數？還有哪些鉤子函數參數？

自定義指令包括以下兩種。

它有如下鉤子函數。

鉤子函數的參數如下。

11、至少說出vue.js中的4種指令和它們的用法。

相關指令及其用法如下。

12、Vue-router是什麼？它有哪些組件？

它是 Vue. js的路由插件。組件包括 router-link和 router-vIew。

13、導航鉤子有哪些？它們有哪些參數？

導航鉤子又稱導航守衛，又分為全局鉤子、單個路由獨享鈞子和組件級鈞子。

全局鉤子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。

單個路由獨享鉤子有 beforeEnter。

組件級鉤子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。

它們有以下參數。

14、Vue.js的雙向數據綁定原理是什麼？

具體步驟如下。

（1）對需要觀察的數據對象進行遞歸遍歷，包括子屬性對象的屬性，設置set和get特性方法。當給這個對象的某個值賦值時，會觸發綁定的set特性方法，於是就能監聽到數據變化。

（4）MVVM是數據綁定的入口，整合了 Observer、 Compile和 Watcher三者，通過Observer來監聽自己的 model數據變化，通過 Compile來解析編譯模板指令，最終利用Watcher搭起 Observer和 Compile之間的通信橋梁，達到數據變化通知視圖更新的效果。利用視圖交互，變化更新數據 model變更的雙向綁定效果。

15、請詳細說明你對Vue.js生命周期的理解。

總共分為8個階段，分別為 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。

當使用組件的kep- alive功能時，增加以下兩個周期。

Vue2.5.0版本新增了一個周期鉤子：ErrorCaptured，當捕獲一個來自子孫組件的錯誤時調用。

16、請描述封裝Vue組件的作用過程。

組件可以提升整個項目的開發效率，能夠把頁面抽象成多個相對獨立的模塊，解決了傳統項目開發中效率低、難維護、復用性等問題。

使用Vue.extend方法創建一個組件，使用Vue.component方法注冊組件。子組件需要數據，可以在 props中接收數據。而子組件修改妤數據後，若想把數據傳遞給父組件，可以採用emit方法。

17、你是怎樣認識vuex的？

vuex可以理解為一種開發模式或框架。它是對 Vue. js框架數據層面的擴展。通過狀態（數據源）集中管理驅動組件的變化。應用的狀態集中放在 store中。改變狀態的方式是提交 mutations，這是個同步的事務。非同步邏輯應該封裝在 action中。

18、Vue- loader是什麼？它的用途有哪些？

它是解析.vue文件的一個載入器，可以將 template/js/style轉換成 JavaScript模塊。

用途是通過 vue-loader, JavaScript可以寫 EMAScript 6語法， style樣式可以應用scss或less, template可以添加jade語法等。

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

assets文件夾存放靜態資源；components存放組件；router定義路由相關的配置；view是視圖；app. vue是一個應用主組件；main.js是入口文件。

20、在Vue.cli中怎樣使用自定義組件？在使用過程中你遇到過哪些問題？

具體步驟如下。

（1）在 components目錄中新建組件文件，腳本一定要導出暴露的介面。

（2）導入需要用到的頁面（組件）。

（3）將導入的組件注入uejs的子組件的 components屬性中。

（4）在 template的視圖中使用自定義組件。

21、談談你對vue.js的 template編譯的理解。

簡而言之，就是首先轉化成AST（ Abstract Syntax Tree，抽象語法樹），即將源代碼語法結構抽象成樹狀表現形式，然後通過 render函數進行渲染，並返回VNode（ Vue. js的虛擬DOM節點）。

詳細步驟如下。

（1）通過 compile編譯器把 template編譯成AST, compile是 create Compiler的返回值， createCompiler用來創建編譯器。另外， compile還負責合並 option。

（2）AST會經過 generate（將AST轉化成 render funtion字元串的過程）得到 render函數， render的返回值是 VNode, VNode是 Vue.Js的虛擬DOM節點，裡面有標簽名子節點、文本等。

22、說一下Vue.js中的MVVM模式。

MVVM模式即 Model- View- ViewModel模式。

Vue.js是通過數據驅動的， Vue. js實例化對象將DOM和數據進行綁定，一旦綁定，和數據將保持同步，每當數據發生變化，DOM也會隨著變化。

ViewModel是Vue.js的核心，它是 Vue.js的一個實例。Vue.js會針對某個HTML元素進行實例化，這個HTML元素可以是body，也可以是某個CSS選擇器所指代的元素。

DOM Listeners和 Data Bindings是實現雙向綁定的關鍵。DOM Listeners監聽頁面所有View層中的DOM元素，當發生變化時，Model層的數據隨之變化。Data Bindings會監聽 Model層的數據，當數據發生變化時，View層的DOM元素也隨之變化。

23、v-show指令和v-if指令的區別是什麼？

v-show與v-if都是條件渲染指令。不同的是，無論v-show的值為true或 false，元素都會存在於HTML頁面中；而只有當v-if的值為true時，元素才會存在於HTML頁面中。v-show指令是通過修改元素的 style屬性值實現的。

24、如何讓CSS只在當前組件中起作用？

在每一個Vue.js組件中都可以定義各自的CSS、 JavaScript代碼。如果希望組件內寫的CSS只對當前組件起作用，只需要在Style標簽添加Scoped屬性，即 。

25、如何創建vue.js組件？

在vue.js中，組件要先注冊，然後才能使用。具體代碼如下

26、如何實現路由嵌套？如何進行頁面跳轉？

路由嵌套會將其他組件渲染到該組件內，而不是使整個頁面跳轉到 router-view定義組件渲染的位置。要進行頁面跳轉，就要將頁面渲染到根組件內，可做如下配置。

首先，實例化根組件，在根組件中定義組件渲染容器。然後，掛載路由，當切換路由時，將會切換整個頁面。

27、ref屬性有什麼作用？

有時候，為了在組件內部可以直接訪問組件內部的一些元素，可以定義該屬性此時可以在組件內部通過this. $refs屬性，更快捷地訪問設置ref屬性的元素。這是一個原生的DOM元素，要使用原生 DOM API操作它們，例如以下代碼。

注意：在Ve2.0中，ref屬性替代了1.0版本中v-el指令的功能。

28、Vue. js是什麼？

Vue. js的目標是通過盡可能簡單的API實現響應式的數據綁定的組件開發。

29、描述vue.js的一些特性。

Vue.js有以下持性。

（1）MVVM模式。

數據模型（ Model）發生改變，視圖（View）監聽到變化，也同步改變；視圖（View）發生改變，數據模型（ Model）監聽到改變，也同步改變。

使用MVVM模式有幾大好處。

（2）組件化開發

（3）指令系統

（4）Vue2.0開始支持虛擬DOM。

但在Vue1.0中，操作的是真實DOM元素而不是虛擬DOM，虛擬DOM可以提升頁面的渲染性能。

30、描述vue.js的特點。

Vue. js有以下特點。

31、在vue.js中如何綁定事件？

通過在v-on後跟事件名稱=「事件回調函數( )」的語法綁定事件。事件回調函數的參數集合( )可有可無。如果存在參數集合( )，事件回調函數的參數需要主動傳遞，使用事件對象要傳遞 $event。當然，此時也可以傳遞一些其他自定義數據。如果沒有參數集合，此時事件回調函數有一個默認參數，就是事件對象。事件回調函數要定義在組件的 methods屬性中，作用域是 Vue. js實例化對象，因此在方法中，可以通過this使用 Vue. js中的數據以及方法，也可以通過@語法糖快速綁定事件，如@事件名稱=「事件回調函數( )」。

32、請說明 組件的作用。

當 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。

keep-alive>是一個抽象組件，它自身不會渲染一個DOM元素，也不會出現在父組件鏈中。

當在 內切換組件時，它的 activated和 deactivated這兩個生命周期鈞子函數將會執行。

33、axios是什麼？如何使用它？

axios是在vue2.0中用來替換 vue-resource.js插件的一個模塊，是一個請求後台的模。

用 npm install axios安裝 axios。基於 EMAScript 6 的 EMAScript Mole規范，通過 import關鍵字將 axios導入，並添加到 Vue. js類的原型中。這樣每個組件（包括vue.js實例化對象）都將繼承該方法對象。它定義了get、post等方法，可以發送get或者post請求。在then方法中注冊成功後的回調函數，通過箭頭函數的作用域特徵，可以直接訪問組件實例化對象，存儲返回的數據。

34、在 axios中，當調用 axios.post('api/user'）時進行的是什麼操作？

當調用post方法表示在發送post非同步請求。

35、sass是什麼？如何在ue中安裝和使用？

sass是一種CSS預編譯語言安裝和使用步驟如下。

（1）用npm安裝載入程序（ sass-loader、 css-loader等載入程序)。

（2）在 webpack. config. js中配置sass載入程序。

（3）在組件的 style標簽中加上lang屬性，例如lang="scss"。

36、如何在 Vue. js中循環插入圖片？

對「src」屬性插值將導致404請求錯誤。應使用 v-bind:src格式代替。

代碼如下：

Ⅸ vue生命周期詳解

vue源碼中最終執行生命周期函數都是調用 callHook 方法， callHook 函數的邏輯很簡單，根據傳入的生命周期類型 hook ，去拿到 vm.$options[hook] 對應的回調函數數組，然後遍歷執行，執行的時候把 vm 作為函數執行的上下文。

1. new Vue(options) ：創建一個vm實例；

2. mergeOptions(resolveConstructorOptions(vm.constructor), options, vm) ：合並Vue構造函數里options和傳入的options或合並父子的options。比如：在mergeOptions函數中會調用mergeHook方法合並生命周期的鉤子函數，mergeHook方法原理是只有父時返回父，只有子時返回數組類型的子。父、子都存在時，將子添加在父的後面返回組合而成的數組。這也是父子均有鉤子函數的時候，先執行父的後執行子的的原因；

3. initLifecycle(vm)、initEvents(vm)、initRender(vm) ：在創建的vm實例上初始化生命周期、事件、渲染相關的屬性；

4. callHook(vm, 'beforeCreate') ：調用beforeCreate生命周期鉤子函數；

5. initInjections(vm)、initState(vm)、initProvide(vm) ：初始化數據：inject、state、provide。initState 的作用是初始化 props、data、methods、watch、computed 等屬性；

6. callHook(vm, 'created') ：調用created生命周期鉤子函數；

7. vm.$mount(vm.$options.el) ： $mount 方法在多個文件中都有定義，如"src/platform/web/entry-runtime-with-compiler.js"、"src/platform/web/runtime/index.js"、"src/platform/weex/runtime/index.js"。因為 $mount 方法的實現是和平台、構建方式相關的。以"entry-runtime-with-compiler.js"為例，關鍵步驟是查看 vm.$options 中是否有render方法，如果沒有則會根據el和template屬性確定最終的template字元串，再調用 compileToFunctions 方法將template字元串轉為render方法，最後，調用原先原型上的$mount方法，即開始執行"lifecycle.js"中 mountComponent 方法；

8. callHook(vm, 'beforeMount') ：調用beforeMount生命周期鉤子函數；

9. vm._render() => vm._update() => vm.__patch__() ：先執行vm._render方法，即調用createElement生成虛擬DOM，即VNode ，每個VNode有children ，children 每個元素也是⼀個 VNode，這樣就形成了⼀個 VNode Tree；再調用vm._update方法進行首次渲染，vm._update方法核心是調用vm. patch 方法，這個方法跟vm.$mount一樣跟平台相關；vm. patch 方法則是根據生成的VNode Tree遞歸createElm方法創建真實Dom Tree掛載到Dom上；

10. callHook(vm, 'mount') ：調用mount生命周期鉤子函數：VNode patch 到 Dom 之後會執行 'invokeInsertHook'函數，把 insertedVnodeQueue 中保存的mount鉤子函數執行一遍，insertedVnodeQueue隊列中的鉤子函數是在根據VNode Tree遞歸createElm方法創建真實Dom Tree過程生成的鉤子函數順序隊列，因此mounted鉤子函數的執行順序是先子後父；

11. data changes ：數據更新，nextTick中執行 flushSchelerQueue 方法，該方法會執行watcher隊列中的watcher；

12. callHook(vm, 'beforeUpdate') ：執行watcher時會執行watcher的before方法，即調用beforeUpdate生命周期鉤子函數；

13. Virtual DOM re-render and patch ：重新render生成新的Virtual DOM，並且patch到DOM上；

14. callHook(vm, 'updated') ：調用updated生命周期鉤子函數；

15. vm.$destroy() ：啟動卸銷毀過程；

16. callHook(vm, 'beforeDestroy') ：調用beforeDestroy生命周期鉤子函數；

17. Teardown watchers, childcomponents and event listeners ：執行一系列銷毀動作，在 $destroy 的執行過程中，它又會執行 vm.__patch__(vm._vnode, null) 觸發它子組件的銷毀鉤子函數，這樣一層層的遞歸調用，所以 destroyed 鉤子函數執行順序是先子後父，和 mounted 過程一樣。

18. callHook(vm, 'destroyed ') ：調用destroyed 生命周期鉤子函數。

Ⅹ 請簡述什麼是vue

vue指的是vue.js框架。Vue.js是一款友好的、多用途的且高性能的js框架，一款構建用戶界面的漸進式框架，它可以幫你創建可維護性和可測試性更強的代碼庫。

Vue.js是一款流行的JavaScript前端框架，一個用於創建用戶界面的開源JavaScript框架，旨在更好地組織與簡化Web開發。Vue所關注的核心是MVC模式中的視圖層，同時，它也能方便地獲取數據更新，並通過組件內部特定的方法實現視圖與模型的交互。

Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動採用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。

Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

Vue.js 自身不是一個全能框架——它只聚焦於視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時 ，Vue.js 也能完美地驅動復雜的單頁應用。

Vue.js是前端的主流框架之一，和Angular.js、React.js 一起，並成為前端三大主流框架！