【Vue實(shí)例】

jerryloveemily 發(fā)布于2019-08-20 18:31 / 1646人閱讀

摘要：的介紹就直接連接到官網(wǎng)了，官網(wǎng)介紹很詳細(xì)了介紹構(gòu)造函數(shù)在使用之前我們首先需要構(gòu)建實(shí)例以上代碼是通過構(gòu)建了一個(gè)實(shí)例，構(gòu)造函數(shù)中是一個(gè)對(duì)象，上面代碼我用了一個(gè)空的對(duì)象，對(duì)象中可以包含數(shù)據(jù)模板掛載元素方法生命周期鉤子等選項(xiàng)。

使用過一段時(shí)間的vue1.0,現(xiàn)在vue已經(jīng)更新了很多版本了，語(yǔ)法在很多地方也有了變化。在此記錄一下重新學(xué)習(xí)的過程以及對(duì)vue的一些自己的理解。vue的介紹就直接連接到官網(wǎng)了，官網(wǎng)介紹很詳細(xì)了【Vue介紹】

1. 構(gòu)造函數(shù)

在使用之前我們首先需要構(gòu)建vue實(shí)例

var vm = new Vue({

    })

以上代碼是通過 new 構(gòu)建了一個(gè)vue實(shí)例，構(gòu)造函數(shù)中是一個(gè)對(duì)象，上面代碼我用了一個(gè)空的對(duì)象，對(duì)象中可以包含數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子等選項(xiàng)。

【我們可以通過extend對(duì)vue構(gòu)造器進(jìn)行擴(kuò)展】

var MyComponent = Vue.extend({
  // 擴(kuò)展選項(xiàng)
})

// 所有的 `MyComponent` 實(shí)例都將以預(yù)定義的擴(kuò)展選項(xiàng)被創(chuàng)建
var myComponentInstance = new MyComponent()

以上代碼中通過extend進(jìn)行了vue構(gòu)造函數(shù)的擴(kuò)展，我們使用 MyComponent 生成的每一個(gè)實(shí)例都將擁有擴(kuò)展中的屬性。

2. 屬性與方法

我們上面在創(chuàng)建實(shí)例的時(shí)候傳入的是一個(gè)空的對(duì)象，實(shí)際使用中這個(gè)對(duì)象中是有屬性的。

let data = {
    name: "blue"
}

let vm = new Vue({
    data
})

vm.name === data.name;  //true

data.name = "Crazy";
vm.name;    // Crazy

vm.name = "Pink";
data.name;  //Pink

上面代碼使用的是ES6的語(yǔ)法，應(yīng)該能懂。上面代碼中Vue實(shí)例【vm】在創(chuàng)建的過程中加入了一個(gè)data屬性，我們可以通過【vm】實(shí)例訪問到 name 屬性，說明vue實(shí)例會(huì)對(duì)data對(duì)象中的每一個(gè)屬性進(jìn)行【代理】（也就是托管），所以我們不管是更改【對(duì)象data】還是更改【實(shí)例vm】屬性都會(huì)同步name屬性。

let data = {
    name: "blue"
}

let vm = new Vue({
    data
})

vm.$data;

我們可以通過上面一種方式訪問到整個(gè)實(shí)例的【data屬性】對(duì)象，還有一些暴露在實(shí)例中的屬性和方法，他們都是用$為前綴。這兒就不多說了參考手冊(cè)里有詳細(xì)的說明。【API參考手冊(cè)】

3. Vue實(shí)例的生命周期

每個(gè) Vue 實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程。例如，實(shí)例需要配置數(shù)據(jù)觀測(cè)(data observer)、編譯模版、掛載實(shí)例到 DOM ，然后在數(shù)據(jù)變化時(shí)更新 DOM 。在這個(gè)過程中，實(shí)例也會(huì)調(diào)用一些【生命周期鉤子】（一些實(shí)例方法，用于生命周期中我們更愿意叫他們?yōu)殂^子函數(shù)），這就給我們提供了執(zhí)行自定義邏輯的機(jī)會(huì)。例如，created 這個(gè)鉤子在實(shí)例被創(chuàng)建之后被調(diào)用：

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 實(shí)例
    console.log("a is: " + this.a)
  }
})
// -> "a is: 1"

也有一些其它的鉤子，在實(shí)例生命周期的不同階段調(diào)用，如 mounted、updated、destroyed。鉤子的 this 指向調(diào)用它的 Vue 實(shí)例。一些用戶可能會(huì)問 Vue.js 是否有“控制器”的概念？答案是，沒有。組件的自定義邏輯可以分布在這些鉤子中。

4. Vue生命周期圖示

下面這張圖是官方給出的生命周期圖示，我只是把它翻譯成中文了