知識點總結 VUE部分

時間 2019-12-09

標籤知識總結 vue 部分简体版

原文原文鏈接

一、v-show和v-if的區別css

　　v-show　　操做的是元素的display屬性html

　　v-if　　操做的是元素的建立和插入前端

　　v-if有更高的開銷，而v-show有更高的初始渲染開銷，若是須要很是頻繁的切換，則使用v-show更好，若是在運行時條件不多改變，則使用v-if更好vue

　　使用場景：v-show----前臺數據的展現　　v-if----管理系統權限列表的展現node

二、methods、computed、watch三者的區別webpack

　　三者的共同點：ios

　　　　methods、computed、watch都是以函數爲基礎的nginx

　　　　computed與watch都是以vue的依賴爲基礎，當所依賴的數據發生變化的時候會觸發相關的函數去實現數據的變更web

　　　　methods裏是用來定義函數的，須要手動才能執行，不想computed和watch是「自動執行」函數ajax

　　三者的不一樣點：

　　　　computed是計算屬性，computed所依賴的屬性發生變化是，計算屬性纔會從新計算，並進行緩存。當其餘數據發生改變的時候computed屬性不會從新計算，從而提高性能

　　　　watch：

　　　　　　a、watch相似於事件監聽+事件機制

　　　　　　b、watch的方法默認是不會執行的，只有依賴的屬性發生變化纔會執行

　　　　　　c、watch默認第一次是不會執行的，經過聲明immediate選項爲true能夠當即執行一次handler

　　　　　　d、watch用在監聽數據變化，給後臺發送數據請求

　　　　　　e、watch中的handler默認只能監聽屬性引用的變化，但內部屬性是監聽不到的，設置deep爲true能夠進行深度監聽，可是性能開銷也會變大

　　　　　　f、watch沒法監聽數據值的變化（特殊狀況下）

　　computed和watch的使用場景：

　　　　computed一個數據受多個數據的影響　　例如：商品購物車的結算，過濾某些商品數據

　　　　watch一個數據影響多個數據　　例如：網絡請求、瀏覽器自適應、監控路由對象

三、watch沒法監聽數組的狀況，以及解決方案

　　沒法監聽數組的狀況：

　　　　a、利用索引直接設置一個數組項時，例如：arr[indexOfItem]=newValue　　

　　　　b、修改數組的長度時，例如：arr.length=newLength

　　解決方案：

　　　　a、this.$set(arr,index,newVal)

　　　　b、使用數組splice方法

四、如何給一個響應式對象中添加一個屬性？如何刪除響應式對象中的屬性？

        import Vue from "vue"
        new Vue({
            data:{
                obj:{

                }
            }
        })
        Vue.set(obj,name,"孫藝珍")
        Vue.delete(obj,"name")

五、vue中自定義指令如何使用

　　Vue.directive()

　　參數一：指令名稱

　　參數二：指令實現的函數，在回調函數中參數一是指令綁定的元素，參數二是一個對象，對象中有value屬性表明的是表達式返回的結果，還有modifiers屬性是指令的修飾符

六、vue中組件建立的方式有哪些

　　全局組件：Vue.component()

　　　　參數一：組件名稱

　　　　參數二：組件的配置項

　　局部組件：new Vue({

　　　　　　　　　components:{}　　key值爲組件名稱，val值爲組件的配置項　

　　　　　　　})

七、vue中的過濾器如何使用

　　vue.filter()

　　　　參數一：過濾器名稱

　　　　參數二：過濾器實現的方法，該方法中有兩個參數，分別爲須要過濾的數據、過濾器傳遞的參數

八、vue中組件通信的方式有哪些

　　父傳子：

　　　　經過綁定自定義屬性，經過props接收

　　子傳父：

　　　　a、經過綁定自定義事件

　　　　b、經過插槽做用域

　　非父子組件傳值：

　　　　a、建立公共的vue實例對象

　　　　b、EventBus

　　　　c、手動封裝事件訂閱

　　　　d、vuex

九、vue的生命週期

　　beforeCreate()　　組件剛剛被建立（el和data未初始化）

　　created()　　組件建立已完成，屬性已綁定，但DOM還未生成（$el屬性還不存在）

　　beforeMount()　　模板掛載前（el和data初始化）

　　mounted()　　掛載後

　　beforeUpdate()　　組件更新前

　　updated()　　組件更新後

　　beforeDestroy()　　組件銷燬前

　　destroyed()　　組件銷燬後

十、vue中的單向數據流

　　數據從父組件傳遞給子組件，只能單向綁定，子組件不能直接修改從父級傳遞過來的數據

　　數據只能從一個方向來修改狀態，若是父組件給n個子組件進行了數據傳遞，那麼某一個子組件中修改了這個數據，那麼就會致使其餘組件中的數據也會發生改變。這樣會防止從子組件中意外改變父組件的狀態，從而致使你的應用數據的流向難以理解，所以數據只能從一個方向來修改狀態

十一、什麼是動態組件，如何使用，以及keep-alive的做用

　　動態組件：讓多個組件使用同一個掛載點，並動態進行切換

　　實現動態組件：經過保留<component></component>元素，動態的綁定它的is屬性，能夠實現動態組件

　　<keep-alive></keep-alive>是一個抽象組件，它自身不會渲染成一個DOM元素

　　經常使用的一些屬性：

　　　　include：類型：字符串或者正則表達式

　　　　　　　　解釋：只有名稱匹配的組件會被緩存

　　　　exclude：類型：字符串或者正則表達式

　　　　　　　　解釋：任何名稱匹配的組件都不會緩存

　　　　max：類型：數字

　　　　　　　解釋：最多能夠緩存多少個組件實例

十二、當使用keep-alive內置組件後會增長哪兩個生命週期

　　activated：當組件爲活躍狀態時候觸發（進入頁面的時候）

　　deactivated：緩存狀態的時候觸發

1三、vue中slot的使用方式，以及slot做用域插槽的用法

　　當組件當作標籤使用的時候，若是須要在組件標籤內部進行嵌套內容的時候，須要經過template組件包裹嵌套的內容，在組件內部經過<slot></slot>進行接收

1四、爲何組件內部的data是一個函數而不是一個對象

　　由於每次調用組件的時候都會從新生成一個對象，若是是一個對象的狀況下，data數據會進行復用，由於對象是引用類型數據，而當data是一個函數時，每次調用會返回一個新的對象

1五、vue中動畫如何實現

　　給須要動畫的元素添加<transition></transition>標籤，

　　進入時class類 <name>-enter　　<name>-enter-active　　<name>-enter-to

　　離開時class類 <name>-leave　　<name>-leave-active　　<name>-leave-to

1六、淺談對路由的理解

　　什麼是路由：根據不一樣的url地址展現不一樣的頁面或者數據

　　路由分爲前端路由和後端路由

　　前端路由：

　　　　a、前端路由用於單頁面開發，SPA

　　　　b、前端路由是不涉及到服務器的，是前端利用hash或者h5的historyAPI來實現的，通常用於不一樣的內容展現和切換

1七、路由跳轉的方式

　　①a標籤進行跳轉　　<a href="#/home">首頁</a>

　　②router-link進行跳轉　　<router-link to="/home">首頁</router-link>

　　③編程式路由　　this.$router.push()

1八、路由傳值的方式有哪幾種

　　①動態路由傳值　　path="/home/:id/name"　　經過this.$route.params接收

　　②query傳值　　在url中?後面的參數不會被解析，因此能夠經過query傳值　　經過this.$route.query接收

　　③路由解耦　　在配置路由的時候添加props屬性爲true，在須要接收參數的組件頁面經過props接收

　　④編程式導航　　this.$router.push({path:"/home",query:{}})

1九、路由經常使用配置項及做用

　　path　　跳轉路徑

　　component　　路徑相對於的組件

　　name　　命名路由

　　meta　　路由元信息

　　children　　子路由的配置參數（路由嵌套）

　　props　　路由解耦

　　redirect　　路由重定向

20、編程式導航經常使用的方法

　　路由跳轉　　this.$router.push()

　　路由替換　　this.$router.replace()

　　後退　　this.$router.back()

　　請進　　this.$router.forward()

2一、如何重定向路由？如何實現路由解耦？

　　經過配置路由項中的redirect進行重定向

　　在路由的配置項中設置props:true，在須要接收的組件內部經過props接收

2二、如何檢測路由參數的變化

　　經過屬性監聽來實現或者beforeRouteUpdate()

            watch: {
                "$route"(){

                }  
            }
            
            beforeRouteUpdate(to,from,next)

2三、什麼是路由守衛？路由的鉤子函數有哪些？分別說出使用的場景及用法

　　什麼是路由守衛：路由跳轉先後的一些驗證

　　路由常見的鉤子函數：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

　　使用場景：

　　　　beforeRouteEnter：當路由進入以前。登陸驗證、熱力圖的記錄

　　　　beforeRouteUpdate：當路由更新的時。若是當前路由發生了變化，可是不須要組件的建立和銷燬的過程的時候，就須要用到這個鉤子函數

　　　　beforeRouteLeave：當路由離開時。支付、退出

2四、什麼是全局守衛

　　beforeEach　　驗證用戶是否登陸

2五、axios和jQuery的ajax有什麼不一樣

　　axios的優勢：

　　　　①支持PromiseAPI

　　　　②自動轉換json數據

　　　　③提供了一些併發請求的接口
　　
　　　　④客戶端支持防止csrf、xsrf

　　　　⑤從nodejs中建立http請求

　　ajax的優缺點：

　　　　①jQuery項目龐大，單純的使用ajax引入整個jQuery不合理

　　　　②基於原生的XHR開發，可是XHR架構並不清晰

2六、簡述vuex的數據傳遞流程

　　當組件進行數據修改的時候，咱們須要調用dispatch來觸發actions中的方法

　　actions中的方法中有一個commit方法，經過調用commit來觸發mutations中的方法進行數據修改

　　mutations中的方法中有一個state參數，當修改完畢後，由於數據是響應式的，會傳導給頁面。

2七、雙向數據綁定的原理

　　vue.js是採用數據劫持結合發佈者-訂閱者的方式，經過Object.defineProperty()來劫持各個屬性的setter和getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

　　第一步：須要observer的數據對象進行遞歸遍歷，包括子屬性的對象的屬性，都加上setter和getter，這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化

　　第二步：compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知更新視圖

　　第三步：watcher訂閱者是observer和compile之間通訊的橋樑，這要作的事情是：

　　　　①在自身實例化時往屬性訂閱器（dep）裏面添加本身

　　　　②自身必須有一個update方法

　　　　③待屬性變更dep.notice()通知時，能調用自身的update方法，並觸發compile中綁定的回調，則功成身退

2八、使用vue的時候會一會兒加載全部的東西使得初始化頁面很卡，該如何解決

　　①路由懶加載

　　②服務端渲染

　　③骨架屏注入

　　像vue這種單頁面應用，若是沒有應用懶加載，運用webpack打包後的文件將會異常的大，形成進入首頁時，須要加載的內容過多，時間過長，會出現長時間的白屏，即便作了loading也是不利於用戶體驗。而運用懶加載則能夠將頁面進行劃分，須要的時間加載頁面，能夠有效的分擔首頁所承擔的加載壓力，減小首次加載用時。

2九、如何在vue中實現css私有化

　　vue組件中在style標籤上添加scoped屬性，可使css私有化。可是這種方法會形成樣式不可修改，由於不少時候須要對公共組件的樣式作微調，因此慎用。

30、常見的跨域方式

　　①服務器代理　　http-proxy-middleware　　原理：服務器之間的請求不存在跨域問題

　　②nginx　　proxy-pass後面跟一個跨域的地址

　　③cors　　服務端的代理方式　　設置響應頭：header(Access-Control-Allow-Origin:*)

　　④jsonp　　原理：表單中的action、script中的src、a標籤和link標籤中的href都會形成頁面的跳轉，因此這不存在跨域的問題。jsonP的原理是利用script的src進行跳轉，前端將函數傳到服務端，服務端將函數加工後再返回，因此jsonp和ajax不是一回事。　　缺點：只支持get

3一、vue中使用插件的流程

　　import Vue from "vue"
　　import 插件 from "插件"
　　Vue.use(插件)

3二、列舉3個vue中經常使用的生命週期鉤子函數

　　created：實例已經建立完成以後調用，這裏實例已經完成數據觀測，屬性和方法的運算，watch/event事件回調。掛載階段還未開始，$el屬性目前還不可見

　　mounted：el被建立的vm.$el替換，並掛載到實例上後調用該鉤子。若是root實例掛載了一個文檔內元素，當mounted調用時vm.$el也在文檔內

　　activated：keep-alive組件激活時調用

3三、第一次頁面加載會觸發哪幾個鉤子

　　 beforeCreate

　　created

　　beforeMount

　　mounted

3四、簡單描述每一個生命週期具體適合哪些場景

　　beforeCreate：能夠在這裏加loading事件，在加載實例時觸發

　　created：初始化完成時的事件寫在這裏，例如在這裏結束loading事件，異步請求也適宜在這裏調用

　　mounted：掛載元素，獲取DOM節點

　　updated：若是對數據統一處理，在這裏寫上相應函數

　　beforeDestroy：能夠作一個確認中止事件的確認框

　　nextTick：更新數據後當即操做DOM

3五、vue中router-link在電腦上有用，在安卓上沒反應怎麼辦

　　vue路由在安卓上有問題，babel問題，安裝babel polypill插件解決

3六、vuex中經常使用的屬性有哪些

　　state、getter、mutation、action、module

　　state：

　　　　①vuex就是一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於通常vue對象中的data

　　　　②state中存放的數據是響應式的，vue組件從state中讀取數據，如果store中的數據發生改變，依賴這個數據的組件也會發生更新

　　　　③它經過mapState、mapGetters把全局的state和getters映射到當前組件的computed計算屬性中

　　getter：

　　　　①getters能夠對state進行計算操做，它就是store的計算屬性

　　　　②雖然在組件內也能夠作計算屬性，可是getters能夠在多組件之間複用

　　　　③若是一個狀態只在一個組件中使用，是能夠不用getters

　　mutation：

　　　　action相似於mutation，不一樣在於：action提交的是mutation，而不是直接變動狀態；action能夠包含任意異步操做。

3七、是否封裝過組件，說下封裝組件的過程

　　首先，組件能夠提高整個項目的開發效率，可以把頁面抽象成多個相對獨立的模塊，解決了咱們傳統項目開發效率低、難維護、複用性等問題。

　　而後，使用Vue.extend方法建立一個組件，而後使用Vue.component方法註冊組件

3八、若是在vuex中保存了某些數據，刷新瀏覽器消失了，應該如何解決

　　保存在localStorage或者cookie中

3九、swiper插件在後臺獲取數據沒問題，css代碼啥的也沒問題，可是圖片不能動應該怎麼解決

　　這是由於生命週期的執行速度遠遠大於數據請求的速度，用watch&&nextTick解決，或者是update

40、什麼是路由懶加載（當打開一個單頁面應用的時候，會出現白屏，加載時間過長如何解決）

　　路由懶加載

　　nuxt服務端渲染

4一、對vue-loader的理解

　　解析和轉換.vue文件，提取出其中的邏輯代碼script、樣式代碼style，以及html模板template，再分別把它們交給對應的loader去處理。

4二、父組件如何訪問子組件中的方法

　　this.$refs.屬性.方法

4三、對vue.extend的理解

　　使用vue構造器，建立一個子類，參數是一個組件對象，注意data必須是一個函數

　　Vue.extend()返回的是一個擴展實例構造器，簡單來講就是一個預設了部分選項的vue實例，主要用來服務Vue.component，用來生成組件。

4四、說下對Vue.use的理解

　　安裝vue.js插件。若是插件是一個對象，必須提供install方法。若是插件是一個函數，它會被做爲install方法。install方法調用時，會將vue做爲參數傳入。

　　該方法須要在調用new Vue()以前被調用

4五、如何解決路由與跨域之間的衝突

　　統一規範爲一個入口，在必定程度上會解決衝突或者在axios中配置baseUrl

4六、vue響應式原理

　　工做原理是當咱們把一個普通的JavaScript對象傳給vue的實例data選項的時候，vue會遍歷此對象的全部屬性，並使用Object.defineProperty把這些屬性所有轉化爲getter/setter。

　　（Object.defineProperty僅ES5支持，且沒有墊片腳本的特性，所以vue不支持IE8及如下瀏覽器）。用戶看不到getter/setter，可是在內部它們讓vue追蹤依賴，在屬性被訪問和修改時通知變化。

　　每一個組件實例都有相應的watcher實例對象，它會在組件渲染的過程當中把屬性記錄爲依賴，以後當依賴項的setter被調用時，會通知watcher從新計算，從而使它關聯的組件得以更新。

4七、vue-router的實現原理

　　單頁面應用（SPA）的核心之一是：更新視圖而不更新請求頁面

　　實現這一技術主要是兩種方式：

　　　　hash：經過改變hash值

　　　　history：利用history對象新特性

4八、對vue.js中templ編譯的理解

　　先轉化爲AST樹，再獲得的render函數返回VNode

　　首先，經過compile編譯器把template編譯成AST（abstarct syntax tree 源代碼的抽象語法結構的樹狀表現形式）語法樹，compile是createCompiler的返回值，createCompiler是用來建立編譯器的。另外compiler還負責合併option。

　　而後，AST會通過generate（將AST語法樹轉化成render function字符串的過程）獲得render函數，render的返回值是VNode，Vnode是vue的虛擬DOM節點，裏面有標籤名、子節點、文本等。

4九、前端路由和後端路由的區別

　　路由：根據不一樣的url展現不一樣的內容或頁面

　　前端路由：很重要的一點就是頁面不刷新，前端路由就是把不一樣路由對應不一樣的內容或頁面的任務交給前端來作，每跳轉到不一樣的url都是使用前端的錨點路由，隨着SPA應用的不斷普及，先後端開發分離，目前項目基本都使用前端路由，在項目使用期間路由不會從新加載。hash有一個特色：http請求中不會包含hash相關的內容，因此，單頁面應用中的頁面跳轉主要用hash實現。

　　後端路由：經過用戶請求的url導航到具體的html頁面，每跳轉到不一樣的url，都是從新訪問服務端，而後服務端返回頁面，頁面也能夠是服務端獲取數據，而後和模板結合，返回html，也能夠是直接返回模板html，而後由前端js再去請求數據，使用前端模板和數據進行結合，生成想要的html。

　　對比：

　　　　①從性能和用戶體驗的層面來比較的話，後端路由每次訪問一個新頁面的時候都要向服務器發送請求，而後服務器再響應請求，這個過程確定會有延遲。而前端路由在訪問一個頁面的時候僅僅是變換了如下路徑而已，沒有了網絡延遲，對於用戶體驗來講會有至關大的提高。

　　　　②在某些場合中，用ajax請求，可讓頁面無刷新，頁面變了可是url沒有變化，用戶就不能複製到想要的地址，用前端路由作單頁面網頁就很好的解決了這個問題。可是前端路由使用瀏覽器的前進後退鍵的時候會從新發送請求，沒有合理的利用緩存。

50、前端渲染和後端渲染的優缺點

　　前端渲染：後端返回json數據，前端利用預先寫的html模板，循環讀取json數據，拼接字符串，並插入頁面。

　　好處：

　　　　①先後端分離。前端專一於UI，後端專一於api開發，且前端有更多的選擇性，而不須要遵循後端特定的模板。

　　　　②體驗更好。好比咱們將網站作成SPA或者部份內容作成SPA，這樣尤爲是移動端可使體驗更好更接近於原生app。

　　壞處：

　　　　①前端響應較慢。若是是客戶端渲染，前端還要進行拼接字符串的過程，須要耗費額外的時間，不如服務器端渲染速度快。

　　　　②不利於SEO。目前如百度、谷歌的爬蟲對於SPA都是不認識的，只是記錄了一個頁面，因此SEO不好。由於服務器端可能沒有保存完整的html，而是前端經過js進行DOM的拼接，那麼爬蟲沒法讀取信息。除非搜索引擎的SEO能夠增長對於JavaScript的爬取能力，這樣才能保證SEO。