Vue2學習之旅四：Vue實例 + Vue組件實例

做者：心葉
時間：2018-04-27 11:23

本篇最終項目文件Github地址：github.com/paper520/vue.quick/tree/V4

另外，咱們維護了一個用於vue.js源碼學習而開發的小型前端框架，點擊進入github，歡迎交流意見！

Vue2學習之旅系列文章目錄

本文正式開始學習vue的方方面面，不過開始的學習仍是屬於基礎使用和理解，深刻的東西會隨着時間的流逝，慢慢道來。

Vue實例

項目啓動過程

看一下如今咱們的項目，想一想整個項目的啓動過程是什麼（以直接打開index.html的方法訪問爲例來講明）？

你首先打開了index.html，裏面只有一個寫了一個id='root'的div，還有你引入了打包以後的代碼，而後Vue本身確定運行了一下（能夠認爲是Vue初始化）。

接着，應該是執行了entry.js(由於打包是webpack打包的，你配置的入口文件就這一個)。

entry.js幹了什麼，是的，建立了一個Vue實例對象，而後這個對象管理的區域根據el屬性知道，應該是index.html中id='root'的那個div，所以餘下的事情就只有明白這個Vue實例對象是如何管理這片區域的就能夠了，這就是接下來的內容了。

什麼是Vue實例對象?

根據官方文檔的說明：每一個Vue應用都是經過用Vue函數建立一個新的Vue實例開始的。

你能夠簡單的理解，他就是一個普普統統的對象罷了，只不過這個對象被賦予了一些特殊的功能，讓咱們來了解一下他吧！

【咱們接下來都是在entry.js裏面建立的那個Vue對象上面進行實驗的】

一個Vue實例對象建立的方法以下：

var vm=new Vue({
    //一堆配置
});

所以，接下來要說的就是一些經常使用的配置（不是所有，比較特殊的之後應該會說，畢竟開始就所有，我怕彼此心都太累了）。

Vue實例對象基本配置

【1】el:選擇器| DOM結點

在咱們的項目中，咱們配置的是：

el:'#root'

這是一個字符串，有點相似CSS選擇器，它會使用查找到的結點做爲管理區域（固然還有別的CSS選擇器也能夠）。

除此以外，你還能夠直接傳遞一個結點，好比如今咱們修改一下代碼：

el: document.getElementById('root')

這樣也是能夠了，你能夠試試。

【2】render:(createElement:()=>VNode)=>VNode

上面的是ES6的箭頭函數寫法，舉個栗子：

((x,y)=>x+y)(1,2)

上面ES6的寫法等同於下面ES5的寫法：

(function(x,y){
    return x+y;
})(1,2);

簡單的說就是：(x,y)=>x+y就表示一個有二個參數x和y，返回x+y的函數，所以上面的函數用ES5的寫法就是：

function(createElement){
    //createElement是一個函數，返回類型爲VNode
    //這個函數的返回類型也應該是VNode
    return VNode;
}

備註：VNode是Vue編譯生成的虛擬節點，想一下Jquery節點，還有Node節點，是否是味道很像。

所以，我把項目中的render稍微改一下：

render: function (createElement) {
    return createElement(App);
}

是否是很清晰了，說白了，就是一個最後返回值是VNode的函數。

所以看見節點這二個字，應該能夠理解頁面爲何顯示的是App裏面的模板了吧，如何路由調整爲何配置的是.vue文件大概也有點感受了吧。

【3】router:VueRouter

這個比較容易理解，就是知道使用的路由配置是什麼，因爲項目中是：

router:router

看着很奇怪，咱們稍微修改一下：

//上面的import routerObj from './router';這一句要跟着修改一下
router: routerObj

基本的就到這裏，就三個，別的屬性由於還關聯不少東西，會一點點來講明。

Vue對象生命週期

官方的圖我就不放了，感受意義不大，推薦入門了之後能夠去看看，所以後面的文章可能會說。

下面咱們來先在entry.js裏面修改一下代碼，看看運行結果，下面是代碼：

//根對象
var vm = new Vue({
    //掛載點
    el: document.getElementById('root'),
    //2.使用剛剛的路由配置
    router: routerObj,
    //啓動組件
    render: function (createElement) {
        return createElement(App);
    },
    //下面是Vue對象的幾種狀態
    beforeCreate: function () {
        console.debug('Vue對象目前狀態：beforeCreate');
    },
    created: function () {
        console.debug('Vue對象目前狀態：created');
    },
    beforeMount: function () {
        console.debug('Vue對象目前狀態：beforeMount');
    },
    mounted: function () {
        console.debug('Vue對象目前狀態：mounted');
    },
    beforeUpdate: function () {
        console.debug('Vue對象目前狀態：beforeUpdate');
    },
    updated: function () {
        console.debug('Vue對象目前狀態：updated');
    },
    beforeDestroy: function () {
        console.debug('Vue對象目前狀態：beforeDestroy');
    },
    destroyed: function () {
        console.debug('Vue對象目前狀態：destroyed');
    }
});

運行一下看看控制檯。

所以，就是說，Vue對象從建立前到最後死亡，在各個階段狀態改變的時候，都提供了一個鉤子方法，你能夠註冊一下，若是你但願在特定狀態改變的時候乾點什麼的話。

到這裏，基本上Vue對象實例應該比較清楚了吧？看看咱們的代碼，應該只有那幾個.vue的文件裏面的東西沒有說清楚了（本文就是把前面寫過的代碼都說清楚，後面就能夠一個新知識點接着一個的來豐富項目，由於都沒有疑惑了，學習起來應該不會痛苦了吧！）。

Vue組件實例

說明

Vue組件的定義方法不是隻有咱們以前寫的創建.vue文件那一種，好比你還能夠經過Vue.component()的方法來建立，不過這些都之後吧，咱們這裏就只說明.vue文件這一種（不喜歡一會兒說太多，並且仔細想一想，不就是API嗎）。

【下面都是在PageTwo.vue裏面進行修改，菜單名稱修改成:Vue組件實例】

.vue文件的基本模板以下（下面都會是ES5的寫法，本人仍是不太喜歡ES6或者TS，原諒我，反正本質同樣）：

<template>
    
</template>

<script>
export default {
  //一些配置，和前面說的Vue實例相似
}
</script>

<style>

</style>

三個地方，分工明確：模板 + 控制 + 樣式

接下來咱們說明配置中經常使用的選項（不少具體的就留到後面一點點品位，好吧，留的有點多）：

經常使用配置

【1】data

先看看PageTwo.vue如今的代碼：

<template>
    <section>
        <input type="text" v-model="justDoIt">
        <div>
            輸入的數據：{{justDoIt}}
        </div>
    </section>
</template>
<script>
export default {
  //一些配置
  data() {
    return {
      justDoIt: "初始化數據"
    };
  }
};
</script>
<style>

</style>

模板中的代碼應該不用說了吧，前面一篇文章說的很清楚了，直接看看data。

其返回了一個鍵值對（還有別的寫法，推薦你這樣寫，由於這裏若是"初始化數據"這幾個字是變量，這種寫法造成了閉包，是安全的），在這裏就是給當前組件對象是data裏面添加了一個justDoIt的數據，而後上面或者別的地方纔能夠用，他就是幹了這事情。

【2】methods

接着，咱們添加一下methods屬性：

methods: {
    doIt() {
      alert(this.justDoIt);
    }
}

其實methods和data相似，只不過是用來添加的不是數據，而是方法，所以，你如今能夠在模板裏面添加下面代碼來調用這個方法（記住，添加的所有代碼必須由一個標籤包裹）：

<input type="button" value="DoIt" v-on:click="doIt()">

v-on:click就是相似原生的onClick，不過由於是vue的方法，你應該用他的。

如今，你能夠點擊一下頁面的按鈕試一下，是否是很舒服。

【3】watch

這個屬性是專門用來註冊監聽前面data裏面註冊的值改變的時候觸發的方法集合，好比你添加下面的代碼：

watch: {
    justDoIt: function(newval, oldval) {
      console.log("justDoIt改變了，新值爲：" + newval + ",舊值爲：" + oldval);
    }
  }

如何你運行一下，打開控制檯，修改輸入框的值的時候，是否是控制檯時刻打印了這句話。

【4】computed

這個叫作計算屬性，前面一篇文章說過了，不清楚的看看PageOne.vue，應該能夠明白。

簡單的說就是，它用到的data裏面的值改變的時候，本身會從新計算。

生命週期

和Vue對象同樣，也有相似的生命週期鉤子，你能夠試試，這裏就隨便提一下。

總結

說到這裏，VUE應該是入門了，後面開始，就會針對一個個小點來講明，祝你好運！