Vue理論筆記

　　

　　vue優勢？

　　　　輕量級框架：只關注視圖層，是一個構建數據的視圖集合，
　　　　簡單易學：國人開發，中文文檔，不存在語言障礙 ，易於理解和學習；
　　　　雙向數據綁定：保留了angular的特色，在數據操做方面更爲簡單；
　　　　組件化：保留了react的優勢，實現了html的封裝和重用，在構建單頁面應用方面有着獨特的優點；
　　　　視圖，數據，結構分離：使數據的更改更爲簡單，不須要進行邏輯代碼的修改，只須要操做數據就能完成相關操做；
　　　　虛擬DOM：dom操做是很是耗費性能的， 再也不使用原生的dom操做節點，極大解放dom操做，但具體操做的仍是dom不過是換了另外一種方式；
　　　　運行速度更快:相比較與react而言，一樣是操做虛擬dom，就性能而言，vue存在很大的優點。

　　v-show和v-if指令的共同點和不一樣點？

1. 答: 共同點：都能控制元素的顯示和隱藏；
2. 不一樣點：實現本質方法不一樣，v-show本質就是經過控制css中的display設置爲none，控制隱藏，只會編譯一次；v-if是動態的向DOM樹內添加或者刪除DOM元素，若初始值爲false，就不會編譯了。並且v-if不停的銷燬和建立比較消耗性能。
   總結：若是要頻繁切換某節點，使用v-show(切換開銷比較小，初始開銷較大)。若是不須要頻繁切換某節點使用v-if（初始渲染開銷較小，切換開銷比較大）。
3. 如何讓CSS只在當前組件中起做用？
   答：在組件中的style前面加上scoped
4. <keep-alive></keep-alive>的做用是什麼?
   答:keep-alive 是 Vue 內置的一個組件，可使被包含的組件保留狀態，或避免從新渲染。
5. 如何獲取dom?
   答：ref="domName" 用法：this.$refs.domName
6.  vue-loader是什麼？使用它的用途有哪些？
   答：vue文件的一個加載器，將template/js/style轉換成js模塊。
   用途：js能夠寫es六、style樣式能夠scss或less、template能夠加jade等
7. 爲何使用key?
   答：須要使用key來給每一個節點作一個惟一標識，Diff算法就能夠正確的識別此節點。
   做用主要是爲了高效的更新虛擬DOM。
8. 請說出vue.cli項目中src目錄每一個文件夾和文件的用法？
   答：assets文件夾是放靜態資源；components是放組件；router是定義路由相關的配置; app.vue是一個應用主組件；main.js是入口文件。
9. 分別簡述computed和watch的使用場景
   答：computed:
   　　　　當一個屬性受多個屬性影響的時候就須要用到computed
   　　　　最典型的例子： 購物車商品結算的時候
   watch:
   　　　　當一條數據影響多條數據的時候就須要用watch
   　　　　例子：搜索數據
10. $nextTick的使用
    答：當你修改了data的值而後立刻獲取這個dom元素的值，是不能獲取到更新後的值，你須要使用$nextTick這個回調，讓修改後的data值渲染更新到dom元素以後在獲取，才能成功。
11. vue組件中data爲何必須是一個函數？
    答：由於JavaScript的特性所致使，在component中，data必須以函數的形式存在，不能夠是對象。
    　　組建中的data寫成一個函數，數據以函數返回值的形式定義，這樣每次複用組件的時候，都會返回一份新的data，至關於每一個組件實例都有本身私有的數據空間，它們只負責各自維護的數據，不會形成混亂。而單純的寫成對象形式，就是全部的組件實例共用了一個data，這樣改一個全都改了。
12. v-if和v-for的優先級
    答：當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級，這意味着 v-if 將分別重複運行於每一個 v-for 循環中。因此，不推薦v-if和v-for同時使用。
    若是v-if和v-for一塊兒用的話，vue中的的會自動提示v-if應該放到外層去。
13. vue的兩個核心點
    答：數據驅動、組件系統
    數據驅動：ViewModel，保證數據和視圖的一致性。
    組件系統：應用類UI能夠看做所有是由組件樹構成的。
14. .vue和jQuery的區別
    答：jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操做，其實和原生的HTML的區別只在於能夠更方便的選取和操做DOM對象，而數據和界面是在一塊兒的。好比須要獲取label標籤的內容：$("lable").val();,它仍是依賴DOM元素的值。
    Vue則是經過Vue對象將數據和View徹底分離開來了。對數據進行操做再也不須要引用相應的DOM對象，能夠說數據和View是分離的，他們經過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。
15. 引進組件的步驟
    答: 在template中引入組件；
    在script的第一行用import引入路徑；
    用component中寫上組件名稱。
16. SPA首屏加載慢如何解決
    答：安裝動態懶加載所需插件；使用CDN資源。
17. delete和Vue.delete刪除數組的區別
    答：delete只是被刪除的元素變成了 empty/undefined 其餘的元素的鍵值仍是不變。Vue.delete 直接刪除了數組 改變了數組的鍵值。
18. Vue-router跳轉和location.href有什麼區別
    答：使用location.href='/url'來跳轉，簡單方便，可是刷新了頁面；
    使用history.pushState('/url')，無刷新頁面，靜態跳轉；
    引進router，而後使用router.push('/url')來跳轉，使用了diff算法，實現了按需加載，減小了dom的消耗。
    其實使用router跳轉和使用history.pushState()沒什麼差異的，由於vue-router就是用了history.pushState()，尤爲是在history模式下。
19. vue slot
    答：簡單來講，假如父組件須要在子組件內放一些DOM，那麼這些DOM是顯示、不顯示、在哪一個地方顯示、如何顯示，就是slot分發負責的活。
20. Vue裏面router-link在電腦上有用，在安卓上沒反應怎麼解決？
    答：Vue路由在Android機上有問題，babel問題，安裝babel polypill插件解決。
21. Vue2中註冊在router-link上事件無效解決方法
    答： 使用@click.native。緣由：router-link會阻止click事件，.native指直接監聽一個原生事件。
22. RouterLink在IE和Firefox中不起做用（路由不跳轉）的問題
    答: 方法一：只用a標籤，不適用button標籤；方法二：使用button標籤和Router.navigate方法
23. axios的特色有哪些
    答：從瀏覽器中建立XMLHttpRequests；
    node.js建立http請求；
    支持Promise API；
    攔截請求和響應；
    轉換請求數據和響應數據；
    取消請求；
    自動換成json。
    axios中的發送字段的參數是data跟params兩個，二者的區別在於params是跟請求地址一塊兒發送的，data的做爲一個請求體進行發送
    params通常適用於get請求，data通常適用於post put 請求。
24. .params和query的區別
    答：用法：query要用path來引入，params要用name來引入，接收參數都是相似的，分別是this.$route.query.name和this.$route.params.name。
    url地址顯示：query更加相似於咱們ajax中get傳參，params則相似於post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，後者則不顯示
    注意點：query刷新不會丟失query裏面的數據
    params刷新 會 丟失 params裏面的數據。
25. vue更新數組時觸發視圖更新的方法
    答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()
26. vue經常使用的UI組件庫
    答：Mint UI，element，VUX
27. 第一次頁面加載會觸發哪幾個鉤子？
    答：beforeCreate， created， beforeMount， mounted

　　　　生命週期鉤子函數共有11種：

　　　　beforeCreate--->created

　　　　beforeMounte--->mounted

　　　　beforeUpdate--->update

　　　　beforeDestroy--->destoryed

　　　　activated活躍狀態 當前組件顯示時執行的生命週期

　　　　deactivated 緩存狀態  當前組件緩存時執行的生命週期

　　　　errorCaptured 當捕獲一個來自子組件錯誤時被調用

　　2七、vue獲取數據在哪一個周期函數
　　　　答：通常 created/beforeMount/mounted 皆可.
　　　　好比若是你要操做 DOM , 那確定 mounted 時候才能操做.

　　2八、vue-router 是什麼?它有哪些組件

　　　　答：vue用來寫路由一個插件。router-link、router-view

　　2九、active-class 是哪一個組件的屬性？

　　　　答：vue-router模塊的router-link組件。children數組來定義子路由

　　30、怎麼定義 vue-router 的動態路由? 怎麼獲取傳過來的值？

　　　　答：在router目錄下的index.js文件中，對path屬性加上/:id。 使用router對象的params.id。

　　3一、vue-router 有哪幾種導航鉤子?

　　　　答：三種，

　　　　第一種：是全局導航鉤子：router.beforeEach(to,from,next)，做用：跳轉前進行判斷攔截。

　　　　第二種：組件內的鉤子

　　　　第三種：單獨路由獨享組件

　　3二、$route 和 $router 的區別

　　　　答：$router是VueRouter的實例，在script標籤中想要導航到不一樣的URL,使用$router.push方法。返回上一個歷史history用$router.to(-1)

　　　　　　$route爲當前router跳轉對象。裏面能夠獲取當前路由的name,path,query,parmas等。

　　3三、vue-router的兩種模式

　　　　答:hash模式：即地址欄 URL 中的 # 符號；

　　　　history模式：window.history對象打印出來能夠看到裏邊提供的方法和記錄長度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（須要特定瀏覽器支持）。

　　3四、vue-router實現路由懶加載（ 動態加載路由 ）

　　　　答:三種方式

　　　　第一種：vue異步組件技術 ==== 異步加載，vue-router配置路由 , 使用vue的異步組件技術 , 能夠實現按需加載 .可是,這種狀況下一個組件生成一個js文件。

　　　　第二種：路由懶加載(使用import)。

　　　　第三種：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技術，也能夠實現按需加載。這種狀況下，多個路由指定相同的chunkName，會合並打包成一個js文件。

　　3五、vuex是什麼？怎麼使用？哪一種功能場景使用它？

　　　　答：vue框架中狀態管理。在main.js引入store，注入。

　　　　　　新建了一個目錄store.js，….. export 。

　　　　　　場景有：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車

　　3六、vuex有哪幾種屬性？

　　　　答：有五種，分別是 State、 Getter、Mutation 、Action、 Module

　　　　　　state => 基本數據(數據源存放地)

　　　　　　getters => 從基本數據派生出來的數據

　　　　　　mutations => 提交更改數據的方法，同步！

　　　　　　actions => 像一個裝飾器，包裹mutations，使之能夠異步。

　　　　　　modules => 模塊化Vuex