（1）Vue的生命週期

1）建立vue例項，初始化生命週期鉤子函式
2）資料檢測及方法和計算屬性代理。在資料檢測和初始化資料之前呼叫beforeCreated()，這時還獲取不到props或者data中的資料；資料、屬性、方法初始化之後，呼叫created()，可以訪問之前訪問不到的資料，但是元件還沒有掛載，$el屬性還沒有顯示，所以看不到元件。
3）判斷是否有el屬性，如果沒有就判斷是否呼叫了$mount方法，如果也沒有則停止解析。如果呼叫了二者之一，就繼續解析。
4）獲取檢視模板。判斷是否有template屬性，如果沒有則將el的檢視節點的outerhtml作為模板；如果有則將template檢視作為模板。
5）編譯模板。生成虛擬DOM，解析指令、元件。
6）將虛擬DOM掛載到真實DOM上。掛載前呼叫beforemount方法，掛在後呼叫mounted方法。
7）資料更新導致檢視更新。更新前呼叫beforeUpdate,更新後呼叫updated。
8）銷燬vue例項。銷燬前呼叫beforedestroy，銷燬後呼叫destroyed。

（2）keep-alive的生命週期

如果你需要在元件切換的時候，儲存一些元件的狀態防止多次渲染，就可以使用 keep-alive 元件包裹需要儲存的元件。

對於 keep-alive 元件來說，它擁有兩個獨有的生命週期鉤子函式，分別為 activated 和 deactivated 。用 keep-alive 包裹的元件在切換時不會進行銷燬，而是快取到記憶體中並執行 deactivated 鉤子函式，命中快取渲染後會執行 actived 鉤子函式。

（3）Vue元件通訊

1、父子元件通訊

父元件通過props傳遞資料給子元件，子元件通過$emit傳送事件傳遞資料給父元件，這兩種方式是最常用的父子通訊實現方法。
父子通訊方式是單向資料流，父元件通過props傳遞資料，子元件不能直接修改props，而是必須通過傳送事件的方式告知父元件修改資料。

2.非父子元件間的資料傳遞，兄弟元件傳值

對於這種情況可以通過查詢父元件中的子元件實現，也就是 this.$parent.$children，在 $children 中可以通過元件 name 查詢到需要的元件例項，然後進行通訊。

（4）路由

1、路由的鉤子函式

1）router.beforeEach（to, from , next） 全域性鉤子函式，每次每一個路由改變的時候都得執行一遍。
to：即將要進入的目標路由物件；form：當前導航正要離開的路由；next：Function
next( )：進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是confirmed。
next( false)：中斷當前的導航。
next( '/' )：跳轉到一個不同的地址。

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

2）router.afterEach全域性後置鉤子，這些鉤子不會接受 next 函式也不會改變導航本身：

router.afterEach((to, from) => {
  // ...
})

3）你可以在路由配置上直接定義 beforeEnter 鉤子函式，在進入對應路由時呼叫對應的beforeEnter

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

4）元件內的鉤子函式

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該元件的對應路由被 confirm 前呼叫；不！能！獲取元件例項 `this`； 因為當守衛執行前，元件例項還沒被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該元件被複用時呼叫；舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候；由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。 可以訪問元件例項 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該元件的對應路由時呼叫； 可以訪問元件例項 `this`
  }
}

2、路由跳轉的幾種方式

1）直接呼叫$router.push實現路由跳轉：

this.$router.push({
     path: `/login/${id}`,
})

對應路由配置如下：

{
     path: '/login/:id',
     name: 'Login',
     component: Login
   }

在子元件中獲取引數值：
this.$route.params.id

2）通過路由屬性中的name來確定匹配的路由，通過params來傳遞引數。

 this.$router.push({
          name: 'Login',
          params: {
            id: id
          }
        })

對應路由配置如下：

{
     path: '/login',
     name: 'Login',
     component: Login
   }

在子元件中獲取引數值：
this.$route.params.id

3）使用path來匹配路由，然後通過query來傳遞引數。這種情況下 query傳遞的引數會顯示在url後面?id=？

  this.$router.push({
          path: '/login',
          query: {
            id: id
          }
        })

對應路由配置如下：

{
     path: '/login',
     name: 'Login',
     component: Login
   }

在子元件中獲取引數值：
this.$route.params.id

（5）元件中data為什麼是一個函式

一個元件的 data 選項必須是一個函式，因此每個例項可以維護一份被返回物件的獨立的拷貝：

data: function () {
  return {
    count: 0
  }
}

原因：物件為引用型別，當重用元件時，由於資料物件都指向同一個data物件，當在一個元件中修改data時，其他重用的元件中的data會同時被修改；而使用返回物件的函式，由於每次返回的都是一個新物件（Object的例項），引用地址不同，則不會出現這個問題

// 1.物件方式（所有重用的例項中的data均為同一個物件）
    var data = {
        x: 1
    };
    var vm1 = {
        data: data
    };
    var vm2 = {
        data: data
    };
    console.log(vm1.data === vm2.data);// true，指向同一個物件
    // 2.函式方式（所有重用的例項中的data均為同一個函式）
    var func = function () {
        return {
            x: 1
        }
    };
    var vm3 = {
        data: func
    };
    var vm4 = {
        data: func
    };
    console.log(vm3.data() === vm4.data()); // false，指向不同物件

參考博文：https://blog.csdn.net/qq_33576343/article/details/82793894

（6）v-show 與 v-if 區別

v-show只是在display:none和display:block之間切換。無論初始條件是什麼都會被渲染出來，後面只需切換CSS，DOM還是一直保留。
v-if 初始值為false時，元件不會被渲染，直到條件為true，並且切換條件時會觸發銷燬/掛載元件。
對比來說，v-show在初始時有更高的開銷，但是切換開銷小，適於頻繁切換的場景；v-if初始渲染開銷小，切換時開銷更高，不適合經常切換的場景。

參考：https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5c024ecbf265da616a476638