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