Vue學習總結之Vue的生命週期(二)

時間 2020-06-08

標籤 vue 學習總結生命週期简体版

原文原文鏈接

點贊再看、養成習慣。javascript

本文已收錄至github.com/likekk/-Blo…歡迎你們star，共同窗習，共同進步。若是文章有錯誤的地方，歡迎你們指出。後期將在將GitHub上規劃前端學習的路線和資源分享。html

寫在前面

每一篇文章都但願您有所收穫，每一篇文章都但願您能靜下心來瀏覽、閱讀。每一篇文章都是做者精心打磨的做品。前端

若是您以爲二郎神楊戩有點東西的話，做者但願你能夠幫我點亮那個點讚的按鈕，對於二郎神楊戩這個暖男來講，真的真的很是重要，這將是我持續寫做的動力。您只須要小手輕輕一點，帶來的倒是溫暖了這個做者，給予他前進的動力。vue

前言

經過上一篇博客的學習，咱們初步入門了Vue.js這個漸進式框架，簡單的瞭解了一下聲明式渲染、條件與循環、處理用戶輸入和表單、組件應用構建等相關內容。本篇博客將會延續上一篇博客的內容進行探索Vue.js。那麼一塊兒帶着一顆平靜的心和二郎神楊戩一塊兒學習吧！java

Vue實例

每一個 Vue 應用都是經過用 Vue 函數建立一個新的 Vue 實例開始的：node

const vm=new Vue({
 //選項 }) 複製代碼

當建立一個 Vue 實例時，你能夠傳入一個選項對象，常見的有：git

data：對象或者函數
methods：方法，全部須要執行的方法都必須放在methods裏面
el：掛載DOM的根元素
computed：計算屬性
Vue生命週期的鉤子函數：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestory、destoryed
watch：監聽屬性

數據和方法

當一個 Vue 實例被建立時，它將 data對象中的全部的 property 加入到 Vue 的響應式系統中。當這些 property 的值發生改變時，視圖將會產生**「響應」**，即匹配更新爲新的值。程序員

<!DOCTYPE html>
<html lang="en"> <head>  <meta charset="UTF-8">  <title></title> </head> <body> <div id="app">  </div> <script src="../js/vue.js"></script> <script>  // 咱們的數據對象  const data={  obj:1  }  // 該對象被加入到一個vue實例中  const vm=new Vue({  el:'#app',  data:data  });  console.log(vm.obj===data.obj);  vm.obj=10;  console.log(data.obj); // 10  data.obj=100;  console.log(vm.obj); // 100 </script> </body> </html>  複製代碼

當這些數據改變時，視圖會從新渲染。github

注意：web

只有當實例被建立時就已經存在於data中property纔是響應式的，若是時建立成功以後再從新添加是沒法造成響應式的。

一、添加默認初始值

若是咱們後期可能須要用到某些數據、而且這些數據須要響應式的，那麼咱們就能夠在data中先定義一些數據，並設置初始值。

data:{
 name:'',  age:0,  sex:'' } 複製代碼

除了數據 property，Vue 實例還暴露了一些有用的實例 property 與方法。它們都有前綴 $，以便與用戶定義的 property 區分開來：

const data={
 a:1 } const vm=new VUe({  el:'#app',  data:data, }); console.log(vm.$data===data); // true console.log(vm.$el===document.getElementById("#app"));  複製代碼

實例屬性

vm._uid // 自增的id
vm._isVue // 標示是vue對象，避免被observe vm._renderProxy // Proxy代理對象 vm._self // 當前vm實例  vm.＄parent // 用於自定義子組件中，指向父組件的實例 vm.＄root // 指向根vm實例 vm.＄children // 當前組件的子組件實例數組 vm.＄refs  vm._watcher = null vm._inactive = null vm._directInactive = false vm._isMounted = false // 標識是否已掛載 vm._isDestroyed = false // 標識是否已銷燬 vm._isBeingDestroyed = false // 標識是否正在銷燬  vm._events // 當前元素上綁定的自定義事件 vm._hasHookEvent // 標示是否有hook:開頭的事件  vm.＄vnode // 當前自定義組件在父組件中的vnode，等同於vm.＄options._parentVnode vm._vnode // 當前組件的vnode vm._staticTrees // 當前組件模板內分析出的靜態內容的render函數數組 vm.＄el // 當前組件對應的根元素  vm.＄slots // 定義在父組件中的slots，是個對象鍵爲name，值爲響應的數組 vm.＄scopedSlots = emptyObject // 內部render函數使用的建立vnode的方法 vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) // 用戶自定義render方法時，傳入的參數 vm.＄createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)  vm._props // 被observe的存儲props數據的對象 vm._data // 被observe的存儲data數據的對象 vm._computedWatchers // 保存計算屬性建立的watcher對象 複製代碼

實例方法

vm.$watch // 觀察 Vue 實例上的一個表達式或者一個函數計算結果的變化
vm.$set // 向響應式對象中添加一個 property，並確保這個新 property 一樣是響應式的 vm.$delete // 刪除對象的 property。若是對象是響應式的，確保刪除能觸發更新視圖 vm.$on // 監聽當前實例上的自定義事件 vm.$once // 監聽一個自定義事件，可是隻觸發一次。一旦觸發以後，監聽器就會被移除 vm.$off // 移除自定義事件監聽器 vm.$emit // 觸發當前實例上的事件。附加參數都會傳給監聽器回調 vm.$mount // 手動地掛載一個未掛載的實例 vm.$beforcepdate// 迫使 Vue 實例從新渲染 vm.$nextTick // 將回調延遲到下次 DOM 更新循環以後執行 vm.$destory // 複製代碼

實例參數vm.＄options

vm.＄options其實也就是咱們new Vue(options)options這個選項對象可傳入的屬性

declare type ComponentOptions = {
 // data  data: Object | Function | void; // 傳入的data數據  props?: { [key: string]: PropOptions }; // props傳入的數據  propsData?: ?Object; // 對於自定義組件，父級經過`props`傳過來的數據  computed?: { // 傳入的計算屬性  [key: string]: Function | {  get?: Function;  set?: Function;  cache?: boolean  }  };  methods?: { [key: string]: Function }; // 傳入的方法  watch?: { [key: string]: Function | string }; // 傳入的watch   // DOM  el?: string | Element; // 傳入的el字符串  template?: string; // 傳入的模板字符串  render: (h: () => VNode) => VNode; // 傳入的render函數  renderError?: (h: () => VNode, err: Error) => VNode;  staticRenderFns?: Array<() => VNode>;   // 鉤子函數  beforeCreate?: Function;  created?: Function;  beforeMount?: Function;  mounted?: Function;  beforeUpdate?: Function;  updated?: Function;  activated?: Function;  deactivated?: Function;  beforeDestroy?: Function;  destroyed?: Function;   // assets  directives?: { [key: string]: Object }; // 指令  components?: { [key: string]: Class<Component> }; // 子組件的定義  transitions?: { [key: string]: Object };  filters?: { [key: string]: Function }; // 過濾器   // context  provide?: { [key: string | Symbol]: any } | () => { [key: string | Symbol]: any };  inject?: { [key: string]: string | Symbol } | Array<string>;   // component v-model customization  model?: {  prop?: string;  event?: string;  };   // misc  parent?: Component; // 父組件實例  mixins?: Array<Object>; // mixins傳入的數據  name?: string; // 當前的組件名  extends?: Class<Component> | Object; // extends傳入的數據  delimiters?: [string, string]; // 模板分隔符   // 私有屬性，均爲內部建立自定義組件的對象時使用  _isComponent?: true; // 是不是組件  _propKeys?: Array<string>; // props傳入對象的鍵數組  _parentVnode?: VNode; // 當前組件，在父組件中的VNode對象  _parentListeners?: ?Object; // 當前組件，在父組件上綁定的事件  _renderChildren?: ?Array<VNode>; // 父組件中定義在當前元素內的子元素的VNode數組（slot）  _componentTag: ?string; // 自定義標籤名  _scopeId: ?string;  _base: Class<Component>; // Vue  _parentElm: ?Node; // 當前自定義組件的父級dom結點  _refElm: ?Node; // 當前元素的nextSlibing元素，即當前dom要插入到_parentElm結點下的_refElm前 } 複製代碼

更多內容請參考Vue文檔之API

Vue的生命週期和鉤子函數

每個Vue實例在建立時都須要通過一系列的初始化過程，例如：設置數據監聽、模板編譯、將實例掛載到DOM並在數據變化時更新DOM等。同時也會運行一些叫作生命週期鉤子的函數。

若是有些朋友學過Java的話，那麼對於Servlet的生命週期應該不陌生吧！(扯遠了)，沒有學過的朋友也沒有關係，畢竟咱們主要講的Vue的生命週期和在它生命週期裏的一些鉤子函數。

爲了更好的講解Vue的生命週期。我從官網偷了一張圖獻給你們。

這張圖對於Vue的生命週期和鉤子函數說的很是的明白。下面咱們看一張關於Vue生命週期中出現的鉤子函數示意圖。

在這裏我主要講解經常使用的八個生命週期的鉤子函數。其它的瞭解一下就能夠了

beforeCreate(實例建立前)

實例組件剛開始建立，元素dom和數據都尚未初始化
應用場景：能夠在這加個loading事件

created(實例建立後)

數據data已經初始化完成，方法也已經能夠調用，可是dom爲渲染，在這個週期裏面若是進行請求是能夠改變數據並渲染，因爲dom未掛載，請求過多或者佔用時間過長會致使頁面線上空白
應用場景：在這結束loading，還作一些初始化，實現函數自執行

beforeMoute(元素掛載前)

dom未完成掛載，數據初始化完成，可是數據的雙向綁定仍是{{}}，這是由於vue採用了虛擬dom技術

mouted(元素掛載後)

數據和dom都完成掛載，在上一個週期佔位的數據把值渲染進去，通常請求會放在這個地方，由於這邊請求改變數據以後恰好能渲染

beforeUpdate(實例更新前)

只要是頁面數據改變了都會觸發，數據更新以前，頁面數據仍是原來的數據，當你請求賦值一個數據的時候就會執行這個週期，若是沒有數據改變不執行

updated(實例更新後)

只要是頁面數據改變了都會觸發，數據更新完畢，頁面的數據是更新完成的

beforeUpdated和updated要謹慎使用，由於頁面更新數據的時候都會觸發，在這裏操做數據很影響性能和死循環

beforeDestory(實例銷燬前)

實例銷燬以前調用，在這一步，實例仍然徹底可用

destory(實例銷燬後)

Vue實例銷燬後調用，調用後，Vue實例指示的全部內容都會解除綁定，全部的事件監聽器都會被移除，全部的子實例也會被銷燬

講一下開發者常常會犯的錯誤，就是關於Vue的鉤子函數中使用箭頭函數的問題。這個問題以爲有必要提出來，畢竟本身在開發過程當中，常常會踩這些坑。

生命週期鉤子的 this 上下文指向調用它的 Vue 實例

不要在選項 property 或回調上使用箭頭函數，好比

created()=>console.log('a')或者vm.$watch('a',newValue=>this.myMethod())，由於箭頭函數並無this，this會做爲變量一直向上級詞法做用域查找，直至找到爲止。

常常出現以下錯誤

Uncaught TypeError: Cannot read property of undefined
Uncaught TypeError: this.myMethod is not a function

這一點須要很是注意。

控制檯輸出福利

console.log支持的格式標誌有:

示例：

<!DOCTYPE html>
<html lang="en"> <head>  <meta charset="UTF-8">  <title></title> </head> <body> <script>  const tom={name:"楊戩", age:18}  console.group("開始");  console.group("第一組");  console.log("%c%s%o","background:red;color:yellow;",'對象是：',tom);  console.groupEnd();   console.group("第二組");  console.log("%c%s%o","background:red;color:yellow;",'對象是：',tom);  console.groupEnd();   console.group("第三組");  console.log("%c%s%o","background:red;color:yellow;","對象是:",tom) </script> </body> </html> 複製代碼

結果：

接下來經過兩個示例對Vue的生命週期進行解析

Vue生命週期示例一

<!DOCTYPE html>
<html lang="en"> <head>  <meta charset="UTF-8">  <title>Title</title> </head> <body> <div id="app">  <input type="text" v-model="msg">  {{msg}}  </div> <button onclick="destroy()">銷燬</button> <script src="../js/vue.js"></script> <script>  const vm=new Vue({  el:'#app',  data:{  msg:"Vue"  },  beforeCreate:function () {  console.log("Vue實例建立前："+this.msg,this.$el);  // 數據data和dom都沒有初始化  },  created:function () {  console.log("Vue實例建立後:"+this.msg,this.$el);  // 數據data初始化完成，dom尚未初始化完成   },  beforeMount:function () {  console.log("Vue實例掛載前"+this.msg,this.$el);   },  mounted:function () {  console.log("Vue實例掛載後:"+this.msg,this.$el);   },  beforeUpdate:function () {  console.log("Vue實例更新前:"+this.msg,this.$el);  },  updated:function () {  console.log("Vue實例更新後:"+this.msg,this.$el);  },  beforeDestroy:function () {  console.log("Vue實例銷燬前:"+this.msg,this.$el);  },  destroyed:function () {  console.log("Vue實例銷燬後:"+this.msg,this.$el);  }   })  function destroy() {  vm.$destroy();  } </script> </body> </html>  複製代碼

Vue生命週期示例二

<!DOCTYPE html>
<html lang="en"> <head>  <meta charset="UTF-8">  <title>Title</title> </head> <body> <div id="app">  {{name}} </div> <button onclick="destroy()">銷燬</button> <script src="../js/vue.js"></script> <script>  const vm=new Vue({  el:'#app',  data:{  name:"楊戩",  age:18  },  beforeCreate:function () {  console.group("Vue實例建立前");  console.log("數據是:"+this.$data);  console.log("掛載的元素是:"+this.$el);  console.groupEnd();  },  created:function () {  console.group("Vue實例建立後");  console.log("數據是:"+JSON.stringify(this.$data));  console.log("掛載的元素是:"+this.$el);  console.groupEnd();   },  beforeMount:function () {  console.group("Vue實例掛載前");  console.log("數據是:"+JSON.stringify(this.$data));  console.log(this.$el);  console.groupEnd();   },  mounted:function () {  console.group("Vue實例掛載後");  console.log("數據是:"+JSON.stringify(this.$data));  console.log(this.$el);  console.groupEnd();   },  beforeUpdate:function () {  console.group("Vue實例更新前");  console.log("數據是:"+JSON.stringify(this.$data));  console.log(this.$el);  console.groupEnd();  },  updated:function () {  console.group("Vue實例更新後");  console.log("數據是:"+JSON.stringify(this.$data));  console.log(this.$el);  console.groupEnd();  },  beforeDestroy:function () {  console.group("Vue實例銷燬前");  console.log("數據是:"+JSON.stringify(this.$data));  console.log(this.$el);  console.groupEnd();  },  destroyed:function () {  console.group("Vue實例銷燬後");  console.log("數據是:"+JSON.stringify(this.$data));  console.log(this.$el);  console.groupEnd();  }  });  function destroy() {  vm.$destroy();  } </script> </body> </html>  複製代碼

經過兩個實例的學習，對Vue的生命週期有必定的瞭解，可能有些朋友沒有領悟到其精髓，可是隨着深刻學習，我想你們會慢慢領悟到的。

接下來總結一下：

beforeCreate()：此時$el、data 的值都爲undefined，即el 和 data 並未初始化
created()：此時能夠拿到data的值，可是$el依舊爲undefined，即data完成了數據的初始化，el沒有
beforeMount()：$el的值爲「虛擬」的元素節點，dom未完成掛載，數據初始化完成，可是數據的雙向綁定仍是{{}},這是由於vue採用了虛擬dom技術
mounted()：數據和dom都完成掛載，在上一個週期佔位的數據把值渲染進去，通常請求會放在這個地方，由於這邊請求改變數據以後恰好能渲染

Vue實例的手動掛載和調用事件

vm.＄mount( [elementOrSelector] ) 若是 Vue 實例在實例化時沒有收到 el 選項，則它處於「未掛載」狀態，沒有關聯的 DOM 元素。可使用 vm.＄mount() 手動地掛載一個未掛載的實例，學習手動掛載和調用事件以前，我提取了一些vue實例經常使用的屬性和方法，帶有前綴＄便於與代理的data區分

vm.＄el：類型（HTMLElement）掛載元素，Vue實例的DOM根元素。即vm.$el===document.getElementById('節點')，注意：相等的狀況必須是實例建立以後才行，也就是created以後
vm.＄data：類型（Object），Vue實例觀察的數據對象
vm.＄props：類型（Object），當前組件接收到的 props 對象。Vue 實例代理了對其 props 對象屬性的訪問。
vm.＄options：類型（Object），用於當前 Vue 實例的初始化選項。須要在選項中包含自定義屬性時會有用處
vm.＄parent：類型（Vue實例），父實例，若是當前實例有的話
vm.＄root：類型（Vue實例），當前組件樹的根 Vue 實例。若是當前實例沒有父實例，此實例將會是其本身。
vm.＄children：類型（Array(Vue實例)），當前實例的直接子組件。須要注意 $children 並不保證順序，也不是響應式的。若是你發現本身正在嘗試使用 $children 來進行數據綁定，考慮使用一個數組配合 v-for 來生成子組件，而且使用 Array 做爲真正的來源。

手動掛載

接下來是介紹手動掛載和調用事件的經常使用方法，共有三個

var MyComponent = Vue.extend({
template: '<div>Hello!</div>' })  // 建立並掛載到 #app (會替換 #app) new MyComponent().＄mount('#app')  // 同上 new MyComponent({ el: '#app' })  // 或者，在文檔以外渲染而且隨後掛載 var component = new MyComponent().＄mount() document.getElementById('app').appendChild(component.＄el) 複製代碼

實例：

<!DOCTYPE html>
<html lang="en"> <head>  <meta charset="UTF-8">  <title>Title</title> </head> <body> <div id="app"></div> <button onclick="handleMount1()">手動掛載方式一</button> <button onclick="handleMount2()">手動掛載方式二</button> <button onclick="handleMount3()">手動掛載方式三</button> <script src="../js/vue.js"></script> <script>  const vm=new Vue({  data:{  name:'楊戩'  },  template: "<h2>{{name}}</h2>"  });  // 調用手動掛載方式一  function handleMount1() {  // 手動掛載到指定DOM元素  vm.$mount("#app")  }  // 調用手動掛載方式二  function handleMount2() {  // 手動掛載，觸發編譯  vm.$mount();  //將編譯要生成的內容元素添加到要掛在的DOM元素中，做爲子元素  document.getElementById("app").appendChild(vm.$el);   }  // 調用手動掛載方式三  function handleMount3() {  // 擴展出一個新的Vue構造器  const Component=Vue.extend({  template:"<h2>{{name}}</h2>"  });  const vm01=new Component({  el:'#app',  data:{  name:"楊戩"  }  })   } </script> </body> </html>  複製代碼