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的函數。