vue面試,有這一篇就足夠了(待續更新,收藏不迷路)

安裝:

vue不支持iE8及如下版本的緣由:由於vue使用了ie8沒法模擬的es5特性,  
但它支持全部兼容es5的瀏覽器(兼容性查詢網址Can I Use:https://www.caniuse.com/);  
vue最新穩定版本爲2.6.11;  
使用vue時,推薦在瀏覽器安裝vue devtools插件,咱們能夠更好的修改調試vue;  
vue的引入方式有兩種:1是直接用script引入,2是使用npm或yarn等包管理工具直接下載;  
vue的腳手架的做用:提供了batteries-include的構建設置,而且帶有熱重載保存時lint校驗等等;  
vue腳手架安裝方式:npm install -g @vue/cli或yarn global add @vue/cli  
(注意:這是vue-cli3的安裝方式,若是安裝了舊版本,須要先卸載:npm uninstall vue-cli -g);  
vue建立新項目:vue create my-project或vue ui;  
vue擁有四種構建版本:完整版,只包含運行時版,完整版(生產環境),只包含運行時版(生產環境);  
(注意:官方推薦使用運行時版,能夠節省30%空間)

安裝常見知識點:

1.vue優勢？  
答：輕量級框架：只關注視圖層，是一個構建數據的視圖集合，大小隻有幾十kb；  
簡單易學：國人開發，中文文檔，不存在語言障礙 ，易於理解和學習；  
雙向數據綁定：保留了angular的特色，在數據操做方面更爲簡單；  
組件化：保留了react的優勢，實現了html的封裝和重用，在構建單頁面應用方面有着獨特的優點；  
視圖，數據，結構分離：使數據的更改更爲簡單，不須要進行邏輯代碼的修改，  
只須要操做數據就能完成相關操做；  
虛擬DOM：dom操做是很是耗費性能的， 再也不使用原生的dom操做節點，極大解放dom操做，  
但具體操做的仍是dom不過是換了另外一種方式；  
運行速度更快:相比較與react而言，一樣是操做虛擬dom，就性能而言，vue存在很大的優點。  
2.vue的兩個核心點  
答：數據驅動、組件系統  
數據驅動：ViewModel，保證數據和視圖的一致性。  
組件系統：應用類UI能夠看做所有是由組件樹構成的。  
3.vue和jQuery的區別  
答：jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操做，  
其實和原生的HTML的區別只在於能夠更方便的選取和操做DOM對象，而數據和界面是在一塊兒的。  
好比須要獲取label標籤的內容：$("lable").val();,它仍是依賴DOM元素的值。  
Vue則是經過Vue對象將數據和View徹底分離開來了。對數據進行操做再也不須要引用相應的DOM對象，  
能夠說數據和View是分離的，他們經過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。  
4.單頁面應用和多頁面應用區別及優缺點  
答：單頁面應用（SPA），通俗一點說就是指只有一個主頁面的應用，瀏覽器一開始要加載全部  
必須的 html, js, css。全部的頁面內容都包含在這個所謂的主頁面中。但在寫的時候，仍是會  
分開寫（頁面片斷），而後在交互的時候由路由程序動態載入，單頁面的頁面跳轉，僅刷新局部資源。多應用於pc端。  
多頁面（MPA），就是指一個應用中有多個頁面，頁面跳轉時是整頁刷新  
單頁面的優勢：  
用戶體驗好，快，內容的改變不須要從新加載整個頁面，基於這一點spa對服務器壓力較小；先後端分離；  
頁面效果會比較炫酷（好比切換頁面內容時的專場動畫）。  
單頁面缺點：  
不利於seo；導航不可用，若是必定要導航須要自行實現前進、後退。（因爲是單頁面不能用瀏覽器的前進後退功能，  
因此須要本身創建堆棧管理）；初次加載時耗時多；頁面複雜度提升不少。  
5.mvvm 框架是什麼？  
答：vue是實現了雙向數據綁定的mvvm框架，當視圖改變動新模型層，當模型層改變動新視圖層。  
在vue中，使用了雙向綁定技術，就是View的變化能實時讓Model發生變化，而Model的變化也能實時更新到View。

介紹:

1.vue是什麼?  
答:Vue是一套用於構建用戶界面的漸進式框架.與其餘大型框架不一樣的是,vue被設計爲能夠自底像上逐層引用.  
vue的核心庫只關注圖層,不只上手容易,還方便與第三方庫結合.另外一方面,當vue與現代化工具鏈以及支持類庫結合使用時也徹底  
可以爲複雜的單頁面應用提供驅動.  
2.vue的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進DOM系統;  
指令帶有前綴v-,表示它們是vue提供的特殊 attribute;  
3.過渡效果  
vue在插入,更新,移除DOM的時候,提供多種不一樣方式的應用過渡效果:  
在css過渡和動畫中自動應用css;配合第三方動畫庫,如animate.css;在過渡鉤子函數使用javascript直接操做DOM;配合第三方js動畫庫,  
如Velocity.js;  
4.過渡的類名  
在進入/離開的過渡中,有6個class切換:  
1)v-enter:定義進入過渡的開始狀態.在元素被插入以前生效,在元素被插入以後的下一幀移除.  
2)v-enter-active:定義進入過渡生效時的狀態.在整個進入過渡的階段中應用,在元素被插入以前  
生效,在過渡/動畫完成以後移除.這個類能夠被用來定義進入過渡的過程時間,延遲和曲線函數.  
3)v-enter-to:2.1.8版本及以上定義進入過渡的結束狀態.在元素被插入以後下一幀生效(與此同時v-enter被移除),  
在過渡/動畫完成以後移除.  
4)v-leave:定義離開過渡的開始狀態.在離開過渡被觸發時馬上生效,下一幀被移除.  
5)v-leave-active:定義離開過渡生效時的狀態.在整個離開過渡的階段中應用,在離開過渡  
被觸發時馬上生效,在過渡/動畫完成以後移除.這個類能夠被用來定義離開過渡的過程時間,延遲和曲線函數.  
6)v-leave-to:2.1.8版本及以上定義離開過渡的結束狀態.在離開過渡被觸發以後的下一幀生效(與此同時v-leave被刪除),  
在過渡/動畫完成以後移除.  
總結:v-enter=>v-enter-to=>v-leave=>v-leave-to,在v-enter到v-enter-to之間,有v-enter-active,  
在v-leave到v-leave-to之間,存在v-leave-active.  
5.過渡模式  
in-out:新元素先進行過渡,完成以後當前元素過渡離開.  
out-in:當前元素先進行過渡,完成以後新元素過渡進入.  
6.動態組件  
在tab頁面切換時,推薦使用動態組件.v-bind:is="currentTabComponent",此處的currentTabComponent能夠包括已註冊組件的名字或  
一個組件的選項對象.  
可是在tab切換的時候,若是咱們想要點擊tab切換以後,緩存咱們以前的操做頁面,能夠在動態組件外面套用<keep-alive></keep-alive>,  
這樣的話失活的組件將會被緩存.  
7.異步組件  
new Vue({  
 components:{ 'my-component':()=>import('./my-async-component') }});  
推薦作法是將異步組件和webpack的code-spliting功能一塊兒配合使用,如  
Vue.component('async-webpack-example',function(resolve){  
 // 這個特殊的\`require\`語法將會告訴webpack // 自動將你的構建代碼切割成多個包,這些包 // 會經過ajax請求加載 require(\['./my-async-component'\],resolve)})

介紹常見知識點:

1.vue與其餘框架的對比?  
答:vue和react類似之處:使用了virtual Dom;提供了響應式(reactive)和組件化(composable)的視圖組件;將注意力集中保持在  
核心庫,而將其餘功能如路由和全局狀態管理交給相關的庫.  
vue與react和angular不一樣之處:  
1)運行時的性能:  
在react應用中,當某個組件的狀態發生變化時,他會以該組件爲根,從新渲染整個組件子樹.  
若是避免沒必要要的子組件重複渲染,須要在全部可能的地方使用PureComponent,或者是手動實現shouldComponentUpdate方法.  
同時,你可能會須要使用不可變的數據結構來使得你的組件更容易被優化,可是使用PureComponent和shouldComponentUpdate時,須要  
保證該組件的整個子樹的渲染輸出都是由該組件的props決定的.若是不符合這個狀況,那麼此類優化就會致使難以察覺  
的渲染結果不一致;  
在vue應用中,組件的依賴是在渲染過程當中自動跟蹤的,因此係統能精確知曉哪一個組件確實須要被重渲染.  
能夠理解爲每個組件都已經自動獲取了shouldComponentUpdate,而且沒有上述的子樹問題限制;  
在angular應用中,當watcher愈來愈多時,會變得愈來愈慢,由於做用域的每一次變化,全部的watcher都要從新計算.  
而且,若是一些watcher觸發另外一個更新,髒檢查循環(digest cycle)可能要運行屢次.  
angular用戶經常要使用深奧的技術,來解決髒檢查循環的問題.但vue沒有這個問題,它不使用髒  
檢查,它是基於依賴跟蹤的觀察系統而且異步隊列更新,全部的數據變化都是獨立觸發的,除非它們之間有明確的依賴關係.  
2)HTML&CSS:  
在react應用中,使用了jsx,jsx是使用XML語法編寫的js的一種語法糖.  
使用jsx的渲染函數有下面這些優點:你可使用完整的編程語言javascript功能來構建你的視圖頁面.好比你可使用臨時變量,  
js自帶的流程控制,以及直接引用當前js做用域中的值等;開發工具對jsx的支持相比於現有可用的vue模板仍是比較先進的  
(好比,linting,類型檢查,編輯器的自動完成).  
在vue應用中,使用了模板template.  
模板template相對於jsx的優點:模板更容易接受和讀寫,使用者不須要單獨學習XML語法,下降學習成本,上手容易;  
基於HTML的模板使得將已有的應用逐步遷移到vue更容易;讓設計圖和新人開發者更容易理解和參與到項目中;  
可使用其餘模板預處理器,好比Pug來書寫Vue的模板.從抽象的角度來看,更推薦在偏視圖表現類的組件裏使用模板,在  
偏邏輯的組件中使用jsx和渲染函數.  
3)組件做用域的Css  
這裏react和vue的主要區別是,vue設置樣式的默認方法是單文件組件裏相似style的標籤.大部分狀況下,咱們都會在style  
裏面添加一個scoped屬性,該屬性會自動添加一個惟一的屬性(好比 data-v-2155b78)爲組件內css指定做用域,  
編譯的時候,會在css類目後面添加\[data-v-2155b78\].最後,vue的單文件組件裏的樣式  
設置是很是靈活的,經過vue-loader,可使用任意預處理器,後處理器,甚至深度集成css module---所有都在<style>標籤內.  
4)路由庫和狀態管理庫  
react把路由庫和狀態管理庫交給社區維護;  
vue把路由庫和狀態管理庫交給官方維護,而且與核心庫同步更新;  
5)學習曲線  
react學習曲線陡峭,在學習react以前,你須要知道jsx和es2015,須要學習構建系統;  
angular學習曲線很是陡峭,由於angular自己的設計目的,就是針對大型複雜的應用,學習成本高;  
vue學習曲線教平和,向上擴展比如react,向下擴展就相似jquery,只須要引入script便可,入手容易簡單;  
6)原生渲染  
react native能夠用相同的組件模型編寫有本地渲染能力的App(ios和android).能同時跨多平臺開發;  
vue此處還處於劣勢,雖然vue和weex進行合做,可是weex基本上已經被阿里巴巴放棄了;  
7)語法  
vue的一些語法和angular很類似(例如 v-if和ng-if).由於angular是vue早期開發的靈感來源.可是angular中存在的許  
多問題(好比髒檢查),在vue中已經避免和解決.  
8)組件和指令  
在vue中指令和組件分的更清晰.指令只封裝DOM操做,而組件表明了一個自給自足的獨立單元--有本身的視圖和數據邏輯.  
在angular中,每件事都由指令來作,而組件只是一個特殊的指令.  
9)數據綁定  
angular使用了雙向綁定  
vue在不一樣組件間,強制使用單向數據流.  
2.v-if和v-show的區別?  
答:共同點：都能控制元素的顯示和隱藏；  
不一樣點：實現本質方法不一樣，v-show本質就是經過控制css中的display設置爲none，控制隱藏，只會編譯一次；  
v-if是動態的向DOM樹內添加或者刪除DOM元素，若初始值爲false，就不會編譯了。並且v-if不停的銷燬和建立比較消耗性能。  
總結：若是要頻繁切換某節點，使用v-show(切換開銷比較小，初始開銷較大)。若是不須要頻繁切換某節點使  
用v-if（初始渲染開銷較小，切換開銷比較大）。  
優先級:當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級，這意味着 v-if 將分別重複運行於每一個 v-for 循環中。  
因此，不推薦v-if和v-for同時使用。  
若是v-if和v-for一塊兒用的話，vue中的的會自動提示v-if應該放到外層去。  
3.當插入或刪除包含在transition組件中元素時,vue作了哪些處理?  
答:1)自動嗅探目標元素是否應用了css過渡或動畫,若是是,在恰當的時機添加/刪除css類名;  
2)若是過渡組件提供了js鉤子函數,這些鉤子函數會在恰當的時機被調用;  
3)若是沒有找到js鉤子函數或css過渡/動畫,DOM操做(插入/刪除)在下一幀中當即執行.  
(注意:此指瀏覽器逐幀動畫機制,和vue的nextTick概念不一樣).  
4.爲何使用key?  
答：須要使用key來給每一個節點作一個惟一標識，Diff算法就能夠正確的識別此節點。  
做用主要是爲了高效的更新虛擬DOM.  
5.說出幾種vue當中的指令和它的用法？  
答：v-model雙向數據綁定；  
v-for循環；  
v-if v-show 顯示與隱藏；  
v-on事件；v-once: 只綁定一次。  
6.v-model的使用?  
答：v-model用於表單數據的雙向綁定,其實它就是一個語法糖，這個背後就作了兩個操做：  
v-bind綁定一個value屬性；  
v-on指令給當前元素綁定input事件。  
7.vue中雙向數據綁定是如何實現的？  
答：vue雙向數據綁定是經過數據劫持結合發佈訂閱模式的方式來實現的， 也就是說數據和視圖同步，數據發生變化，視圖跟着變化，  
視圖變化，數據也隨之發生改變；  
核心:關於vue雙向數據綁定,其核心是Object.defineProperty()方法。  
8.css動畫和css過渡的區別?  
答:在動畫中v-enter類名在節點插入dom後不會當即刪除,而是在animationend事件觸發時刪除.  
9.在一些場景中,須要給同一個元素設置多種過渡動效,好比animation很快的被觸發並完成了,  
可是transition效果還沒結束,這種狀況怎麼處理?  
答:須要使用type attribute並設置animation或transition來明確聲明你須要vue監聽的類型.  
10.v-on能夠監聽多個方法嗎？  
答：能夠，栗子：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。

vue實例

1.vue實例在建立的時候,經歷的過程:設置數據監聽,編譯模板,將實例掛載到DOM並在數據變化時更新DOM.  
2.不要在選項屬性或回調上使用箭頭函數,好比created:()=>console.log(this.a)或  
vm.$watch('a',newValue=>this.myMethod()).由於箭頭函數並無this,this會做爲變量一直  
向上級詞法做用域查找,直到找到爲止,常常致使Uncaught TypeError:Cannot read property of undefined或  
Uncaught TypeError:this.myMethod is not a function 之類的錯誤.  
3.vue的生命週期函數:beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyed

vue實例常見知識點

1.簡述每一個週期具體適合哪些場景?  
答:beforeCreate：在new一個vue實例後，只有一些默認的生命週期鉤子和默認事件，其餘的東西都還沒建立。在beforeCreate生命  
週期執行的時候，data和methods中的數據都尚未初始化。不能在這個階段使用data中的數據和methods中的方法  
 create：data 和 methods都已經被初始化好了，若是要調用 methods中的方法,或者操做data 中的數據，最先能夠在這個階段中操做 beforeMount：執行到這個鉤子的時候，在內存中已經編譯好了模板了，可是尚未掛載到頁面中，此時，頁面仍是舊的 mounted：執行到這個鉤子的時候，就表示Vue實例已經初始化完成了。此時組件脫離了建立階段，進入到了運行階段。若是咱們想要通 過插件操做頁面上的DOM節點，最先能夠在和這個階段中進行 beforeUpdate： 當執行這個鉤子時，頁面中的顯示的數據仍是舊的，data中的數據是更新後的， 頁面尚未和最新的數據保持同步 updated：頁面顯示的數據和data中的數據已經保持同步了，都是最新的 beforeDestory：Vue實例從運行階段進入到了銷燬階段，這個時候上全部的 data 和 methods ，指令，過濾器 ……都是處於可用狀 態。尚未真正被銷燬 destroyed： 這個時候上全部的 data 和 methods ， 指令， 過濾器 ……都是處於不可用狀態。組件已經被銷燬了。
2.第一次頁面加載會觸發哪幾個鉤子?  
答:beforeCreate,created,beforeMount,mounted  
3.created和mounted的區別?  
答：created:在模板渲染成html前調用，即一般初始化某些屬性值，而後再渲染成視圖。  
mounted:在模板渲染成html後調用，一般是初始化頁面完成後，再對html的dom節點進行一些須要的操做。  
4.vue獲取數據在哪一個周期函數  
答：通常 created/beforeMount/mounted 皆可.  
好比若是你要操做 DOM , 那確定 mounted 時候才能操做.  
5.mvvm 框架是什麼？  
答:vue是實現了雙向數據綁定的mvvm框架，當視圖改變動新模型層，當模型層改變動新視圖層。  
在vue中，使用了雙向綁定技術，就是View的變化能實時讓Model發生變化，而Model的變化也能實時更新到View。  
6.請詳細說下你對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結構依然存在。  
7.vue初始化頁面閃動問題?  
答：使用vue開發時，在vue初始化以前，因爲div是不歸vue管的，因此咱們寫的代碼在尚未解析的狀況下會容易出現花屏現象，  
看到相似於{{message}}的字樣，雖然通常狀況下這個時間很短暫，可是咱們仍是有必要讓解決這個問題的。  
首先：在css里加上\[v-cloak\] {  
 display: none; }。若是沒有完全解決問題，則在根元素加上 :  
8.SPA首屏加載慢如何解決  
答：安裝動態懶加載所需插件；使用CDN資源。  
9.vue組件中data爲何必須是一個函數？  
答：由於JavaScript的特性所致使，在component中，data必須以函數的形式存在，不能夠是對象。  
組建中的data寫成一個函數，數據以函數返回值的形式定義，這樣每次複用組件的時候，都會返回一份新的data，  
至關於每一個組件實例都有本身私有的數據空間，它們只負責各自維護的數據，不會形成混亂。而單純的寫成對象形式,就是全部的組件實  
例共用了一個data，這樣改一個全都改了。  
10.$nextTick的使用  
答：當你修改了data的值而後立刻獲取這個dom元素的值，是不能獲取到更新後的值，  
你須要使用$nextTick這個回調，讓修改後的data值渲染更新到dom元素以後在獲取，才能成功  
11.vue父組件子組件傳遞數據？  
答：父組件傳子組件經過props,子組件傳父組件經過$emit方法  
12.如何獲取dom?  
答：ref="domName" 用法：this.$refs.domName  
13.如何讓CSS只在當前組件中起做用？  
答：在組件中的style前面加上scoped  
14.<keep-alive></keep-alive>的做用是什麼?  
答:keep-alive 是 Vue 內置的一個組件，可使被包含的組件保留狀態，或避免從新渲染。  
15.請說出vue.cli項目中src目錄每一個文件夾和文件的用法？  
答：assets文件夾是放靜態資源；components是放組件,router是定義路由相關的配置;app.vue是一個應用主組件；main.js是入口文件。  
16.分別簡述computed和watch的使用場景  
答：computed:  
 當一個屬性受多個屬性影響的時候就須要用到computed 最典型的栗子： 購物車商品結算的時候 watch: 當一條數據影響多條數據的時候就須要用watch 栗子：搜索數據17.assets和static的區別  
答：  
相同點：assets和static兩個都是存放靜態資源文件。項目中所須要的資源文件圖片，字體圖標，樣式文件等均可以放在這兩個文件下，  
這是相同點  
不相同點：assets中存放的靜態資源文件在項目打包時，也就是運行npm run build時會將assets中放置的靜態資源文件進行打包上傳，  
 所謂打包簡單點能夠理解爲壓縮體積，代碼格式化。而壓縮後的靜態資源文件最終也都會放置在static文件中跟着index.html一同 上傳至服務器。 static中放置的靜態資源文件就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至服務器。 由於避免了壓縮直接進行上傳，在打包時會提升必定的效率，可是static中的資源文件因爲沒有進行壓縮等操做，因此文件的體積也 就相對於assets中打包後的文件提交較大點。在服務器中就會佔據更大的空間。建議：將項目中template須要的樣式文件js文件等均可以放置在assets中，走打包這一流程。減小體積。而項目中引入的第三方的資源文  
件如iconfoont.css等文件能夠放置在static中，  
由於這些引入的第三方文件已經通過處理，咱們再也不須要處理，直接上傳。  
18.vue經常使用的修飾符  
答：.stop：等同於JavaScript中的event.stopPropagation()，防止事件冒泡；  
 .prevent：等同於JavaScript中的event.preventDefault()，防止執行預設的行爲（若是事件可取消，則取消該事件， 而不中止事件的進一步傳播）； .capture：與事件冒泡的方向相反，事件捕獲由外到內； .self：只會觸發本身範圍內的事件，不包含子元素； .once：只會觸發一次。

模板語法

1.Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，Vue 可以智能地計算出最少須要從新渲染多少組件，並把DOM操做次數減到最少。  
 1)文本:數據綁定最多見的形式就是使用「Mustache」語法 (雙大括號) 的文本插值：<span>Message: {{ msg }}</span> 經過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。 
 2)原始HTML:雙大括號會將數據解釋爲普通文本，而非 HTML 代碼。爲了輸出真正的 HTML，你須要使用 v-html 指令. 注意事項:你的站點上動態渲染的任意 HTML 可能會很是危險，由於它很容易致使 XSS 攻擊。請只對可信內容使用 HTML 插值， 毫不要對用戶提供的內容使用插值。   3)Attribute:Mustache 語法不能做用在 HTML attribute 上，遇到這種狀況應該使用 v-bind 指令 注意事項:若是 isButtonDisabled 的值是 null、undefined 或 false，則 disabled attribute 甚至不會被包含 在渲染出來的 <button> 元素中。 
 4)使用 JavaScript 表達式:每一個綁定都只能包含單個表達式，因此下面的例子都不會生效。                       <!-- 這是語句，不是表達式 -->  
 {{ var a = 1 }}                       <!-- 流控制也不會生效，請使用三元表達式 -->  
 {{ if (ok) { return message } }} 注意事項:模板表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如 Math 和 Date 。你不該該在模板表達式中試圖 訪問用戶定義的全局變量
2.指令 (Directives) 是帶有 v- 前綴的特殊 attribute。指令 attribute 的值預期是單個 JavaScript 表達式 (v-for 是例外狀況，稍後咱們再討論)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。  
 1)參數:v-bind 指令能夠用於響應式地更新 HTML attribute;v-on 指令，它用於監聽 DOM 事件 
 2)動態參數:從 2.6.0 開始，能夠用方括號括起來的 JavaScript 表達式做爲一個指令的參數 <!-- 注意，參數表達式的寫法存在一些約束，如以後的「對動態參數表達式的約束」章節所述。 --> <a v-bind:\[attributeName\]="url"> ... </a> 例如，若是你的 Vue 實例有一個 data 屬性 attributeName，其值爲 "href"，那麼這個綁定將等價於 v-bind:href。 一樣地，你可使用動態參數爲一個動態的事件名綁定處理函數：     <a v-on:\[eventName\]="doSomething"> ... </a>  
 在這個示例中，當 eventName 的值爲 "focus" 時，v-on:\[eventName\] 將等價於 v-on:focus。 動態參數預期會求出一個字符串，異常狀況下值爲 null。這個特殊的 null 值能夠被顯性地用於移除綁定。任何其它非字符串 類型的值都將會觸發一個警告。 
 3)修飾符:修飾符 (modifier) 是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符 告訴 v-on 指令對於觸發的事件調用 event.preventDefault()
3.縮寫:v-bind 縮寫  
 <!-- 完整語法 --> <a v-bind:href="url">...</a>      <!-- 縮寫 -->  
 <a :href="url">...</a> …      v-on 縮寫  
 <!-- 完整語法 --> <a v-on:click="doSomething">...</a>      <!-- 縮寫 -->  
 <a @click="doSomething">...</a> …

模板語法常見知識點

1.動態參數表達式有一些語法約束，由於某些字符，如空格和引號，放在 HTML attribute 名裏是無效的。例如：  
   <!-- 這會觸發一個編譯警告 -->  
 <a v-bind:\['foo' + bar\]="value"> ... </a> 變通的辦法是使用沒有空格或引號的表達式，或用計算屬性替代這種複雜表達式。   在 DOM 中使用模板時 (直接在一個 HTML 文件裏撰寫模板)，還須要避免使用大寫字符來命名鍵名，  
 由於瀏覽器會把 attribute 名所有強制轉爲小寫：   <!--  
 在 DOM 中使用模板時這段代碼會被轉換爲 \`v-bind:\[someattr\]\`。 除非在實例中有一個名爲「someattr」的 property，不然代碼不會工做。 --> <a v-bind:\[someAttr\]="value"> ... </a>
2.vue經常使用的修飾符  
 答：.stop：等同於JavaScript中的event.stopPropagation()，防止事件冒泡； .prevent：等同於JavaScript中的event.preventDefault()，防止執行預設的行爲 （若是事件可取消，則取消該事件，而不中止事件的進一步傳播）； .capture：與事件冒泡的方向相反，事件捕獲由外到內； .self：只會觸發本身範圍內的事件，不包含子元素； .once：只會觸發一次
3.delete和Vue.delete刪除數組的區別  
 答：delete只是被刪除的元素變成了 empty/undefined 其餘的元素的鍵值仍是不變。Vue.delete直接刪除了數組改變了數組的鍵值。

計算屬性和偵聽器

1.計算屬性:  
 1)基礎例子:計算屬性的 getter 函數是沒有反作用 (side effect) 的，這使它更易於測試和理解。 
 2)計算屬性緩存 vs 方法: 兩種方式的最終結果確實是徹底相同的。 然而，不一樣的是計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們纔會從新求值。 這就意味着只要 message 尚未發生改變，屢次訪問 reversedMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。                  這也一樣意味着下面的計算屬性將再也不更新，由於 Date.now() 不是響應式依賴：  
                  computed: {  
 now: function () { return Date.now() } } 相比之下，每當觸發從新渲染時，調用方法將總會再次執行函數。 爲何須要緩存？假設咱們有一個性能開銷比較大的計算屬性 A，它須要遍歷一個巨大的數組並作大量的計算。而後咱們可能有 其餘的計算屬性依賴於 A 。若是沒有緩存，咱們將不可避免的屢次執行 A 的 getter！若是你不但願有緩存，請用方法來替代。 
 3)計算屬性VS偵聽屬性: Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變更：偵聽屬性。 <div id="demo">{{ fullName }}</div> var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }) 上面代碼是命令式且重複的。將它與計算屬性的版本進行比較：     var vm = new Vue({  
 el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) 好得多了，不是嗎？ 
 4)計算屬性的 setter: 計算屬性默認只有 getter ，不過在須要時你也能夠提供一個 setter ：     // ...  
 computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names\[0\] this.lastName = names\[names.length - 1\] } } } // ... 如今再運行 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName 也會相應地被更新。
2.偵聽器:  
 雖然計算屬性在大多數狀況下更合適，但有時也須要一個自定義的偵聽器。這就是爲何 Vue 經過 watch 選項提供了 一個更通用的方法，來響應數據的變化。當須要在數據變化時執行異步或開銷較大的操做時，這個方式是最有用的。 watch: { // 若是 \`question\` 發生改變，這個函數就會運行 question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...' this.debouncedGetAnswer() } } 在這個示例中，使用 watch 選項容許咱們執行異步操做 (訪問一個 API)，限制咱們執行該操做的頻率，並在咱們獲得最終結果前， 設置中間狀態。這些都是計算屬性沒法作到的。

計算屬性和偵聽器常見知識點

1.分別簡述computed和watch的使用場景  
答：computed:  
 當一個屬性受多個屬性影響的時候就須要用到computed 最典型的場景： 購物車商品結算的時候 watch: 當一條數據影響多條數據的時候就須要用watch 場景：搜索數據
2.v-on能夠監聽多個方法嗎？  
答：能夠，<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">  
3.手寫一個watch監聽?  
答:watch: {  
 year: {
    handler (newValue, oldValue) {
       console.log('時間又過去了1年，今年是' + newValue)            console.log('新值是' + newValue + ',舊值是' + oldValue) 
       }, 
    immediate: true, 
    deep: false 
    },
}