vue是什么？
vue是構建數據驅動的web界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
vue是一種mvc和mvvm模式的開發框架，他的v-model可以實現數據的雙向綁定。
不用操作dom節點并可以用v-for進行數據渲染。
vue的優點是什么?
a.低耦合。視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
b.可重用性。你可以把一些視圖邏輯放在一個ViewModel里面，讓很多view重用這段視圖邏輯。
c.獨立開發。開發人員可以專注于業務邏輯和數據的開發（ViewModel），設計人員可以專注于頁面設計。
d.可測試。界面素來是比較難于測試的，而現在測試可以針對ViewModel來寫。
vue當中的指令和它的用法？
v-if、v-show：判斷是否隱藏；v-for：數據循環出來；v-on：監聽事件、@change、@click；v-bind:class：綁定一個屬性；v-model：實現雙向綁定。
v-if和v-show指令的共同點和不同點?
v-show指令是通過修改元素的displayCSS屬性讓其顯示或者隱藏。
v-if指令是直接銷毀和重建DOM達到讓元素顯示和隱藏的效果。
v-model是什么？怎么使用？ vue中標簽怎么綁定事件？
可以實現雙向綁定。
vue的model層的data屬性。綁定事件：v-bind
vue的雙向綁定的原理？
vue.js 是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。那么vue是如果進行數據劫持的，我們可以先來看一下通過控制臺輸出一個定義在vue初始化數據上的對象是個什么東西。
代碼：
var vm = new Vue({
? ? data: {
? ? ? ? obj: {
? ? ? ? ? ? a: 1
? ? ? ? }
? ? },
? ? created: function () {
? ? ? ? console.log(this.obj);
? ? }
});
我們可以看到屬性a有兩個相對應的get和set方法，為什么會多出這兩個方法呢？因為vue是通過Object.defineProperty()來實現數據劫持的。
Object.defineProperty( )是用來做什么的？它可以來控制一個對象屬性的一些特有操作，比如讀寫權、是否可以枚舉，這里我們主要先來研究下它對應的兩個描述屬性get和set，如果還不熟悉其用法
在平常，我們很容易就可以打印出一個對象的屬性數據：
var Book = {
? name: 'vue權威指南'
};
console.log(Book.name);? // vue權威指南
如果想要在執行console.log(book.name)的同時，直接給書名加個書名號，那要怎么處理呢？或者說要通過什么監聽對象 Book 的屬性值。這時候Object.defineProperty( )就派上用場了，代碼如下：
var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
? set: function (value) {
? ? name = value;
? ? console.log('你取了一個書名叫做' + value);
? },
? get: function () {
? ? return '《' + name + '》'
? }
})
Book.name = 'vue權威指南';? // 你取了一個書名叫做vue權威指南
console.log(Book.name);? // 《vue權威指南》
我們通過Object.defineProperty( )設置了對象Book的name屬性，對其get和set進行重寫操作，顧名思義，get就是在讀取name屬性這個值觸發的函數，set就是在設置name屬性這個值觸發的函數，所以當執行?Book.name = 'vue權威指南' 這個語句時，控制臺會打印出 "你取了一個書名叫做vue權威指南"，緊接著，當讀取這個屬性時，就會輸出 "《vue權威指南》"。
實現過程
因此接下去我們執行以下3個步驟，實現數據的雙向綁定：
1.實現一個監聽器Observer，用來劫持并監聽所有屬性，如果有變動的，就通知訂閱者。
2.實現一個訂閱者Watcher，可以收到屬性的變化通知并執行相應的函數，從而更新視圖。
3.實現一個解析器Compile，可以掃描和解析每個節點的相關指令，并根據初始化模板數據以及初始化相應的訂閱器。
vue路由怎么使用？
1.下載安裝（用webpack新建vue項目時，默認選擇安裝vue-router），
2.創建路由文件，
3.在router文件夾里的index.js里配置路由，
4.在main.js中引入router文件夾下的router.js文件
5.在app.vue里設置錨點 （router-link 和 router-view ，routerlink鏈接到的路由會展示在router-view里，如果沒有router-view標簽且index.js設置路由的name屬性則頁面會直接跳轉）
vue路由怎么實現傳值的？
當你使用params方法傳參的時候，要在路由后面加參數名，并且傳參的時候，參數名要跟路由后面設置的參數名對應。使用query方法，就沒有這種限制，直接在跳轉里面用就可以。
組件之間的傳值通信？
1.子組件在props中創建一個屬性，用來接收父組件傳過來的值；
2.在父組件中注冊子組件；
3.在子組件標簽中添加子組件props中創建的屬性；
4.把需要傳給子組件的值賦給該屬性。
子組件向父組件傳值：
1.子組件中需要以某種方式（如點擊事件）的方法來觸發一個自定義的事件；
2.將需要傳的值作為$emit的第二個參數，該值將作為實參傳給響應事件的方法；
3.在父組件中注冊子組件并在子組件標簽上綁定自定義事件的監聽。
vue-router的鉤子函數
總體來講vue里面提供了三大類鉤子
1、全局鉤子
2、某個路由獨享的鉤子
3、組件內鉤子
顧名思義，全局鉤子全局用，使用如下
const router =new VueRouter({
? ? mode: 'history',
? ? base: __dirname,
? ? routes: routerConfig
})
router.beforeEach((to, from, next) => {
? ? document.title = to.meta.title || 'demo'if(!to.query.url && from.query.url) {
? ? ? ? to.query.url = from.query.url
? ? }
? ? next()
})
router.afterEach(route => {
})
就像說的一樣，給某個路由單獨使用的，本質上和后面的組件內鉤子是一樣的。都是特指的某個路由。不同的是，這里的一般定義在router當中，而不是在組件內。如下
const router =new VueRouter({
? routes: [
? ? {
? ? ? path: '/foo',
? ? ? component: Foo,
? ? ? beforeEnter: (to, from, next) => {
? ? ? ? // ...? ? ? },
? ? ? beforeLeave: (to, from, next) => {
? ? ? ? // ...? ? ? }
? ? }
? ]
})
首先看一下官方定義：
你可以在路由組件內直接定義以下路由導航鉤子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
路由組件!路由組件!路由組件!重要的事情說三遍，大家一定要注意這里說的是“路由組件”，而路由組件！== 組件，之前一直沒注意這點，然后在子組件里面傻乎乎的調鉤子函數發現一直沒用。。。
我們先來看一下什么是路由組件？
路由組件：直接定義在router中component處的組件
也就是說router中定義的入口vue文件之外的組件，是沒有鉤子函數的，也就不用說使用了。但是如果你使用了并不會報錯，只是沒反應。（本想畫個圖的，太懶了。。。自己理解理解吧，很好理解的）
這里再回頭看下這個路由內鉤子是怎么用的，很簡單和data、method平級的方法
beforeRouteLeave(to, from, next) {
? ? // ....? ? next()
},
beforeRouteEnter(to, from, next) {
? ? // ....? ? next()
},
beforeRouteUpdate(to, from, next) {
? ? // ....? ? next()
},
computed: {},
method: {}
三種路由鉤子中都涉及到了三個參數，這里直接上官方介紹吧
to: Route: 即將要進入的目標 路由對象
from: Route: 當前導航正要離開的路由
next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應的地址。
next(‘/’) 或者 next({ path: ‘/’ }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。
axios是什么？怎么使用？
axios 是一個基于 Promise 的，為瀏覽器和 Node.js 設計的 HTTP 客戶端。它盡可能簡化封裝了 HTTP 相關的各種操作，在 Web App 中使用非常方便。
Vue 2 官方建議在由 Vue 構建的 SPA 中使用 axios 進行 HTTP 操作。
axios 用于請求后臺資源的模塊。npm install axios -S裝好，
然后發送的是跨域，需在配置文件中config/index.js進行設置。
后臺如果是Tp5則定義一個資源路由。js中使用import進來，
然后.get或.post。返回在.then函數中如果成功，
失敗則是在.catch函數中。
vuex
vuex是一個專門為vue.js設計的集中式狀態管理架構。我把它理解為在data中的屬性需要共享給其他vue組件使用的部分，就叫做狀態。簡單的說就是data中需要共用的屬性。如果沒有vuex 請求到的數據在頁面刷新后就必須再請求一次，但是有了vuex就可以把這些數據當做狀態保存到vuex中，在中大型項目中有很多共用的數據，就可以用vuex。比如單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車就可以使用。
vuex有哪幾種屬性？
有五種，分別是 state（訪問狀態對象）、getter（計算過濾操作）、mutation（修改狀態）、action（異步修改狀態）、 module（模塊組）
vuejs與angularjs的區別？
相同點：
都支持指令：內置指令和自定義指令。
都支持過濾器：內置過濾器和自定義過濾器。
都支持雙向數據綁定。
都不支持低端瀏覽器。
不同點：
1.AngularJS的學習成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡單、直觀。
2.在性能上，AngularJS依賴對數據做臟檢查，所以Watcher越多越慢。
Vue.js使用基于依賴追蹤的觀察并且使用異步隊列更新。所有的數據都是獨立觸發的。
對于龐大的應用來說，這個優化差異還是比較明顯的。
vue不操作DOM節點查找元素
一般來講，獲取DOM元素，需document.querySelector（".input1"）獲取這個dom節點，然后在獲取input1的值。
但是用ref綁定之后，我們就不需要在獲取dom節點了，直接在上面的input上綁定input1，然后$refs里面調用就行。
然后在javascript里面這樣調用：this.$refs.input1? 這樣就可以減少獲取dom節點的消耗了
active-class是哪個組件的屬性？
vue-router模塊的router-link組件
嵌套路由怎么定義？
我們需要在 VueRouter 的參數中使用 children 配置，這樣就可以很好的實現路由嵌套。
import Vue from 'vue'
import VueRouter from 'vue-router'?
Vue.use(VueRouter)?
//引入兩個組件
import home from "./home.vue"?
import game from "./game.vue"?
//定義路由?
const routes = [?
? ? { path: "/", redirect: "/home" },//重定向,指向了home組件?
? ? {?
? ? ? ? path: "/home", component: home,?
? ? ? ? children: [?
? ? ? ? ? ? { path: "/home/game", component: game }?
? ? ? ? ]?
? ? }?
]?
//創建路由實例?
const router = new VueRouter({routes})?
new Vue({?
? ? el: '#app',?
? ? data: {?
? ? },?
? ? methods: {?
? ? },?
? ? router?
})
怎么定義vue-router的動態路由？怎么獲取傳過來的動態參數？
在router目錄下的index.js文件中，對path屬性加上/:id。
使用router對象的params.id。
scss是什么？在vue.cli中的安裝使用步驟是？有哪幾大特性？
css的預編譯。
使用步驟：
第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）
第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss
第三步：還是在同一個文件，配置一個module屬性
第四步：然后在組件的style標簽加上lang屬性 ，例如：lang=”scss”
有哪幾大特性:
1、可以用變量，例如（$變量名稱=值）；
2、可以用混合器，例如（）
3、可以嵌套
mint-ui是什么？怎么使用？說出至少三個組件使用方法？
基于vue的前端組件庫。npm安裝，然后import樣式和js，vue.use（mintUi）全局引入。在單個組件局部引入：import {Toast} from ‘mint-ui’。
組件一：Toast(‘登錄成功’)；
組件二：mint-header；
組件三：mint-swiper
mvvm框架是什么？它和其它框架（jquery）的區別是什么？哪些場景適合？
一個model+view+viewModel框架，數據模型model，viewModel連接兩個
區別：vue數據驅動，通過數據來顯示視圖層而不是節點操作。
場景：數據操作比較多的場景，更加便捷
自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？
全局定義指令：在vue對象的directive方法里面有兩個參數，一個是指令名稱，另外一個是函數。組件內定義指令：directives
鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）
鉤子函數參數：el、binding
你是怎么認識vuex的？
vuex可以理解為一種開發模式或框架。比如PHP有thinkphp，java有spring等。
通過狀態（數據源）集中管理驅動組件的變化（好比spring的IOC容器對bean進行集中管理）。
應用級的狀態集中放在store中； 改變狀態的方式是提交mutations，這是個同步的事物； 異步邏輯應該封裝在action中。
vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？
第一步：在components目錄新建你的組件文件（swithButton.vue），script一定要export default {
第二步：在需要用的頁面（組件）中導入：import swithButtonfrom ‘../components/swithButton.vue’
第三步：注入到vue的子組件的components屬性上面,components:{swithButton}
第四步：在template視圖view中使用，
問題有：swithButton命名，使用的時候則swith-button。
聊聊你對Vue.js的template編譯的理解？
簡而言之，就是先轉化成AST樹，再得到的render函數返回VNode（Vue的虛擬DOM節點）
詳情步驟：
首先，通過compile編譯器把template編譯成AST語法樹，compile是createCompiler的返回值，createCompiler是用以創建編譯器的。另外compile還負責合并option。
然后，AST會經過generate（將AST語法樹轉化成render funtion字符串的過程）得到render函數，render的返回值是VNode，VNode是Vue的虛擬DOM節點，里面有（標簽名、子節點、文本等等）
vuejs與angularjs以及react的區別？
1.與AngularJS的區別
相同點：
都支持指令：內置指令和自定義指令。
都支持過濾器：內置過濾器和自定義過濾器。
都支持雙向數據綁定。
都不支持低端瀏覽器。
不同點：
1.AngularJS的學習成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡單、直觀。
2.在性能上，AngularJS依賴對數據做臟檢查，所以Watcher越多越慢。
Vue.js使用基于依賴追蹤的觀察并且使用異步隊列更新。所有的數據都是獨立觸發的。
對于龐大的應用來說，這個優化差異還是比較明顯的。
2.與React的區別
相同點：
React采用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，兩者都需要編譯后使用。
中心思想相同：一切都是組件，組件實例之間可以嵌套。
都提供合理的鉤子函數，可以讓開發者定制化地去處理需求。
都不內置列數AJAX，Route等功能到核心包，而是以插件的方式加載。
在組件開發中都支持mixins的特性。
不同點：
React依賴Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM會對渲染出來的結果做臟檢查。
Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作DOM。
