Vue相關問題

1. 說一下Vue的雙向綁定數據的原理

vue 實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式，經過 Object.defineProperty() 來劫持各個屬性的 setter，getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回調

2. 解釋單向數據流和雙向數據綁定

單向數據流： 顧名思義，數據流是單向的。數據流動方向能夠跟蹤，流動單一，追查問題的時候能夠更快捷。缺點就是寫起來不太方便。要使UI發生變動就必須建立各類 action 來維護對應的 state

雙向數據綁定：數據之間是相通的，將數據變動的操做隱藏在框架內部。優勢是在表單交互較多的場景下，會簡化大量業務無關的代碼。缺點就是沒法追蹤局部狀態的變化，增長了出錯時 debug 的難度

vue生命週期鉤子

1.beforcreate

2.created

3.beformount

4.mounted

5.beforeUpdate

6.updated

7.actived

8.deatived

9.beforeDestroy

10.destroyed

 

3. Vue 如何去除url中的 #

vue-router 默認使用 hash 模式，因此在路由加載的時候，項目中的 url 會自帶 #。若是不想使用 #， 可使用 vue-router 的另外一種模式 history

new Router({ mode: 'history', routes: [ ] })

須要注意的是，當咱們啓用 history 模式的時候，因爲咱們的項目是一個單頁面應用，因此在路由跳轉的時候，就會出現訪問不到靜態資源而出現 404 的狀況，這時候就須要服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面

4. 對 MVC、MVVM的理解

MVC

特色：

1. View 傳送指令到 Controller
2. Controller 完成業務邏輯後，要求 Model 改變狀態
3. Model 將新的數據發送到 View，用戶獲得反饋

全部通訊都是單向的

MVVM

特色：

1. 各部分之間的通訊，都是雙向的
2. 採用雙向綁定：View 的變更，自動反映在 ViewModel，反之亦然

具體請移步 這裏

5. 介紹虛擬DOM

參考這裏

6. vue生命週期的理解

vue實例有一個完整的生命週期，生命週期也就是指一個實例從開始建立到銷燬的這個過程

• beforeCreate() 在實例建立之間執行，數據未加載狀態
• created() 在實例建立、數據加載後，能初始化數據，dom渲染以前執行
• beforeMount() 虛擬dom已建立完成，在數據渲染前最後一次更改數據
• mounted() 頁面、數據渲染完成，真實dom掛載完成
• beforeUpadate() 從新渲染以前觸發
• updated() 數據已經更改完成，dom 也從新 render 完成,更改數據會陷入死循環
• beforeDestory() 和 destoryed() 前者是銷燬前執行（實例仍然徹底可用），後者則是銷燬後執行

7. 組件通訊

父組件向子組件通訊

子組件經過 props 屬性，綁定父組件數據，實現雙方通訊

子組件向父組件通訊

將父組件的事件在子組件中經過 $emit 觸發

非父子組件、兄弟組件之間的數據傳遞

/*新建一個Vue實例做爲中央事件總嫌*/ let event = new Vue(); /*監聽事件*/ event.$on('eventName', (val) => { //......do something }); /*觸發事件*/ event.$emit('eventName', 'this is a message.')

Vuex 數據管理

8. vue-router 路由實現

路由就是用來跟後端服務器進行交互的一種方式，經過不一樣的路徑，來請求不一樣的資源，請求不一樣的頁面是路由的其中一種功能

參考 這裏

9. v-if 和 v-show 區別

使用了 v-if 的時候，若是值爲 false ，那麼頁面將不會有這個 html 標籤生成。

v-show 則是無論值爲 true 仍是 false ，html 元素都會存在，只是 CSS 中的 display 顯示或隱藏

10. $route和$router的區別

$router 爲 VueRouter 實例，想要導航到不一樣 URL，則使用 $router.push 方法

$route 爲當前 router 跳轉對象裏面能夠獲取 name 、 path 、 query 、 params 等

11. NextTick 是作什麼的

$nextTick 是在下次 DOM 更新循環結束以後執行延遲迴調，在修改數據以後使用 $nextTick，則能夠在回調中獲取更新後的 DOM

具體可參考官方文檔 深刻響應式原理

12. Vue 組件 data 爲何必須是函數

由於js自己的特性帶來的，若是 data 是一個對象，那麼因爲對象自己屬於引用類型，當咱們修改其中的一個屬性時，會影響到全部Vue實例的數據。若是將 data 做爲一個函數返回一個對象，那麼每個實例的 data 屬性都是獨立的，不會相互影響了

13. 計算屬性computed 和事件 methods 有什麼區別

咱們能夠將同一函數定義爲一個 method 或者一個計算屬性。對於最終的結果，兩種方式是相同的

不一樣點：

computed: 計算屬性是基於它們的依賴進行緩存的,只有在它的相關依賴發生改變時纔會從新求值

對於 method ，只要發生從新渲染，method 調用總會執行該函數

14. 對比 jQuery ，Vue 有什麼不一樣

jQuery 專一視圖層，經過操做 DOM 去實現頁面的一些邏輯渲染； Vue 專一於數據層，經過數據的雙向綁定，最終表如今 DOM 層面，減小了 DOM 操做

Vue 使用了組件化思想，使得項目子集職責清晰，提升了開發效率，方便重複利用，便於協同開發

15. Vue 中怎麼自定義指令

全局註冊

// 註冊一個全局自定義指令 `v-focus` Vue.directive('focus', { // 當被綁定的元素插入到 DOM 中時…… inserted: function (el) { // 聚焦元素 el.focus() } })

局部註冊

directives: {
  focus: { // 指令的定義 inserted: function (el) { el.focus() } } }

參考 官方文檔-自定義指令

16. Vue 中怎麼自定義過濾器

能夠用全局方法 Vue.filter() 註冊一個自定義過濾器，它接收兩個參數：過濾器 ID 和過濾器函數。過濾器函數以值爲參數，返回轉換後的值

Vue.filter('reverse', function (value) { return value.split('').reverse().join('') })

<!-- 'abc' => 'cba' --> <span v-text="message | reverse"></span>

過濾器也一樣接受全局註冊和局部註冊

17. 對 keep-alive 的瞭解

keep-alive 是 Vue 內置的一個組件，可使被包含的組件保留狀態，或避免從新渲染

<keep-alive>
  <component> <!-- 該組件將被緩存！ --> </component> </keep-alive>

可使用API提供的props，實現組件的動態緩存

具體參考 官方API

18. Vue 中 key 的做用

key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。若是不使用 key，Vue 會使用一種最大限度減小動態元素而且儘量的嘗試修復/再利用相同類型元素的算法。使用 key，它會基於 key 的變化從新排列元素順序，而且會移除 key 不存在的元素。

有相同父元素的子元素必須有獨特的 key。重複的 key 會形成渲染錯誤

具體參考 官方API

19. Vue 的核心是什麼

數據驅動 組件系統

20. vue 等單頁面應用的優缺點

優勢：

• 良好的交互體驗
• 良好的先後端工做分離模式
• 減輕服務器壓力

缺點：

• SEO難度較高
• 前進、後退管理
• 初次加載耗時多

21. vue-router 使用params與query傳參有什麼區別

vue-router 能夠經過 params 與 query 進行傳參

// 傳遞 this.$router.push({path: './xxx', params: {xx:xxx}}) this.$router.push({path: './xxx', query: {xx:xxx}}) // 接收 this.$route.params this.$route.query

• params 是路由的一部分,必需要有。query 是拼接在 url 後面的參數，沒有也不要緊
• params 不設置的時候，刷新頁面或者返回參數會丟，query 則不會有這個問題

 

爲何組件中的data屬性的值必須是一個函數？

由於在一個組件被屢次引用的狀況下，若是data的值是一個Object的話，那麼因爲Object是一個引用類型，因此即便是該組件被屢次引用，而其實操做的是同一個對象，最終致使了引用該組件的全部位置都同步的顯示了。

Vue相關問題

mvc是什麼？mvp是什麼？ mvvm是什麼？他們區別和原理是什麼？
http://www.360doc.com/content/16/0413/11/32348297_550241237.shtml
1、MVC（Model-View-Controller）
即模型-視圖-控制器。M和V指的意思和MVVM中的M和V意思同樣。C即Controller指的是頁面業務邏輯。使用MVC的目的就是將M和V的代碼分離。‘MVC是單向通訊。也就是View跟Model，必須經過Controller來承上啓下。
MVC使用很是普遍，好比JavaEE中的SSH框架
2、MVP（Model-View-Presenter）
與MVC的基本思想有相通的地方：Controllerer負責邏輯的處理，Model提供數據，View負責顯示。
MVP與MVC的重要區別是：在MVP中View不直接使用Model，他們之間的通訊是經過Presenter來進行的，全部的交互都發生在Presenter內部，而在MVC中View會直接從Model中讀取數據而不是經過Controller。
2、MVVM（Model-View-ViewModel）
即模型-視圖-視圖模型。【模型】指的是後端傳遞的數據。【視圖】指的是所看到的頁面。【視圖模型】mvvm模式的核心，它是鏈接view和model的橋樑。它有兩個方向：一是將【模型】轉化成【視圖】，即將後端傳遞的數據轉化成所看到的頁面。實現的方式是：數據綁定。二是將【視圖】轉化成【模型】，即將所看到的頁面轉化成後端的數據。實現的方式是：DOM 事件監聽。這兩個方向都實現的，咱們稱之爲數據的雙向綁定。
MVVM和MVP的關係：MVVM基本與MVP模式一致，惟一的區別是MVVM採用雙向綁定（data-binding）
MVVM的優勢？
1. 低耦合。視圖（View）能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化的時候Model不能夠不變，當Model變化的時候View也能夠不變。
2. 可重用性。你能夠把一些視圖邏輯放在一個ViewModel裏面，讓不少view重用這段視圖邏輯。
3. 獨立開發。開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計，使用Expression Blend能夠很容易設計界面並生成xaml代碼。
4. 可測試。界面素來是比較難於測試的，而如今測試能夠針對ViewModel來寫。
mvvm框架是什麼？它和其它框架（jquery）的區別是什麼？哪些場景適合？
一個model+view+viewModel框架，數據模型model，viewModel鏈接兩個
區別：vue數據驅動，經過數據來顯示視圖層而不是節點操做。
場景：數據操做比較多的場景，更加便捷

談談你對vue的理解和見解？
https://www.jianshu.com/p/0c0a4513d2a6
https://blog.csdn.net/wmwmdtt/article/details/55095420
（1）簡潔 （2）輕量 （3）快速 （4）數據驅動 （5）模塊友好 （6）組件化

vuejs與angularjs以及react的區別？
https://www.jianshu.com/p/e24f95349c1f
react和vue有哪些不一樣，說說你對這兩個框架的見解
相同點
· 都支持服務器端渲染
· 都有Virtual DOM,組件化開發,經過props參數進行父子組件數據的傳遞,都實現webComponent規範
· 數據驅動視圖
· 都有支持native的方案,React的React native,Vue的weex
不一樣點
· React嚴格上只針對MVC的view層,Vue則是MVVM模式
· virtual DOM不同,vue會跟蹤每個組件的依賴關係,不須要從新渲染整個組件樹.而對於React而言,每當應用的狀態被改變時,所有組件都會從新渲染,因此react中會須要shouldComponentUpdate這個生命週期函數方法來進行控制
· 組件寫法不同, React推薦的作法是 JSX + inline style, 也就是把HTML和CSS全都寫進JavaScript了,即'all in js'; Vue推薦的作法是webpack+vue-loader的單文件組件格式,即html,css,jd寫在同一個文件;
· 數據綁定: vue實現了數據的雙向綁定,react數據流動是單向的
· state對象在react應用中不可變的,須要使用setState方法更新狀態;在vue中,state對象不是必須的,數據由data屬性在vue對象中管理

聊聊你對Vue.js的template編譯的理解？
簡而言之，就是先轉化成AST樹，再獲得的render函數返回VNode（Vue的虛擬DOM節點）
詳情步驟：
首先，經過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 源代碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以建立編譯器的。另外compile還負責合併option。
而後，AST會通過generate（將AST語法樹轉化成render funtion字符串的過程）獲得render函數，render的返回值是VNode，VNode是Vue的虛擬DOM節點，裏面有（標籤名、子節點、文本等等）

請說下具體使用vue的理解？
一、使用vue沒必要擔憂佈局更改和類名重複致使的js重寫，由於它是靠數據驅動雙向綁定，底層是經過Object.defineProperty() 定義的數據 set、get 函數原理實現。
二、組件化開發，讓項目的可拓展性、移植性更好，代碼重用性更高，就好像農民工建房子，拿起本身的工具包就能夠開工。項目經理坐等收樓就好。
三、單頁應用的體驗零距離接觸安卓原生應用，局部組件更新界面，讓用戶體驗更快速省時。
四、js的代碼無形的規範，團隊合做開發代碼可閱讀性更高。

vue的原理？
https://cn.vuejs.org/v2/guide/reactivity.html
https://blog.csdn.net/tangxiujiang/article/details/79594860
Vue的雙向數據綁定原理是什麼？
vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。
具體步驟：
第一步：須要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter
這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化
第二步：compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖
第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是:
一、在自身實例化時往屬性訂閱器(dep)裏面添加本身
二、自身必須有一個update()方法
三、待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。
第四步：MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變動的雙向綁定效果。
vue鉤子函數並解釋？created和mounted的區別，分別在何時用?
https://www.jb51.net/article/146883.htm
https://www.cnblogs.com/goloving/p/9211295.html
https://segmentfault.com/a/1190000008010666
beforeCreate/created/beforeMounted/mounted
created:在模板渲染成html前調用，即一般初始化某些屬性值，而後再渲染成視圖。
mounted:在模板渲染成html後調用，一般是初始化頁面完成後，再對html的dom節點進行一些須要的操做。
其實二者比較好理解，一般created使用的次數多，而mounted一般是在一些插件的使用或者組件的使用中進行操做，好比插件chart.js的使用: var ctx = document.getElementById(ID);一般會有這一步，而若是你寫入組件中，你會發如今created中沒法對chart進行一些初始化配置，必定要等這個html渲染完後才能夠進行，那麼mounted就是不二之選。
vue-router是什麼？它有哪些組件？
https://www.cnblogs.com/SamWeb/p/6610733.html
https://www.cnblogs.com/bydzhangxiaowei/p/9055484.html
vue用來寫路由一個插件。router-link、router-view
在vue-router中, 咱們看到它定義了兩個標籤<router-link> 和<router-view>來對應點擊和顯示部分。<router-link> 就是定義頁面中點擊的部分，<router-view> 定義顯示部分，就是點擊後，區配的內容顯示在什麼地方。因此 <router-link> 還有一個很是重要的屬性 to，定義點擊以後，要到哪裏去， 如：<router-link to="/home">Home</router-link>
怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？
答：在router目錄下的index.js文件中，對path屬性加上/:id。 使用router對象的params.id
導航到 user 組件，路徑中確定有user, id 不一樣，那就給路徑一個動態部分來匹配不一樣的id. 在vue-router中，動態部分 以 : 開頭，那麼路徑就變成了 /user/:id, 這條路由就能夠這麼寫： { path:"/user/:id", component: user }.
vue-router實現原理？
單頁面應用(SPA)的核心之一是: 更新視圖而不從新請求頁面,
實現這一點主要是兩種方式:
1.Hash: 經過改變hash值
2.History: 利用history對象新特性（詳情可出門左拐見: http://www.cnblogs.com/yanze/p/7641774.html）
而在vue-router中，它提供mode參數來決定採用哪種方式，選擇流程以下:
默認Hash-->若是瀏覽器支持History新特性改用History-->若是不在瀏覽器環境則使用abstract
選好mode後建立history對象(HashHistory或HTML5History或AbstractHistory)

前端路由是直接找到與地址匹配的一個組件或對象並將其渲染出來。改變瀏覽器地址而不向服務器發出請求有兩種方式:
1. 在地址中加入#以欺騙瀏覽器，地址的改變是因爲正在進行頁內導航
2. 使用H5的window.history功能，使用URL的Hash來模擬一個完整的URL。
vue-router有哪幾種導航鉤子？它們有哪些參數？
https://blog.csdn.net/weixin_41399785/article/details/79382243
vue-router 的導航鉤子，主要用來做用是攔截導航，讓他完成跳轉或取消。
答：三種，
全局導航鉤子：beforeEach、beforeResolve、afterEach
做用：跳轉前進行判斷攔截。
單獨路由獨享組件：beforeEnter
路由組件上的鉤子：beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave
每一個鉤子方法接收三個參數：
to: Route: 即將要進入的目標 路由對象
from: Route: 當前導航正要離開的路由
next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
① next()：進入管道中的下一個鉤子，若是所有的鉤子執行完了，則導航的狀態就是 confirmed（確認的）
② next(false)：這表明中斷掉當前的導航，即 to 表明的路由對象不會進入，被中斷，此時該表 URL 地址會被重置到 from 路由對應的地址
③ next(‘/’) 和 next({path: ‘/’})：在中斷掉當前導航的同時，跳轉到一個不一樣的地址
④ next(error)：若是傳入參數是一個 Error 實例，那麼導航被終止的同時會將錯誤傳遞給 router.onError() 註冊過的回調
注意：next 方法必需要調用，不然鉤子函數沒法 resolved

vue如何實現組件之間的通訊？
https://blog.csdn.net/zhoulu001/article/details/79548350

vue如何實現父子組件通訊，以及非父子組件通訊？
https://blog.csdn.net/mr_fzz/article/details/54636833
父組件向子組件傳值：
子組件在props中建立一個屬性，用來接收父組件傳過來的值；
在父組件中註冊子組件；
在子組件標籤中添加子組件props中建立的屬性；
把須要傳給子組件的值賦給該屬性
子組件向父組件傳值：
子組件中須要以某種方式（如點擊事件）的方法來觸發一個自定義的事件；
將須要傳的值做爲$emit的第二個參數，該值將做爲實參傳給響應事件的方法；
在父組件中註冊子組件並在子組件標籤上綁定自定義事件的監聽。
子組件訪問父組件實例子 $parent
this.$parent
在子組件中判斷this.$parent獲取的實例是否是父組件的實例
在子組件中console.log(this.$parent) 打印出this.$parent
在父組件中console.log(this) 打印出this
看看打印出來的兩個實例是否是同一個
若是是同一個 就能夠在子組件中經過this.$parent.屬性名和方法名，來調用父組件中的數據或者方法
父組件訪問子組件變量 this.$refs.usernameInput
給子組件添加ref屬性而後，經過vm.$refs來調用子組件的methods中的方法或者得到data
父組件： 在子組件中加上ref便可經過this.$refs.ref.method調用

prop 驗證，和默認值
咱們在父組件給子組件傳值得時候，爲了不沒必要要的錯誤，能夠給prop的值進行類型設定，讓父組件給子組件傳值得時候，更加準確，prop能夠傳一個數字，一個布爾值，一個數組，一個對象，以及一個對象的全部屬性。
組件能夠爲 props 指定驗證要求。若是未指定驗證要求，Vue 會發出警告
好比傳一個number類型的數據，用defalt設置它的默認值，若是驗證失敗的話就會發出警告。
prop 如何傳一個對象的全部屬性
方法一：使用不帶參數的v-bind寫法
v-bind中沒有參數，而組件中的props須要聲明對象的每一個屬性
方法二：使用帶參數的v-bind寫法
v-bind後跟隨參數todo，組件中的props須要聲明該參數，也就是v-bind後跟隨參數todo，
組件就能夠經過todo來訪問對象的屬性

vue的子向父傳遞參數，咱們通常是emit單個值，若是須要emit多個值，怎麼實現？
子組件傳出單個參數時：
// 子組件
this.$emit('test',this.param)
// 父組件
@test='test($event,userDefined)'
子組件傳出多個參數時：
// 子組件
this.$emit('test',this.param1，this.param2, this.param3)
// 父組件 arguments 是以數組的形式傳入
@test='test(arguments,userDefined)'
請詳細說下你對vue生命週期的理解？
總共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。
建立前/後： 在beforeCreated階段，vue實例的掛載元素$el和數據對象data都爲undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el尚未。
載入前/後：在beforeMount階段，vue實例的$el和data都初始化了，但仍是掛載以前爲虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。
更新前/後：當data變化時，會觸發beforeUpdate和updated方法。
銷燬前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，可是dom結構依然存在
vue生命週期的理解？
總共分爲8個階段：
beforeCreate----建立前 組件實例更被建立，組件屬性計算以前，數據對象data都爲undefined，未初始化。
created----建立後 組件實例建立完成，屬性已經綁定，數據對象data已存在，但dom未生成，$el未存在
beforeMount---掛載前 vue實例的$el和data都已初始化，掛載以前爲虛擬的dom節點，data.message未替換
mounted-----掛載後 vue實例掛載完成，data.message成功渲染。
beforeUpdate----更新前 當data變化時，會觸發beforeUpdate方法
updated----更新後 當data變化時，會觸發updated方法
beforeDestory---銷燬前 組件銷燬以前調用
destoryed---銷燬後 組件銷燬以後調用，對data的改變不會再觸發周期函數，vue實例已解除事件監聽和dom綁定，但dom結構依然存在

vue路由傳參數
https://blog.csdn.net/weixin_41883384/article/details/81066443
https://blog.csdn.net/u014628388/article/details/81085624
①.params:參數不會顯示到路徑上
// 必定要寫name,params必須用name來識別路徑
傳遞參數：用$router，this.$router.push
接受參數：用$route，this.$route.params
②.query：最好也用name來識別，保持與params一致性，路徑傳參
傳遞參數：用$router，this.$router.push
接受參數：用$route，this.$route. Query
注意：若是路由上面不寫參數，也是能夠傳過去的，但不會在 url 上面顯示出你的參數，而且當你跳到別的頁面或者刷新頁面的時候參數會丟失，那依賴這個參數的 http 請求或者其餘操做就會失敗。
③.經過 router-link 咱們能夠向路由到的組件傳遞參數，這在咱們實際使用中時很是重要的。
經過<router-link> 標籤中的to傳參
<router-link>標籤中的to屬性進行傳參，須要注意的是這裏的to要進行一個綁定，寫成:to。
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
name：就是咱們在路由配置文件中起的name值。
params：就是咱們要傳的參數，它也是對象形勢，在對象裏能夠傳遞多個值。
用$route.params進行接收.
④.vue-router 利用url傳遞參數　
　　:冒號的形式傳遞參數
　　　 在路由配置文件裏以:冒號的形式傳遞參數，這就是對參數的綁定。
在配置文件裏以冒號的形式設置參數。咱們在/src/router/index.js文件裏配置路由。
在src/components目錄下創建咱們params.vue組件，也能夠說是頁面。咱們在頁面裏輸出了url傳遞的的新聞ID和新聞標題。
在App.vue文件里加入咱們的<router-view>標籤。這時候咱們能夠直接利用url傳值了。
query 傳參和 params 傳參的區別
用法上的： query 要用 path 來引入，params 要用 name 來引入，接收參數都是相似的，分別是 this.$route.query.name 和 this.$route.params.name。注意接收參數的時候，已是$route 而不是$router 了哦！！
展現上的： query 更加相似於咱們 ajax 中 get 傳參，params 則相似於 post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，後者則不顯示因此二者不能同時使用！！！

路由是怎麼配置的？有子路由怎麼配置？
https://www.cnblogs.com/padding1015/p/7884861.html
子路由是用children
爲何須要懶加載？
像vue這種單頁面應用，若是沒有應用懶加載，運用webpack打包後的文件將會異常的大，形成進入首頁時，須要加載的內容過多，時間過長，會出啊先長時間的白屏，即便作了loading也是不利於用戶體驗，而運用懶加載則能夠將頁面進行劃分，須要的時候加載頁面，能夠有效的分擔首頁所承擔的加載壓力，減小首頁加載用時
路由的懶加載怎麼實現？
https://blog.csdn.net/weixin_38704338/article/details/79103230
https://www.cnblogs.com/datiangou/p/10148831.html
路由懶加載resolve => require([URL], resolve),支持性好

axios是什麼？怎麼使用？
https://www.jianshu.com/p/2278d33791a2
https://www.cnblogs.com/Upton/p/6180512.html
https://www.jianshu.com/p/3b5e453f54f5
https://www.cnblogs.com/axl234/p/7144767.html
Axios 是一個基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中。
描述使用它實現登陸功能的流程？
https://blog.csdn.net/miaozhenzhong/article/details/80560447
https://blog.csdn.net/qq673318522/article/details/55506650
https://www.jianshu.com/p/e5c9162d14e3
npm install axios -S裝好，而後發送的是跨域，需在配置文件中config/index.js進行設置。後臺若是是Tp5則定義一個資源路由。js中使用import進來，而後.get或.post。返回在.then函數中若是成功，失敗則是在.catch函數中

axios+tp5進階中，調用axios.post(‘api/user’)是進行的什麼操做？axios.put(‘api/user/8′)呢？
跨域，添加用戶操做，更新操做。

說出至少4種vue當中的指令和它的用法？
v-if：判斷是否隱藏；
v-for：數據循環出來；
v-bind:class：綁定一個屬性；
v-model：實現雙向綁定
v-model是什麼？怎麼使用？vue中標籤怎麼綁定事件？
能夠實現雙向綁定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model層的data屬性。綁定事件：<input @click=doLog() />
v-for循環的li標籤，點擊當前li高亮，怎麼實現？
步驟1：在data裏面定義一個i:0;
步驟2：在li綁定點擊事件，點擊事件中，將當前索引賦值給data裏面的i
步驟3：在li中判斷i==index的時候，改變此li的樣式
指令v-el的使用？
有時候咱們想就像使用jquery那樣去訪問一個元素，此時就可使用v-el指令，去給這個元素註冊一個索引，方便經過所屬實例的$el訪問這個元素。
注意
HTML不區分大小寫，因此v-el:someEl將轉換爲全小寫。能夠用v-el:some-el而後設置this.$el.someEl。
示例
<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent // -> "hello"
this.$els.otherMsg.textContent // -> "world"
this.$els.msg //-><span>hello</span>
指令keep-alive做用
keep-alive的含義：把切換出去的組件保留在內存中，能夠保留它的狀態或避免從新渲染。
<component :is='curremtView' keep-alive></component>

watch 如何使用
https://www.cnblogs.com/shiningly/p/9471067.html
https://www.cnblogs.com/carriezhao/p/9330137.html
以前作一個H5的項目。需求是當用戶在輸入完了手機號和驗證碼以後，登陸按鈕才能夠點擊。
在沒有使用vue以前，咱們多是經過input的change事件來判斷，用戶是否輸入了內容，而後修改按鈕的狀態。如今有了vue，就省事了不少，咱們只須要在watch中，監聽數據模型的值改變便可。
在input 上綁定一個v-mode="pass"綁定一個數據名， 在data裏寫入綁定的事件名，經過watch來監聽輸入內容的改變，可是若是，監聽的是一個對象 裏面有一個deep屬性能夠在選項參數中指定deep：true.也叫深度監聽
<input v-model="passw2" placeholder="請再次輸入密碼" />
①. 直接寫一個監聽處理函數，當每次監聽到 cityName 值發生改變時，執行函數。也能夠在所監聽的數據後面直接加字符串形式的方法名
②. immediate和handler
這樣使用watch時有一個特色，就是當值第一次綁定的時候，不會執行監聽函數，只有值發生改變纔會執行。若是咱們須要在最初綁定值的時候也執行函數，則就須要用到immediate屬性。
好比當父組件向子組件動態傳值時，子組件props首次獲取到父組件傳來的默認值時，也須要執行函數，此時就須要將immediate設爲true。
③. deep
當須要監聽一個對象的改變時，普通的watch方法沒法監聽到對象內部屬性的改變，只有data中的數據纔可以監聽到變化，此時就須要deep屬性對對象進行深度監聽。
④. 若是watch監測的是一個對象的話，直接使用watch是不行的，此時咱們能夠藉助於computed計算屬性來完成。
methods、計算屬性computed和偵聽屬性watch的區別和使用？
http://www.imooc.com/article/74276
Vue提供了多種邏輯處理的方法，單純的方法methods，computed(計算屬性)以及watch等，
methods和computed比較：
methods是交互方法須要主動去觸發，而computed則是在檢測到data數據變化時自動觸發的。
methods是一次性無緩存的計算，computed則是有緩存的。methods每次計算後都會把變量回收，再次訪問的時候會從新計算。而computed則是依賴數據的，數據佔用內存是不會被回收掉的，再次訪問的時候不會從新計算，而是返回上次計算的值，當依賴的數據發生改變時纔會再次計算。
計算屬性computed是基於它們的依賴進行緩存的。也就是說，計算屬性只有在它的相關依賴發生改變時纔會從新求值。計算屬性默認只是 getter，不過在須要時你也能夠提供一個 setter。
偵聽屬性watch是一個對象，鍵是須要觀察的表達式，值是對應回調函數。值也能夠是方法名，或者包含選項的對象。
compute和watch比較：
共同點是：都是但願在依賴數據發生改變的時候，被依賴的數據根據預先定義好的函數，發生「自動」的變化。
區別：
(1).watch擅長處理的場景：一個數據影響多個數據
(2).computed擅長處理的場景：一個數據受多個數據影響
當你有一些數據須要隨着其它數據變更而變更時，或者當須要在數據變化時執行異步或開銷較大的操做時，你可使用 watch。

計算屬性computed不能計算在data中已經定義過的變量。
計算屬性如何使用
通常咱們在寫vue的時候，在模板內寫的表達式很是便利，它運用於簡單的運算，可是他也有一些複雜的邏輯，包括運算、函數調用等，那麼就用到了計算屬性，他依賴於data中數據變化的 data 中數據變化的時候 計算屬性就會從新執行，視圖也會更新。
計算屬性的 set get 如何使用
每個計算屬性都包含一個getter 和一個setter ；
絕大多數狀況下，咱們只會用默認的getter 方法來讀取一個計算屬性，在業務中不多用到setter,因此在聲明一個計算屬性時，能夠直接使用默認的寫法，沒必要將getter 和setter 都聲明。
但在你須要時，也能夠提供一個setter 函數， 當手動修改計算屬性的值就像修改一個普通數據那樣時，就會觸發setter 函數，

scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？
css的預編譯。
使用步驟：
第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）
第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss
第三步：仍是在同一個文件，配置一個module屬性
第四步：而後在組件的style標籤加上lang屬性 ，例如：lang=」scss」
幾大特性:
能夠用變量，例如（$變量名稱=值）；
能夠用混合器，例如（）
能夠嵌套

mint-ui是什麼？怎麼使用？說出至少三個組件使用方法？
基於vue的前端組件庫。npm安裝，而後import樣式和js，vue.use（mintUi）全局引入。在單個組件局部引入：import {Toast} from ‘mint-ui’。組件一：Toast(‘登陸成功’)；組件二：mint-header；組件三：mint-swiper

什麼是RESTful API？怎麼使用?
是一個api的標準，無狀態請求。請求的路由地址是固定的，若是是tp5則先路由配置中把資源路由配置好。標準有：.post .put .delete

自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？
全局定義指令：在vue對象的directive方法裏面有兩個參數，一個是指令名稱，另一個是函數。組件內定義指令：directives
鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）
鉤子函數參數：el、binding

請說下封裝 vue 組件的過程？
https://www.cnblogs.com/wisewrong/p/6834270.html
https://blog.csdn.net/tangxiujiang/article/details/79620542
https://www.jianshu.com/p/233d17dfbd16
首先，組件能夠提高整個項目的開發效率。可以把頁面抽象成多個相對獨立的模塊，解決了咱們傳統項目開發：效率低、難維護、複用性等問題。
而後，使用Vue.extend方法建立一個組件，而後使用Vue.component方法註冊組件。子組件須要數據，能夠在props中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。能夠採用emit方法。
vue-loader是什麼？使用它的用途有哪些？
解析.vue文件的一個加載器，跟template/js/style轉換成js模塊。
用途：js能夠寫es六、style樣式能夠scss或less、template能夠加jade等

請說出vue.cli項目中src目錄每一個文件夾和文件的用法？
assets文件夾是放靜態資源；components是放組件；router是定義路由相關的配置;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裏面的data爲何是個函數且return?
做用域的問題，避免全局污染

你作過的項目中，vue和哪些ui框架一塊兒使用過？
Element 、iview 、mint-ui

vue的虛擬dom？
虛擬的DOM的核心思想是：對複雜的文檔DOM結構，提供一種方便的工具，進行最小化地DOM操做。

插槽，具名插槽，插槽默認內容
單個插槽；在父組件寫一個標籤，在子組件經過slot來接受標籤裏的內容,他只能用一個slot。單個插槽能夠放置在組件的任意位置，可是就像它的名字同樣，一個組件中只能有一個該類插槽。
具名插槽：在父組件標籤寫入slot，子組件裏面寫name名字，他們兩個名字要相對應，才能經過名字在找到對應的位置。相對應的，具名插槽就能夠有不少個，只要名字（name屬性）不一樣就能夠了。
做用域插槽
舉個例子，好比我寫了一個能夠實現條紋相間的列表組件，發佈後，使用者能夠自定義每一行的內容或樣式（普通的slot就能夠完成這個工做）。而做用域插槽的關鍵之處就在於，父組件能接收來自子組件的slot傳遞過來的參數，子組件與父組件的數據動態交互的一種常見案例
父組件中必需要有template元素，且必須有scope特性，scope特性中是臨時變量名，
接收從子組件中傳遞上來的屬性，屬性能夠是任意定義的。
動態組件
在咱們平時使用vue中的模板的時候，許多時候都是直接定義成一個固定的模板，可是，vue中提供了一個動態模板，能夠在任意模板中切換，就是用vue中<component>用:is來掛載不一樣的組件。
咱們在components中註冊了三個模板，當咱們點擊當前按鈕的時候，就會將模板切換模板，能夠說是很是方便了。若是要把組件切換過程當中的將狀態保留在內存中，能夠添加一個 keep- alive 指令參數，防止重複渲染DOM。
動態組件上使用keep-alive
<keep-alive>是Vue的內置組件，能在組件切換過程當中將狀態保留在內存中，防止重複渲染DOM。
state,getter,mutation,action,module,plugins 各自的用途，和用法
State:{ count: 0 } 保存着全部的全局變量
Getter： 對state中的數據派生出一些狀態，例如對數據進行過濾。（能夠認爲是store中的計算屬性），會對state中的變量進行過濾再保存，只要state中的變量發生了改變，它也會發生變化，不變化的時候，讀的緩存。
Mutation：更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。
一條重要的原則就是要記住 mutation 必須是同步函數。
Action: Action 相似於 mutation, 不一樣點在於，Action 提交的是 mutation，而不是直接變動狀態。Action 能夠包含任意異步操做，mutation只能是同步。
有點不一樣的是Action 函數接受一個與 store 實例具備相同方法和屬性的 context 對象，所以你能夠調用 context.commit 提交一個 mutation，或者經過 context.state 和 context.getters 來獲取 state 和 getters。
Module： //模塊，能夠寫不少模塊，最後都引入到一個文件。分散管理。
生成實例的時候 都放在Store的modules中
plugins：插件（Plugins）是用來拓展webpack功能的，它們會在整個構建過程當中生效，執行相關的任務。

Vuex
簡述一下$nextTick的用法

vuex是用來作什麼的？

vuex跟cookie的區別？
vuex是中心化狀態管理方案，getter/state/mutaion/action是一套的，集中管理，實現數據共享和同步。
由列表頁跳轉到詳情頁，有傳遞一個參數到詳情頁，刷新詳情頁，頁面會出現404嗎？
https://router.vuejs.org/zh/guide/essentials/history-mode.html

談談vuex的單向數據流？
https://www.jianshu.com/p/1ebc15645abe

vuex是什麼？怎麼使用？哪一種功能場景使用它？
vue框架中狀態管理。在main.js引入store，注入。新建了一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車
什麼是vuex，使用vuex的好處
Vuex是一個專爲 Vue.js 應用程序開發的狀態管理模式。
好處：
能夠作狀態管理 採用localstorage保存信息，數據便一直存儲在用戶的客戶端中
使用場景：適合在巨大後複雜的項目中使用，
vuex是什麼？在你開發的項目中是怎麼使用vuex？
中心化狀態管理方案
談下vuex的核心，vuex有什麼優勢和缺點？mutation和action有什麼區別？異步是寫在mutaion裏面仍是action裏面？
Vuex核心是getter/state/mutaion/action.
mutatiion是用來改變state
action是用來提交mutaion
異步是寫在action

vuex中使用persistedstate 插件進行長久儲存 （須要本身寫代碼測試）
安裝 npm install vuex-persistedstate --save
store.js引入
import VuexPersistence from "vuex-persist";
建立一個對象：
const vuexLocal = new VuexPersistence({
storage:window.localStorage
})
安裝進vuex插件：
export default new Vuex.Store({
state:{
info:{}
},
mutations:{
setInfo(state,info){
state.info=info;
}
},
plugins:[VuexPersistence()]
})
默認存儲到localStorage
想要存儲到sessionStorage，配置以下
import createPersistedState from "vuex-persistedstate"const store = new Vuex.Store({
plugins: [createPersistedState({
storage: window.sessionStorage
})]
})

webpack原理是什麼？

webpack用了哪些？
https://www.jianshu.com/p/dce7546a5d20

vue webpack打包項目修改哪些配置
Config文件夾下面的index.js 設置裏面的assetsPublicpath屬性值爲./
若是圖片太大的話，能夠設置bulid文件夾下面的webpack.base.conf.js，設置圖片的limit將它的值設大點，
Utils.js添加publicpath爲../../
vue源碼結構

node.js有用過嗎？express有用過嗎？
確定說有用過，至少要學本身學習過寫過demo
相關知識點見 https://nodejs.org/en/

你以爲哪些項目適合vue框架？
一、數據信息量比較多的，反之相似企業網站就無需此框架了。
二、手機web和app應用多端共用一套界面的項目，由於使用vue.cli+webpack後的前端目錄，很是有利於項目的跨平臺部署。

PC端項目你會在哪些場景使用Vue框架？上萬級數據須要瀑布流更新和搜索的時候，由於數據龐大的時候，用原生的dom操做js和html都會有列表的html佈局，迭代很困難。再一個dom節點的大面積添加會影響性能。那麼vue爲何解決這些問題呢？第一：只需用v-for在view層一個地方遍歷數據便可，無需複製一段html代碼在js和html兩個地方。第二：vue經過Virtual Dom就是在js中模擬DOM對象樹來優化DOM操做。