類型:string | Element
限制:只在用?new?創(chuàng)建實(shí)例時(shí)生效。
詳細(xì):
提供一個(gè)在頁(yè)面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo)。可以是 CSS 選擇器,也可以是一個(gè) HTMLElement 實(shí)例。
在實(shí)例掛載之后,元素可以用?vm.$el?訪問。
如果在實(shí)例化時(shí)存在這個(gè)選項(xiàng),實(shí)例將立即進(jìn)入編譯過(guò)程,否則,需要顯式調(diào)用?vm.$mount()手動(dòng)開啟編譯。
提供的元素只能作為掛載點(diǎn)。不同于 Vue 1.x,所有的掛載元素會(huì)被 Vue 生成的 DOM 替換。因此不推薦掛載 root 實(shí)例到?<html>?或者?<body>?上。
如果?render?函數(shù)和?template?屬性都不存在,掛載 DOM 元素的 HTML 會(huì)被提取出來(lái)用作模板,此時(shí),必須使用 Runtime + Compiler 構(gòu)建的 Vue 庫(kù)。
參考:
運(yùn)行時(shí) + 編譯器 vs. 只包含運(yùn)行時(shí)
類型:string
詳細(xì):
一個(gè)字符串模板作為 Vue 實(shí)例的標(biāo)識(shí)使用。模板將會(huì)?替換?掛載的元素。掛載元素的內(nèi)容都將被忽略,除非模板的內(nèi)容有分發(fā)插槽。
如果值以?#?開始,則它將被用作選擇符,并使用匹配元素的 innerHTML 作為模板。常用的技巧是用?<script type="x-template">?包含模板。
出于安全考慮,你應(yīng)該只使用你信任的 Vue 模板。避免使用其他人生成的內(nèi)容作為你的模板。
如果 Vue 選項(xiàng)中包含渲染函數(shù),該模板將被忽略。
參考:
類型:(createElement: () => VNode) => VNode
詳細(xì):
字符串模板的代替方案,允許你發(fā)揮 JavaScript 最大的編程能力。該渲染函數(shù)接收一個(gè)?createElement?方法作為第一個(gè)參數(shù)用來(lái)創(chuàng)建?VNode。
如果組件是一個(gè)函數(shù)組件,渲染函數(shù)還會(huì)接收一個(gè)額外的?context?參數(shù),為沒有實(shí)例的函數(shù)組件提供上下文信息。
Vue 選項(xiàng)中的?render?函數(shù)若存在,則 Vue 構(gòu)造函數(shù)不會(huì)從?template?選項(xiàng)或通過(guò)?el選項(xiàng)指定的掛載元素中提取出的 HTML 模板編譯渲染函數(shù)。
參考:渲染函數(shù)
2.2.0 新增
類型:(createElement: () => VNode, error: Error) => VNode
詳細(xì):
只在開發(fā)者環(huán)境下工作。
當(dāng)?render?函數(shù)遭遇錯(cuò)誤時(shí),提供另外一種渲染輸出。其錯(cuò)誤將會(huì)作為第二個(gè)參數(shù)傳遞到?renderError。這個(gè)功能配合 hot-reload 非常實(shí)用。
示例:
newVue({? render (h) {thrownewError('oops')? },? renderError (h, err) {returnh('pre', {style: {color:'red'}}, err.stack)? }}).$mount('#app')
參考:渲染函數(shù)