前端整理——Vue部分

（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組件通訊

一、父子組件通訊

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

2.非父子組件間的數據傳遞，兄弟組件傳值

對於這種狀況能夠經過查找父組件中的子組件實現，也就是 this.$parent.$children，在 $children 中能夠經過組件 name 查詢到須要的組件實例，而後進行通訊。

（4）路由

一、路由的鉤子函數

1）全局鉤子函數：beforeEach、afterEach
router.beforeEach（to, from , next） 全局鉤子函數，每次每個路由改變的時候都得執行一遍。
to：即將要進入的目標路由對象；form：當前導航正要離開的路由；next：Function
next( )：進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是confirmed。
next( false)：中斷當前的導航。
next( '/' )：跳轉到一個不一樣的地址。

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

router.afterEach全局後置鉤子，這些鉤子不會接受 next 函數也不會改變導航自己：

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

2）單個路由裏面的鉤子：beforeEnter、beforeLeave
你能夠在路由配置上直接定義 beforeEnter 鉤子函數，在進入對應路由時調用對應的beforeEnter

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

3）組件內的鉤子函數：beforeRouteEnter 、beforeRouteUpdate 、beforeRouteLeave

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`
  }
}

二、路由跳轉的幾種方式

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初始渲染開銷小，切換時開銷更高，不適合常常切換的場景。

（7）自定義指令

一、全局註冊指令

二、局部註冊指令

使用：

三、自定義指令的鉤子函數
bind:只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數能夠定義一個綁定時執行一次的初始化動做。
inserted:被綁定元素插入父節點時調用（父節點存在便可調用，沒必要存在於document中）。
update:被綁定於元素所在的模板更新時調用，而不管綁定值是否變化。經過比較更新先後的綁定值，能夠忽略沒必要要的模板更新。
componentUpdated:被綁定元素所在模板完成一次更新週期時調用。
unbind:只調用一次，指令與元素解綁時調用。

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