【目錄】
一、如何搭建一個Vue項目
二、Vue兩個版本的區(qū)別
三、template 和 render 怎么用
四、template與render函數(shù)對比
五、如何用 codesandbox.io 寫 Vue 代碼

【正文】

一、如何搭建一個Vue項目

工具 : Vue CLI （鏈接：https://cli.vuejs.org/zh/
）
按照文檔要求進行Vue環(huán)境搭建

二、Vue兩個版本的區(qū)別

(最佳實踐 : 使用非完整版，然后配合vue-loader和vue文件)

三、template 和 render 怎么用

1、template

類型 : string

詳細

• 一個字符串模板作為 Vue 實例的標識使用。模板將會替換掛載的元素。掛載元素的內(nèi)容都將被忽略，除非模板的內(nèi)容有分發(fā)插槽。

• 如果值以 # 開始，則它將被用作選擇符，并使用匹配元素的 innerHTML 作為模板。常用的技巧是用 <script type="x-template"> 包含模板。

（注:如果 Vue 選項中包含渲染函數(shù)，該模板將被忽略。）

//完整版可使用,需要編譯器
new Vue({
    template:'<div>{{ hi}}</div>'
)

2、render

類型 : (createElement: () => VNode) => VNode

詳細

• 字符串模板的代替方案，允許你發(fā)揮 JavaScript 最大的編程能力。該渲染函數(shù)接收一個 createElement 方法作為第一個參數(shù)用來創(chuàng)建 VNode。

• 如果組件是一個函數(shù)組件，渲染函數(shù)還會接收一個額外的 context 參數(shù)，為沒有實例的函數(shù)組件提供上下文信息。

（注:Vue 選項中的 render 函數(shù)若存在，則 Vue 構(gòu)造函數(shù)不會從 template 選項或通過 el 選項指定的掛載元素中提取出的 HTML 模板編譯渲染函數(shù)。）

【補充】
Vue中的render函數(shù)中有一個參數(shù)，這個參數(shù)是一個函數(shù)通常我們叫做h。其實這個h叫做createElement。render函數(shù)將createElement的返回值放到了HTML中

createElement這個函數(shù)中有3個參數(shù)

• 第一個參數(shù)（必要參數(shù)）：主要用于提供DOM的html內(nèi)容，類型可以是字符串、對象或函數(shù)

• 第二個參數(shù)（類型是對象，可選）：用于設(shè)置這個DOM的一些樣式、屬性、傳的組件的參數(shù)、綁定事件之類

• 第三個參數(shù)（類型是數(shù)組，數(shù)組元素類型是VNode，可選）：主要是指該結(jié)點下還有其他結(jié)點，用于設(shè)置分發(fā)的內(nèi)容，包括新增的其他組件。注意，組件樹中的所有VNode必須是唯一的

//不需要編譯器
new Vue({
    render (h) {
        return h ('div',this.hi)
    }
})

四、template與render函數(shù)對比

1、相同之處：

render 函數(shù) 跟 template 一樣都是創(chuàng)建 html 模板

2、不同之處：

• Template適合邏輯簡單，render適合復(fù)雜邏輯。

• 使用者template理解起來相對容易，但靈活性不足；自定義render函數(shù)靈活性高，但對使用者要求較高。

• render的性能較高，template性能較低。

• 基于上一點，我們通過vue組件渲染流程圖知道，使用render函數(shù)渲染沒有編譯過程，相當(dāng)于使用者直接將代碼給程序。所以，使用它對使用者要求高，且易出現(xiàn)錯誤

• render 函數(shù)的優(yōu)先級要比template的級別要高，但是要注意的是Mustache(雙花括號)語法就不能再次使用

參考鏈接
https://cn.vuejs.org/v2/api/
https://www.cnblogs.com/liqiang666/p/12175465.html

五、如何用 codesandbox.io 寫 Vue 代碼

步驟
1、進入codesandbox.io網(wǎng)站 : https://codesandbox.io/s/
2、選擇vue圖標