Vue基礎知識的鞏固與學習

生命週期的解析和應用：

Vue 實例有一個完整的生命週期，也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，咱們稱這是 Vue 的生命週期。通俗說就是 Vue 實例從建立到銷燬的過程，就是生命週期。

1. beforecreate : 
   完成實例初始化，初始化非響應式變量
   this指向建立的實例；
   能夠在這加個loading事件；
   data computed watch methods上的方法和數據均不能訪問
2. created
   實例建立完成
   完成數據(data props computed)的初始化 導入依賴項。
   可訪問data computed watch methods上的方法和數據
   未掛載DOM,不能訪問$el,$ref爲空數組
   可在這結束loading，還作一些初始化，實現函數自執行,
   能夠對data數據進行操做，可進行一些請求，請求不易過多，避免白屏時間太長。
   若在此階段進行的 DOM 操做必定要放在 Vue.nextTick() 的回調函數中
3. berofeMount
   有了el,編譯了template|/outerHTML
   能找到對應的template,並編譯成render函數
4. mounted
   完成建立vm.$el，和雙向綁定，
   完成掛載DOM 和渲染;可在mounted鉤子對掛載的dom進行操做
   即有了DOM 且完成了雙向綁定 可訪問DOM節點,$ref
   可在這發起後端請求，拿回數據，配合路由鉤子作一些事情；
   可對DOM 進行操做
5. beforeUpdate
   數據更新以前
   可在更新前訪問現有的DOM,如手動移除添加的事件監聽器；
6. updated :
   完成虛擬DOM的從新渲染和打補丁；
   組件DOM 已完成更新；
   可執行依賴的dom 操做
   注意：不要在此函數中操做數據，會陷入死循環的。
7. activated:
   在使用vue-router時有時須要使用<keep-alive></keep-alive>來緩存組件狀態，這個時候created鉤子就不會被重複調用了，
   若是咱們的子組件須要在每次加載的時候進行某些操做，可使用activated鉤子觸發
8. deactivated 
   for keep-alive 組件被移除時使用
9. beforeDestroy： 
   在執行app.$destroy()以前
   可作一些刪除提示，如：你確認刪除XX嗎？ 
   可用於銷燬定時器，解綁全局時間 銷燬插件對象

10. destroyed ：

    當前組件已被刪除，銷燬監聽事件 組件 事件 子實例也被銷燬
    這時組件已經沒有了，你沒法操做裏面的任何東西了。

子父組件的生命週期
僅當子組件完成掛載後，父組件纔會掛載
當子組件完成掛載後，父組件會主動執行一次beforeUpdate/updated鉤子函數（僅首次）
父子組件在data變化中是分別監控的，可是在更新props中的數據是關聯的（可實踐）
銷燬父組件時，先將子組件銷燬後纔會銷燬父組件

兄弟組件的初始化（mounted以前）分開進行，掛載是從上到下依次進行
當沒有數據關聯時，兄弟組件之間的更新和銷燬是互不關聯的

頁面渲染優先級：
render函數選項 > template選項 > outer HTML.

vue-router 

　　vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。傳統的頁面應用，是用一些超連接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。 路由模塊的本質 就是創建起url和頁面之間的映射關係 。 至於咱們爲啥不能用a標籤，這是由於用Vue作的都是單頁應用，就至關於只有一個主的index.html頁面，因此你寫的標籤是不起做用的，你必須使用vue-router來進行管理。

　　實現原理：單一頁面應用程序，只有一個完整的頁面；它在加載頁面時，不會加載整個頁面，而是隻更新某個指定的容器中內容。 單頁面應用(SPA)的核心之一是: 更新視圖而不從新請求頁面 ;vue-router在實現單頁面前端路由時，提供了兩種方式：Hash模式和History模式；根據mode參數來決定採用哪種方式。

一、Hash模式：

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載。hash（#）是URL 的錨點，表明的是網頁中的一個位置，單單改變#後的部分，瀏覽器只會滾動到相應位置，不會從新加載網頁，也就是說 #是用來指導瀏覽器動做的，對服務器端徹底無用，HTTP請求中也不會不包括#；同時每一次改變#後的部分，都會在瀏覽器的訪問歷史中增長一個記錄，使用」後退」按鈕，就能夠回到上一個位置；因此說 Hash模式經過錨點值的改變，根據不一樣的值，渲染指定DOM位置的不一樣數據

二、History模式：

因爲hash模式會在url中自帶#，若是不想要很醜的 hash，咱們能夠用路由的 history 模式，只須要在配置路由規則時，加入"mode: 'history'",這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面。

//main.js文件中
const router = new VueRouter({
   mode: 'history',
   routes: [...]
})

當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，比較好看！ 不過這種模式要玩好，還須要後臺配置支持。由於咱們的應用是個單頁客戶端應用，若是後臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就很差看了。 因此呢， 你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。

export const routes = [ 
  {path: "/", name: "homeLink", component:Home}
  {path: "/register", name: "registerLink", component: Register},
  {path: "/login", name: "loginLink", component: Login},
  {path: "*", redirect: "/"}
]

此處就設置若是URL輸入錯誤或者是URL 匹配不到任何靜態資源，就自動跳到到Home頁面

三、使用路由模塊來實現頁面跳轉的方式

方式1：直接修改地址欄
方式2：this.$router.push(‘路由地址')
方式3： <router-link to="路由地址"></router-link>

四、vue-router使用方式

1:下載 npm i vue-router -S

2:在main.js中引入 import VueRouter from 'vue-router';

3:安裝插件 Vue.use(VueRouter);

4:建立路由對象並配置路由規則

let router = new VueRouter({routes:[{path:'/home',component:Home}]});

5:將其路由對象傳遞給Vue的實例，options中加入 router:router

6:在app.vue中留坑 <router-view></router-view>

//main.js文件中引入
import Vue from 'vue';
import VueRouter from 'vue-router';
//主體
import App from './components/app.vue';
import Home from './components/home.vue'
//安裝插件
Vue.use(VueRouter); //掛載屬性
//建立路由對象並配置路由規則
let router = new VueRouter({
  routes: [
    //一個個對象
    { path: '/home', component: Home }
  ]
});
//new Vue 啓動
new Vue({
  el: '#app',
  //讓vue知道咱們的路由規則
  router: router, //能夠簡寫router
  render: c => c(App),
})


//app.vue中
<template>
  <div>
    <!-- 留坑，很是重要 -->
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    data(){
      return {}
    }
  }
</script>

View Code

五、vue-router傳參

1) 用name傳遞參數   

2) 經過 <router-link> 標籤中的to傳參

3) vue-router 利用url傳遞參數----在配置文件裏以冒號的形式設置參數

 

下面是個人微信公衆號歡迎你們關注一塊兒學習一塊兒進步

 

 

參考文章：

一、包你理解---vue 的生命週期

二、關於vue-router的那些事兒