一些vue你不太知道的知識（2） | 8月更文挑戰

這是我參與8月更文挑戰的第8天，活動詳情查看：8月更文挑戰

1、vue組件data爲何必須是個函數而vue根實例沒有這個限制？

一、函數每次執行都會返回全新的data對象的實例css

二、vue組件可能會存在多個實例，若是使用對象形式定義data就會致使不少組件公用同一個data，當data中數據改變就會影響其餘組件的展現。html

三、原理是vue中data使用函數的方式，在源碼initData中做爲工廠函數返回全新data對象，能夠避免第二條發生在data數據更新影響其餘組件的問題。vue

2、vue中的key的做用和原理是什麼？

//html:
<div v-for="item in nums" :key="item">{{item}}</div>
//js:
const app = new Vue({
    el:'demo',
    data: {
        nums: ['a', 'b', 'c', 'd', 'e']
    },
    mounted() {
        setTimeout(()=> {
            this.nums.splice(2,0,'f');
        },1000);
    }
});
複製代碼

在上面這段代碼中，須要在初始化的時候在數組中加入一個f的字段，若是能夠key的話會產生下面的問題java

不使用key算法

若是你在執行的時候打斷點調試，就能夠在源碼中發現src\core\vdom\patch.js 中updateChildren()方法就是以上的圖vue-router

一、key的做用主要是爲了更快速的更新DOM，原理就是vue源碼中的patch過程當中key能夠準確的判斷兩個節點是不是同一個，從而避免更新不一樣元素，減小DOM操做，提升性能vuex

二、不設置key會有warn提醒的bug數組

三、vue在使用相同元素的DOM過渡切換時，也會用到key，就是爲了讓vue能夠區分他們，不然vue只能替換內部屬性，而不會觸發過分效果瀏覽器

3、vue-router中的導航鉤子有哪些？

一、全局導航鉤子markdown

beforeEach(to,from,next)路由改變前觸發該方法，能夠在用戶驗證權限的時候使用

to：將要跳轉的路由對象

from：當前頁面的路由對象

next：路由控制參數，判斷一些權限，而後控制：

next()路由正常執行跳轉

若是next(false)就會取消導航，

next('/index')當前路由中斷，進行一個新的index頁面的路由跳轉，

next(error)若是一個error實例，則導航會被終止而且該錯誤會被傳遞給router.onError(),走到afterEach(to,from)路由改變後的鉤子

beforeEach((to,from,next) => {
    if(to.fullPath != '/login') {//若是不是登陸頁面
         if(!localStorage.token) {//若是沒有token
            next('/login');//就進入login頁面登陸
         }else {
            next();//正常跳轉
         }
    }else {
        next();//正常跳轉
    }
})
複製代碼

二、組件內的導航鉤子

1）beforeRouteEnter(to,from,next);和上面方法相似，可是此實例還沒被建立，因此不能獲取實例this

2）beforeRouteUpdate(to,from,next);當前路由不改變，可是在組件被複用的時候觸發，能夠獲取實例this

3）beforeRouteLeave(to,from,next);當導航離開組件時觸發，能夠獲取實例this

三、使用watch監聽路由$route的變化

4、nextTick的原理

你們都知道，它能夠在DOM更新後執行一個回調方法，其實內部使用了mutationObserver監聽DOM的變化，mutationObserver是H5新增的屬性，用於監聽DOM修改事件，能夠監聽到節點的屬性，文本等。

//mutationObserver的基本用法：
var observer = new MutationObserver(function() {
    console.log('dom修改了');
});
var content = document.querySelector('content');
observer.observer(content);
複製代碼

能夠查看源碼/src/core/util/env.js，裏面用到了事件循環機制，由於能夠經過點擊，頁面渲染，腳本執行，網絡請求等方式觸發DOM的更新，爲了協調這些事件，瀏覽器使用事件循環機制。

事件循環機制Event Loop

會維護一個或多個隊列，以上觸發DOM的方法就會在隊列中加入任務，有一個持續執行的線程來執行這些任務，執行完一個就移除一個。

因此nextTick裏要執行的代碼就放到了隊列的末尾執行，從而達到DOM更新後執行的效果，也可也理解使用setTimeout延時的時間恰到好處。可是vue的數據響應過程是：數據修改->通知watcher->更新dom。而數據修改咱們不知道何時會發生，若是在重繪以前就會發生屢次渲染，形成性能浪費，更多的還須要去了解event loop的另外一個概念：microtask，這裏就很少說了，相似於微任務。

總結就是：

一、vue使用異步隊列的方法控制DOM的更新和nextTick回調後執行

二、microtask有優先的特性，能夠確保隊列中的微任務在一次事件循環機制前被執行完

5、vue的設計原則

一、漸進式的javaScript框架

vue被設計爲自下而上逐層應用，vue核心只關注視圖層，易上手還能夠和第三方庫整合，能夠徹底的實現複雜的單頁應用提供驅動。

二、易用

vue提供數據響應式，聲明式模板語法和基於配置的組件系統等核心，因此咱們只須要會js,html,css就能夠開發vue

三、靈活

若是一個應用比較小，就能夠只須要vue核心功能開發，若是應用比較大，就能夠加入路由管理，vuex等方便靈活開發

四、高效

內部更新虛擬dom的快速和使用了diff算法提升了大量的性能，vue3還使用proxy對數據響應式改進和編譯器對於靜態內容的編譯都讓vue更高效了。