1.v-if 可以重走組件的生命周期

2.Vue使用了Mustache語(yǔ)法矫户，即雙大括號(hào)的語(yǔ)法习瑰。

3.原生input其實(shí)只是一個(gè)語(yǔ)法糖，:bind="value"與@change="value = $event.target.value"的結(jié)合。

自定義組件的時(shí)候的v-model默認(rèn)監(jiān)聽(tīng)change事件和綁定value 的prop肮帐。

4.定義全局方法

1、通過(guò)prototype边器，Vue.prototype[method]=method;

2训枢、通過(guò)mixin，Vue.mixin(mixins);

5.設(shè)置assetsPublicPath將 assetsPublicPath: '/' 改為 assetsPublicPath: './'解決打包后靜態(tài)資源失效

6.動(dòng)態(tài)添加src被當(dāng)做靜態(tài)資源處理了忘巧，沒(méi)有進(jìn)行編譯恒界，所以要加上require。require('@/assets/images/xxx.png')

7.風(fēng)格指南

1砚嘴、使用v-for時(shí)記得加key十酣，可以快速定位到需要更新的DOM節(jié)點(diǎn)涩拙，提高效率。

2耸采、永遠(yuǎn)不要把 v-if 和 v-for 同時(shí)用在同一個(gè)元素上兴泥。提高渲染效率

3、優(yōu)先通過(guò) Vuex 管理全局狀態(tài)虾宇，而不是通過(guò) this.$root 或一個(gè)全局事件總線

4搓彻、為組件樣式設(shè)置scoped作用域

8.關(guān)于key：便于diff算法的更新，key的唯一性嘱朽，能讓算法更快的找到需要更新的dom旭贬，需要注意的是，key要唯一搪泳，不然會(huì)出現(xiàn)很隱蔽性的更新問(wèn)題稀轨。

9.style添加scope防止全局同名css污染

10.watch的屬性用箭頭定義會(huì)導(dǎo)致this 是undefind

11.vue錯(cuò)誤處理分為errorCaptured與errorHandler

errorCaptured是組件內(nèi)部鉤子，可捕捉本組件與子孫組件拋出的錯(cuò)誤岸军，接收error靶端、vm、info三個(gè)參數(shù)凛膏，return false后可以阻止錯(cuò)誤繼續(xù)向上拋出杨名。

errorHandler為全局鉤子，使用Vue.config.errorHandler配置猖毫，接收參數(shù)與errorCaptured一致台谍，2.6后可捕捉v-on與promise鏈的錯(cuò)誤，可用于統(tǒng)一錯(cuò)誤處理與錯(cuò)誤兜底吁断。

12.在vue事件中傳入$event趁蕊，使用e.target和e.currentTarget有什么區(qū)別？

currentTarget：事件綁定的元素

target:鼠標(biāo)觸發(fā)的元素

currentTarget 始終是監(jiān)聽(tīng)事件者仔役，而 target 是事件的真正發(fā)出者

13.在 .vue 文件中掷伙，template是必須的，而script與style都不是必須的又兵。

14.this.$forceUpdate()強(qiáng)制重新刷新某組件

15.vue擴(kuò)展組件方法

? 1.使用Vue.extend 直接擴(kuò)展

? ?2.使用Vue.mixin全局混入

? ?3.HOC封裝

? ?4.添加slot擴(kuò)展

16.attr和listeners 組件傳值任柜，祖孫組件有跨度的傳值

17.本地項(xiàng)目開(kāi)發(fā)完成部署后報(bào)錯(cuò)原因可能：

? ?檢查nginx配置，是否正確設(shè)置了資源映射條件

? ?檢查vue.config.js中是否配置了publicPath沛厨，若有則檢查是否和資源文件在服務(wù)器的擺放位置一致

18.vue組件模版只有一個(gè)根元素宙地，"樹(shù)"狀數(shù)據(jù)結(jié)構(gòu)，肯定要有個(gè)"根"逆皮，一個(gè)遍歷起始點(diǎn)通過(guò)這個(gè)‘根節(jié)點(diǎn)’宅粥，來(lái)遞歸遍歷整個(gè)vue‘樹(shù)’下的所有節(jié)點(diǎn)，并處理為vdom电谣，最后再渲染成真正的HTML秽梅，插入在正確的位置

19.如何優(yōu)化首頁(yè)的加載速度

?異步路由抹蚀、異步加載、分屏加載企垦、按需加載况鸣、延時(shí)加載圖片等

20.ajax是最早出現(xiàn)發(fā)送后端請(qǐng)求的技術(shù)，屬于原生js范疇,核心是使用XMLHttpRequest對(duì)象,使用較多并有先后順序的話竹观，容易產(chǎn)生回調(diào)地獄镐捧。fetch號(hào)稱可以代替ajax的技術(shù)，是基于es6中的Promise對(duì)象設(shè)計(jì)的臭增，參數(shù)和jQuery中的ajax類似懂酱，它并不是對(duì)ajax進(jìn)一步封裝，它屬于原生js范疇誊抛。沒(méi)有使用XMLHttpRequest對(duì)象列牺。axios不是原生js,使用時(shí)需要對(duì)其進(jìn)行安裝，客戶端和服務(wù)器端都可以使用拗窃，可以在請(qǐng)求和相應(yīng)階段進(jìn)行攔截瞎领，基于promise對(duì)象

21.單向數(shù)據(jù)流：所有狀態(tài)的改變可記錄、可跟蹤随夸，源頭易追溯九默；所有數(shù)據(jù)只有一份，組件數(shù)據(jù)只有唯一的入口和出口宾毒，使得程序更直觀更容易理解驼修，有利于應(yīng)用的可維護(hù)性；一旦數(shù)據(jù)變化诈铛，就去更新頁(yè)面(data-頁(yè)面)乙各，但是沒(méi)有(頁(yè)面-data)；如果用戶在頁(yè)面上做了變動(dòng)幢竹，那么就手動(dòng)收集起來(lái)(雙向是自動(dòng))耳峦，合并到原有的數(shù)據(jù)中。

雙向數(shù)據(jù)流：無(wú)論數(shù)據(jù)改變焕毫，或是用戶操作蹲坷，都能帶來(lái)互相的變動(dòng)，自動(dòng)更新咬荷。

22.router 是不是hash 是否需要配置nginx , publicPath , 是不是要配置cdn

23.vue的extend?構(gòu)建一個(gè)組件和vue.components注冊(cè)組件一起使用

24.定義組件模版的方法

1冠句、字符串

2轻掩、模板字面量

3幸乒、<scripttype="x-template"></script>

4、文件組件模板

5唇牧、inline-template.

25.在vue項(xiàng)目中引用第三方庫(kù)

1罕扎、絕對(duì)路徑直接引入在index.html中用script引入<scriptsrc="./static/jquery-1.12.4.js"></script>然后在webpack中配置externalexternals:{'jquery':'jQuery'}在組件中使用時(shí)importimport$from'jquery'

2聚唐、在webpack中配置aliasresolve:{extensions:['.js','.vue','.json'],alias:{'@':resolve('src'),'jquery':resolve('static/jquery-1.12.4.js')}}然后在組件中import

3、在webpack中配置pluginsplugins:[newwebpack.ProvidePlugin({$:'jquery'})]全局使用腔召，但在使用eslint情況下會(huì)報(bào)錯(cuò)杆查，需要在使用了 $ 的代碼前添加/* eslint-disable*/來(lái)去掉 ESLint 的檢查。

26.過(guò)濾器

全局過(guò)濾器Vue.filter('addHobby',(val,hobby)=>{returnval+hobby})

局部過(guò)濾器filters:{addHobby(val,hobby){returnval+hobby}}

27.引入scss

安裝scss依賴包：npm install sass-loader--save-dev?

npm install node-sass--save-dev在build文件夾下修改 webpack.base.conf.js 文件：在module下的 rules 里添加配置臀蛛，如下：{test:/\.scss$/,loaders:['style','css','sass']}應(yīng)用：在vue文件中應(yīng)用scss時(shí)亲桦，需要在style樣式標(biāo)簽上添加lang="scss"，即<style lang="scss">浊仆。

28.axios 的是一種異步請(qǐng)求客峭，用法和ajax類似，安裝npm install axios --save 即可使用抡柿，請(qǐng)求中包括get,post,put, patch ,delete等五種請(qǐng)求方式舔琅，解決跨域可以在請(qǐng)求頭中添加Access-Control-Allow-Origin，也可以在index.js文件中更改proxyTable配置等解決跨域問(wèn)題

29.多個(gè)實(shí)例引用了相同或相似的方法或?qū)傩缘戎蘖樱蓪⑦@些重復(fù)的內(nèi)容抽取出來(lái)作為mixins的js备蚓，export出去，在需要引用的vue文件通過(guò)mixins屬性注入囱稽，與當(dāng)前實(shí)例的其他內(nèi)容進(jìn)行merge

30.vue-cli無(wú)法解決跨域問(wèn)題郊尝。真正解決跨域問(wèn)的是webpack。只不過(guò)vue-cli3.0將webpack的配置繼承到了vue.config.js中战惊，才給初學(xué)者造成了vue-cli可以解決跨域的錯(cuò)覺(jué)虚循。

與在webpack.config.js中配置跨域一樣，在vue.config.js中的devServer:{proxy:{}}字段可以編寫(xiě)跨域配置样傍。

31.vue-cli原理就是通過(guò)node環(huán)境發(fā)起git請(qǐng)求横缔，把預(yù)先設(shè)置好的模板下載下來(lái)

32.vue-router共有三種守衛(wèi)：

1:全局守衛(wèi)：beforeEach,afterEach

2:路由獨(dú)享守衛(wèi)：beforeEnter

3:組件級(jí)別的守衛(wèi)beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave他們執(zhí)行順序：全局》路由》組件

除了afterEach全局后置外，其他的守衛(wèi)中務(wù)必要調(diào)用next(),否則無(wú)法完成導(dǎo)航

還有注意全局前置守衛(wèi)可以用來(lái)進(jìn)行攔截衫哥，（登錄攔截）