Vue 實例詳解與生命週期

時間  2019-11-18
標籤 vue 實例 詳解 生命週期 简体版
原文   原文鏈接

Vue 實例詳解與生命週期

Vue 的實例是 Vue 框架的入口，其實也就是前端的 ViewModel，它包含了頁面中的業務邏輯處理、數據模型等，固然它也有本身的一系列的生命週期的事件鉤子，輔助咱們進行對整個 Vue 實例生成、編譯、掛着、銷燬等過程進行 js 控制。css

Vue 實例初始化的選項配置對象詳解

前面咱們已經用了不少次 new Vue({...})的代碼，並且 Vue 初始化的選項都已經用了data、methods、el、computedd等,估計您看到這裏時，應該已經都明白了他們的做用，咱們就詳細講解一下他們的使用狀況。更詳細的請參考官網內容html

Vue 實例的的 data 對象

  • 介紹

Vue 的實例的數據對象 data 咱們已經用了不少了，數據綁定離不開 data 裏面的數據。也是 Vue 的核心屬性。 它是 Vue 綁定數據到 HTML 標籤的數據源泉，另外 Vue 框架會自動監視 data 裏面的數據變化，自動更新數據到 HTML 標籤上去。本質原理是：Vue 會自動將 data 裏面的數據進行遞歸轉換成 getter 和 setter，而後就能夠自動更新 HTML 標籤了，由於 getter 和 setter 因此老的瀏覽器（ie8） 不支持 vue。前端

  • data 對象的類型：vue

    • 類型是 Object 或者 Function。
    • 若是是組件，data 必須是 Function 類型。【後面學了組件後就明白了，暫時對組件先放放。】

  • 實例：git

// 建立普通的Vue實例
var vm = new Vue({
  data: data
});

// 組件定義【後面會詳細講的】
// Vue.extend() 中 data 必須是函數
var Component = Vue.extend({
  data: function() {
    //這裏必須是函數！！！！
    return { a: 1 };
  }
});

 

當一個 Vue 實例被建立時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的全部的屬性。當這些屬性的值發生改變時，視圖將會產生「響應」，即匹配更新爲新的值。github

若是你添加一個新的屬性,新增長的屬性改動將不會觸發任何視圖的更新。 好比： vm.b = 192 b 屬性爲新增長的屬性話，不會引發視圖更新。web

若是，想在後添加的屬性上也跟蹤響應變化，那麼就須要調用vue的全局的set方法或者實例的$set方法了。例如：ajax

vm.$set(this.User, 'propName', 'propValue')

 

Vue 實例的 computed

  • 介紹

Vue 的計算屬性（computed)的屬性會自動混入 Vue 的實例中。全部 getter 和 setter 的 this 上下文自動地綁定爲 Vue 實例。這就很強大了，再計算屬性中定義的函數裏面能夠直接使用指向了 vue 實例的 this，異常方便的啊。api

  • 類型

{ 鍵：函數} { [key: string]: Function | { get: Function, set: Function } } 固然，能夠省略 setter,若是省略了 setter，那麼值就能夠是普通函數，可是必須有返回值。瀏覽器

  • 官方的實例
var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 僅讀取，值只須爲函數
    aDouble: function () {
      return this.a * 2
    },
    // 讀取和設置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // -> 2
vm.aPlus = 3
vm.a       // -> 2
vm.aDouble // -> 4

 

methods

  • 類型: { [key: string]: Function }

  • 詳細:

methods 將被混入到 Vue 實例中。能夠直接經過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定爲 Vue 實例。

注意，不該該使用箭頭函數來定義 method 函數 (例如 plus: () => this.a++)。理由是箭頭函數綁定了父級做用域的上下文，因此 this 將不會按照指望指向 Vue 實例，this.a 將是 undefined。

  • 示例:
var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function() {
      this.a++;
    }
  }
});
vm.plus();
vm.a; // 2

 

watch

  • 類型

{ [key: string]: string | Function | Object }

  • 詳細:

一個對象，鍵是須要觀察的表達式，值是對應回調函數。值也能夠是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每個屬性。

  • 示例:
var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3
  },
  watch: {
    // 監控a變量變化的時候，自動執行此函數
    a: function(val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal);
    },
    // 深度 watcher
    c: {
      handler: function(val, oldVal) {
        /* ... */
      },
      deep: true
    }
  }
});
vm.a = 2; // -> new: 2, old: 1
//注意，不該該使用箭頭函數來定義 watcher 函數 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函數綁定了父級做用域的上下文，因此 this 將不會按照指望指向 Vue 實例，this.updateAutocomplete 將是 undefined。

 

參考綜合案例：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入門之數據監控</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ number }}</p>
    <input type="button" name="btnGetNumber" value="增長" v-on:click="getNumber()">
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        number: 1
      },
      methods: {
        // 事件響應方法的邏輯代碼
        getNumber: function (e) {
          this.number += 1;   // 不論是內聯方法調用，仍是綁定事件處理器兩種方式執行事件響應方法的時候 this都是指向 app
        }
      },
      watch: {
        // 監控number的變化，並自動執行下面的函數
        number: function (val, oldVal) {
          console.log('val:' + val + ' - oldVal: ' + oldVal);
        }
      }
    });
  </script>
</body>
</html>

 

設置 el 的詳解

  • 類型

string | HTMLElement

限制： 只在由 new 建立的實例中遵照。

  • 詳細：

提供一個在頁面上已存在的 DOM 元素做爲 Vue 實例的掛載目標,也就是說 Vue 綁定數據到哪裏去找。能夠是CSS 選擇器，也能夠是一個 HTMLElement實例。

在實例掛載以後(生命週期的內容後面會詳細講的奧)， 元素能夠用 vm.$el 訪問。

若是這個選項在實例化時有做用，實例將當即進入編譯過程，不然，須要顯式調用 vm.$mount() 手動開啓編譯。

// 幾乎全部例子都用到這個，因此就再也不贅述
var app = new Vue({
  el: '#app',
  ...
});

 

Vue 實例的生命週期

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

在 Vue 的整個生命週期中，它提供了一系列的事件，可讓咱們註冊 js 方法，可讓咱們達到控制整個過程的目的地，哇賽，若是你搞過 Asp.Net WebForm 的話，你會發現整個就是 WebForm 的翻版嘛哈哈。值得注意的是，在這些事件響應方法中的 this 直接指向的是 vue 的實例。

首先看看下面官網的一張生命週期的圖，我作一下標註，看看總體的流程，後面咱們上代碼作一下效果。

生命週期圖

Vue 提供的能夠註冊的鉤子都在上圖片的紅色框標註。 他們是：

  • beforeCreate

在實例初始化以後，數據觀測(data observer) 和 event/watcher 事件配置以前被調用。

  • created

實例已經建立完成以後被調用。在這一步，實例已完成如下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

  • beforeMount

在掛載開始以前被調用：相關的 render 函數首次被調用。

  • mounted

el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。

  • beforeUpdate

數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前。 你能夠在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。

  • updated

因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。

當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態，由於這可能會致使更新無限循環。

該鉤子在服務器端渲染期間不被調用。

  • beforeDestroy

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

  • destroyed

Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。 該鉤子在服務器端渲染期間不被調用。

接下來咱們作一個例子，看一下 Vue 中全部的生命週期怎麼用的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue的實例生命週期</title>
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
  <div id="app">
    <p ref="k">{{number}}</p>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        number: 123
      },
      beforeCreate: function () {
        console.log('%cbeforeCreate 鉤子執行...', 'color: red; font-size: 20px;');
        console.log('%cthis.$el %o :', 'color:green;',this.$el);
        console.log(this.number); // 拿不到的
        console.log(this.$refs.k);
      },
      created: function () {
        console.log('%ccteated 鉤子執行...', 'color: red; font-size: 20px;');
        console.log(this.number)
        console.log('%cthis.$el %o :', 'color:green;',this.$el);
        // ajax 請求
        // 直接操做dom節點
        this.$nextTick(()=>{
          console.log('nextTick')
          console.log(this.$refs.k);
        });
      },
      beforeMount: function () {
        console.log('%cbeforeMount 鉤子執行...','color: red; font-size: 20px;');
        console.log(this.number)
        console.log('%cthis.$el %o :', 'color:green;',this.$el);
        console.log(this.$refs.k);
      },
      mounted: function () {
        console.log('%cmounted 鉤子執行...','color: red; font-size: 20px;');
        console.log(this.number)
        console.log('%cthis.$el %o :', 'color:green;',this.$el);
        console.log(this.$refs.k);
      },
      beforeUpdate: function () {
        console.log('%cbeforeUpdate 鉤子執行...','color: red; font-size: 20px;');
        console.log(this.number)
        console.log('%cthis.$el %o :', 'color:green;',this.$el);
        console.log(this.$refs.k);

      },
      updated: function () {
        console.log('%cupdated 鉤子執行...','color: red; font-size: 20px;');
        console.log(this.number)
        console.log('%cthis.$el %o :', 'color:green;',this.$el);
        console.log(this.$refs.k);

      },
      beforeDestroy: function () {
        console.log('%cbeforeDestroy 鉤子執行...','color: red; font-size: 20px;');
        console.log(this.number)
        console.log('%cthis.$el %o :', 'color:green;',this.$el);
        console.log(this.$refs.k);

      },
      destroyed: function () {
        console.log('%cdestroyed 鉤子執行...','color: red; font-size: 20px;');
        console.log(this.number)
        console.log('%cthis.$el %o :', 'color:green;',this.$el);
        console.log(this.$refs.k);

      }
    });
  </script>
</body>
</html>

 

若是是配合上子組件的話，實例的生命週期的鉤子執行的過程會被摻入一些子組件的生命週期鉤子執行，具體等咱們組件部分講完後再加入。

Vue 實例的全局配置

這一塊都是一些小的知識點，我就不贅述了，直接 copy 官網 Vue.config 是一個對象，包含 Vue 的全局配置。能夠在啓動應用以前修改下列屬性：

  • silent

    • 類型： boolean

    • 默認值： false

    • 用法：

    Vue.config.silent = true; //取消 Vue 全部的日誌與警告。

  • optionMergeStrategies

    • 類型： { [key: string]: Function }

    • 默認值： {}

    • 用法：

    Vue.config.optionMergeStrategies._my_option = function(parent, child, vm) { return child + 1; }; const Profile = Vue.extend({ _my_option: 1 }); // Profile.options._my_option = 2 //自定義合併策略的選項。 //合併策略選項分別接受第一個參數做爲父實例，第二個參數爲子實例，Vue實例上下文被做爲第三個參數傳入。

  • devtools

    • 類型： boolean

    • 默認值： true (生產版爲 false)

    • 用法：

    // 務必在加載 Vue 以後，當即同步設置如下內容 Vue.config.devtools = true; //配置是否容許 vue-devtools 檢查代碼。開發版本默認爲 true，生產版本默認爲 false。生產版本設爲 true 能夠啓用檢查。

  • errorHandler

    • 類型： Function

    • 默認值： 默認拋出錯誤

    • 用法：

    Vue.config.errorHandler = function(err, vm) { // handle error }; //指定組件的渲染和觀察期間未捕獲錯誤的處理函數。這個處理函數被調用時，可獲取錯誤信息和 Vue 實例。 //Sentry, an error tracking service, provides official integration using this option.
- ignoredElements

  - 類型: Array<string> - 默認值: [] - 用法: ```js
 Vue.config.ignoredElements = [
    'my-custom-web-component', 'another-web-component'
  ]
  須使 Vue 忽略在 Vue 以外的自定義元素 (e.g., 使用了 Web Components APIs)。不然，它會假設你忘記註冊全局組件或者拼錯了組件名稱，從而拋出一個關於 Unknown custom element 的警告。

 

  • keyCodes

    • 類型： { [key: string]: number | Array }

    • 默認值： {}

    • 用法：

    Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  mediaPlayPause: 179,
  up: [38, 87]
};
//給 v-on 自定義鍵位別名。

     

Vue 的全局 API

Vue 的全局 API 提供大量的功能，我這裏就給你們羅列幾個經常使用的結果，其餘的仍是參考官網.

Vue.nextTick

語法： Vue.nextTick( [callback, context] )

參數：
{Function} [callback]
{Object} [context]

 

 

用法： 在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。

// 修改數據
vm.msg = 'Hello';
// DOM 尚未更新
Vue.nextTick(function() {
  // DOM 更新了
});

 

Vue.set

語法： Vue.set( object, key, value )

參數：
{Object} object
{string} key
{any} value
返回值： 設置的值.

 

用法：
設置對象的屬性。若是對象是響應式的，確保屬性被建立後也是響應式的，同時觸發視圖更新。這個方法主要用於避開 Vue 不能檢測屬性被添加的限制。 注意對象不能是 Vue 實例，或者 Vue 實例的根數據對象。

Vue.compile

  • 語法： Vue.compile( template )

  • 參數：

{string} template

  • 用法：
//在render函數中編譯模板字符串。只在獨立構建時有效

var res = Vue.compile('<div><span>{{ msg }}</span></div>');
new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
});

 

全局 API 總結

其實還有幾個其餘的全局 API，不打算在這裏講了，好比擴展組件 Vue.extend 的用法、Vue.use 加載插件、Vue.filter 加載過濾器、Vue.directive 自定義指令等 後面再講其餘 Vue 的知識點的時候，再加上這些，全局 API 其實就是 Vue 類型的靜態方法，全局範圍內均可以使用的，某些實例的方法本質也是調用了這些全局的，後面用到時候再說。

Vue 實例與生命週期總結

Vue 的實例封裝的仍是挺有藝術性的，很符合開發者的思惟規範，它的生命週期也很是清晰，使用起來也很是方便。Vue 確實一個好框架。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程