渲染函數(shù) & JSX詳情
一、基礎
Vue 推薦在絕大多數(shù)情況下使用模板來創(chuàng)建你的 HTML。然而在一些場景中，你真的需要 JavaScript 的完全編程的能力。這時我們可以用渲染函數(shù)，它比模板更接近編譯器
讓我們深入一個簡單的例子，這個例子里 render 函數(shù)很實用。假設我們要生成一些帶錨點的標題：
<h1>
<a name="hello-world" href="#hello-world" rel="external nofollow" >
Hello world!
</a>
</h1>
對于上面的 HTML，我們決定這樣定義組件接口：
<anchored-heading :level="1">Hello world!</anchored-heading>
當開始寫一個只能通過 level prop 動態(tài)生成標題 (heading) 的組件時，你可能很快想到這樣實現(xiàn)：
<script type="text/x-template" id="anchored-heading-template">
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else-if="level === 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else-if="level === 6">
<slot></slot>
</h6>
</script>
Vue.component('anchored-heading', {
template: '#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
}
})
這里用模板并不是最好的選擇：不但代碼冗長，而且在每一個級別的標題中重復書寫了 <slot></slot>，在要插入錨點元素時還要再次重復。
雖然模板在大多數(shù)組件中都非常好用，但是顯然在這里它就不合適了。那么，我們來嘗試使用 render 函數(shù)重寫上面的例子：
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 標簽名稱
this.$slots.default // 子節(jié)點數(shù)組
)
},
props: {
level: {
type: Number,
required: true
}
}
})
看起來簡單多了！這樣代碼精簡很多，但是需要非常熟悉 Vue 的實例 property。在這個例子中，你需要知道，向組件中傳遞不帶 v-slot 指令的子節(jié)點時，比如 anchored-heading 中的 Hello world!，這些子節(jié)點被存儲在組件實例中的 $slots.default 中。如果你還不了解，在深入渲染函數(shù)之前推薦閱讀實例 property API。
二、節(jié)點、樹以及虛擬 DOM
在深入渲染函數(shù)之前，了解一些瀏覽器的工作原理是很重要的。以下面這段 HTML 為例：
<div> <h1>My title</h1> Some text content <!-- TODO: Add tagline --> </div>
當瀏覽器讀到這些代碼時，它會建立一個“DOM 節(jié)點”樹來保持追蹤所有內容，如同你會畫一張家譜樹來追蹤家庭成員的發(fā)展一樣。
上述 HTML 對應的 DOM 節(jié)點樹如下圖所示：
每個元素都是一個節(jié)點。每段文字也是一個節(jié)點。甚至注釋也都是節(jié)點。一個節(jié)點就是頁面的一個部分。就像家譜樹一樣，每個節(jié)點都可以有孩子節(jié)點 (也就是說每個部分可以包含其它的一些部分)。
高效地更新所有這些節(jié)點會是比較困難的，不過所幸你不必手動完成這個工作。你只需要告訴 Vue 你希望頁面上的 HTML 是什么，這可以是在一個模板里：
<h1>{{ blogTitle }}</h1>
或者一個渲染函數(shù)里：
render: function (createElement) {
return createElement('h1', this.blogTitle)
}
在這兩種情況下，Vue 都會自動保持頁面的更新，即便 blogTitle 發(fā)生了改變。
1、虛擬 DOM
Vue 通過建立一個虛擬 DOM 來追蹤自己要如何改變真實 DOM。請仔細看這行代碼：
return createElement('h1', this.blogTitle)
createElement 到底會返回什么呢？其實不是一個實際的 DOM 元素。它更準確的名字可能是 createNodeDescription，因為它所包含的信息會告訴 Vue 頁面上需要渲染什么樣的節(jié)點，包括及其子節(jié)點的描述信息。我們把這樣的節(jié)點描述為“虛擬節(jié)點 (virtual node)”，也常簡寫它為“VNode”?！疤摂M DOM”是我們對由 Vue 組件樹建立起來的整個 VNode 樹的稱呼。
三、createElement 參數(shù)
接下來你需要熟悉的是如何在 createElement 函數(shù)中使用模板中的那些功能。這里是 createElement 接受的參數(shù)：
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一個 HTML 標簽名、組件選項對象，或者
// resolve 了上述任何一種的一個 async 函數(shù)。必填項。
'div',
// {Object}
// 一個與模板中 attribute 對應的數(shù)據(jù)對象。可選。
{
// (詳情見下一節(jié))
},
// {String | Array}
// 子級虛擬節(jié)點 (VNodes)，由 `createElement()` 構建而成，
// 也可以使用字符串來生成“文本虛擬節(jié)點”。可選。
[
'先寫一些文字',
createElement('h1', '一則頭條'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
1、深入數(shù)據(jù)對象
有一點要注意：正如 v-bind:class 和 v-bind:style 在模板語法中會被特別對待一樣，它們在 VNode 數(shù)據(jù)對象中也有對應的頂層字段。該對象也允許你綁定普通的 HTML attribute，也允許綁定如 innerHTML 這樣的 DOM property (這會覆蓋 v-html 指令)。
{
// 與 `v-bind:class` 的 API 相同，
// 接受一個字符串、對象或字符串和對象組成的數(shù)組
'class': {
foo: true,
bar: false
},
// 與 `v-bind:style` 的 API 相同，
// 接受一個字符串、對象，或對象組成的數(shù)組
style: {
color: 'red',
fontSize: '14px'
},
// 普通的 HTML attribute
attrs: {
id: 'foo'
},
// 組件 prop
props: {
myProp: 'bar'
},
// DOM property
domProps: {
innerHTML: 'baz'
},
// 事件監(jiān)聽器在 `on` 內，
// 但不再支持如 `v-on:keyup.enter` 這樣的修飾器。
// 需要在處理函數(shù)中手動檢查 keyCode。
on: {
click: this.clickHandler
},
// 僅用于組件，用于監(jiān)聽原生事件，而不是組件內部使用
// `vm.$emit` 觸發(fā)的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定義指令。注意，你無法對 `binding` 中的 `oldValue`
// 賦值，因為 Vue 已經(jīng)自動為你進行了同步。
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// 作用域插槽的格式為
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果組件是其它組件的子組件，需為插槽指定名稱
slot: 'name-of-slot',
// 其它特殊頂層 property
key: 'myKey',
ref: 'myRef',
// 如果你在渲染函數(shù)中給多個元素都應用了相同的 ref 名，
// 那么 `$refs.myRef` 會變成一個數(shù)組。
refInFor: true
}
2、完整示例
有了這些知識，我們現(xiàn)在可以完成我們最開始想實現(xiàn)的組件：
var getChildrenTextContent = function (children) {
return children.map(function (node) {
return node.children
? getChildrenTextContent(node.children)
: node.text
}).join('')
}
Vue.component('anchored-heading', {
render: function (createElement) {
// 創(chuàng)建 kebab-case 風格的 ID
var headingId = getChildrenTextContent(this.$slots.default)
.toLowerCase()
.replace(/\W+/g, '-')
.replace(/(^-|-$)/g, '')
return createElement(
'h' + this.level,
[
createElement('a', {
attrs: {
name: headingId,
href: '#' + headingId
}
}, this.$slots.default)
]
)
},
props: {
level: {
type: Number,
required: true
}
}
})
3、約束
VNode 必須唯一
組件樹中的所有 VNode 必須是唯一的。這意味著，下面的渲染函數(shù)是不合法的：
render: function (createElement) {
var myParagraphVNode = createElement('p', 'hi')
return createElement('div', [
// 錯誤 - 重復的 VNode
myParagraphVNode, myParagraphVNode
])
}
如果你真的需要重復很多次的元素/組件，你可以使用工廠函數(shù)來實現(xiàn)。例如，下面這渲染函數(shù)用完全合法的方式渲染了 20 個相同的段落：
render: function (createElement) {
return createElement('div',
Array.apply(null, { length: 20 }).map(function () {
return createElement('p', 'hi')
})
)
}
四、使用 JavaScript 代替模板功能
1、v-if 和 v-for
只要在原生的 JavaScript 中可以輕松完成的操作，Vue 的渲染函數(shù)就不會提供專有的替代方法。比如，在模板中使用的 v-if 和 v-for：
<ul v-if="items.length">
<li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>
這些都可以在渲染函數(shù)中用 JavaScript 的 if/else 和 map 來重寫：
props: ['items'],
render: function (createElement) {
if (this.items.length) {
return createElement('ul', this.items.map(function (item) {
return createElement('li', item.name)
}))
} else {
return createElement('p', 'No items found.')
}
}
2、v-model
渲染函數(shù)中沒有與 v-model 的直接對應——你必須自己實現(xiàn)相應的邏輯：
props: ['value'],
render: function (createElement) {
var self = this
return createElement('input', {
domProps: {
value: self.value
},
on: {
input: function (event) {
self.$emit('input', event.target.value)
}
}
})
}
這就是深入底層的代價，但與 v-model 相比，這可以讓你更好地控制交互細節(jié)。
3、事件 & 按鍵修飾符
對于 .passive、.capture 和 .once 這些事件修飾符，Vue 提供了相應的前綴可以用于 on：
| 修飾符 | 前綴 |
|---|---|
| .passive | & |
| .capture | ! |
| .once | ~ |
| .capture.once 或 .once.capture |
~! |
例如：
on: {
'!click': this.doThisInCapturingMode,
'~keyup': this.doThisOnce,
'~!mouseover': this.doThisOnceInCapturingMode
}
對于所有其它的修飾符，私有前綴都不是必須的，因為你可以在事件處理函數(shù)中使用事件方法：
| 修飾符 | 處理函數(shù)中的等價操作 |
|---|---|
| .stop | event.stopPropagation() |
| .prevent | event.preventDefault() |
| .self | if (event.target !== event.currentTarget) return |
| 按鍵： .enter, .13 |
if (event.keyCode !== 13) return (對于別的按鍵修飾符來說，可將 13 改為另一個按鍵碼) |
| 修飾鍵： .ctrl, .alt, .shift, .meta |
if (!event.ctrlKey) return (將 ctrlKey 分別修改為 altKey、shiftKey 或者 metaKey) |
這里是一個使用所有修飾符的例子：
on: {
keyup: function (event) {
// 如果觸發(fā)事件的元素不是事件綁定的元素
// 則返回
if (event.target !== event.currentTarget) return
// 如果按下去的不是 enter 鍵或者
// 沒有同時按下 shift 鍵
// 則返回
if (!event.shiftKey || event.keyCode !== 13) return
// 阻止 事件冒泡
event.stopPropagation()
// 阻止該元素默認的 keyup 事件
event.preventDefault()
// ...
}
}
4、插槽
你可以通過 this.$slots 訪問靜態(tài)插槽的內容，每個插槽都是一個 VNode 數(shù)組：
render: function (createElement) {
// `<div><slot></slot></div>`
return createElement('div', this.$slots.default)
}
也可以通過 this.$scopedSlots 訪問作用域插槽，每個作用域插槽都是一個返回若干 VNode 的函數(shù)：
props: ['message'],
render: function (createElement) {
// `<div><slot :text="message"></slot></div>`
return createElement('div', [
this.$scopedSlots.default({
text: this.message
})
])
}
如果要用渲染函數(shù)向子組件中傳遞作用域插槽，可以利用 VNode 數(shù)據(jù)對象中的 scopedSlots 字段：
render: function (createElement) {
// `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
return createElement('div', [
createElement('child', {
// 在數(shù)據(jù)對象中傳遞 `scopedSlots`
// 格式為 { name: props => VNode | Array<VNode> }
scopedSlots: {
default: function (props) {
return createElement('span', props.text)
}
}
})
])
}
五、JSX
如果你寫了很多 render 函數(shù)，可能會覺得下面這樣的代碼寫起來很痛苦：
createElement(
'anchored-heading', {
props: {
level: 1
}
}, [
createElement('span', 'Hello'),
' world!'
]
)
特別是對應的模板如此簡單的情況下：
<anchored-heading :level="1"> <span>Hello</span> world! </anchored-heading>
這就是為什么會有一個 Babel 插件，用于在 Vue 中使用 JSX 語法，它可以讓我們回到更接近于模板的語法上。
import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
el: '#demo',
render: function (h) {
return (
<AnchoredHeading level={1}>
<span>Hello</span> world!
</AnchoredHeading>
)
}
})
將 h 作為
createElement的別名是 Vue 生態(tài)系統(tǒng)中的一個通用慣例，實際上也是 JSX 所要求的。從 Vue 的Babel插件的 3.4.0 版本開始，我們會在以ES2015語法聲明的含有 JSX 的任何方法和 getter 中 (不是函數(shù)或箭頭函數(shù)中) 自動注入const h = this.$createElement，這樣你就可以去掉 (h) 參數(shù)了。對于更早版本的插件，如果 h 在當前作用域中不可用，應用會拋錯。
六、函數(shù)式組件
之前創(chuàng)建的錨點標題組件是比較簡單，沒有管理任何狀態(tài)，也沒有監(jiān)聽任何傳遞給它的狀態(tài)，也沒有生命周期方法。實際上，它只是一個接受一些 prop 的函數(shù)。在這樣的場景下，我們可以將組件標記為 functional，這意味它無狀態(tài) (沒有響應式數(shù)據(jù))，也沒有實例 (沒有 this 上下文)。一個函數(shù)式組件就像這樣：
Vue.component('my-component', {
functional: true,
// Props 是可選的
props: {
// ...
},
// 為了彌補缺少的實例
// 提供第二個參數(shù)作為上下文
render: function (createElement, context) {
// ...
}
})
注意：在 2.3.0 之前的版本中，如果一個函數(shù)式組件想要接收 prop，則 props 選項是必須的。在 2.3.0 或以上的版本中，你可以省略 props 選項，所有組件上的 attribute 都會被自動隱式解析為 prop。
當使用函數(shù)式組件時，該引用將會是 HTMLElement，因為他們是無狀態(tài)的也是無實例的。
在 2.5.0 及以上版本中，如果你使用了單文件組件，那么基于模板的函數(shù)式組件可以這樣聲明：
<template functional> </template>
組件需要的一切都是通過 context 參數(shù)傳遞，它是一個包括如下字段的對象：
props：提供所有 prop 的對象children：VNode 子節(jié)點的數(shù)組slots：一個函數(shù)，返回了包含所有插槽的對象scopedSlots：(2.6.0+) 一個暴露傳入的作用域插槽的對象。也以函數(shù)形式暴露普通插槽。data：傳遞給組件的整個數(shù)據(jù)對象，作為 createElement 的第二個參數(shù)傳入組件parent：對父組件的引用listeners：(2.3.0+) 一個包含了所有父組件為當前組件注冊的事件監(jiān)聽器的對象。這是 data.on 的一個別名。injections：(2.3.0+) 如果使用了 inject 選項，則該對象包含了應當被注入的 property。
在添加 functional: true 之后，需要更新我們的錨點標題組件的渲染函數(shù)，為其增加 context 參數(shù)，并將 this.$slots.default 更新為 context.children，然后將 this.level 更新為 context.props.level。
因為函數(shù)式組件只是函數(shù)，所以渲染開銷也低很多。
在作為包裝組件時它們也同樣非常有用。比如，當你需要做這些時：
- 程序化地在多個組件中選擇一個來代為渲染；
- 在將 children、props、data 傳遞給子組件之前操作它們。
下面是一個 smart-list 組件的例子，它能根據(jù)傳入 prop 的值來代為渲染更具體的組件：
var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }
Vue.component('smart-list', {
functional: true,
props: {
items: {
type: Array,
required: true
},
isOrdered: Boolean
},
render: function (createElement, context) {
function appropriateListComponent () {
var items = context.props.items
if (items.length === 0) return EmptyList
if (typeof items[0] === 'object') return TableList
if (context.props.isOrdered) return OrderedList
return UnorderedList
}
return createElement(
appropriateListComponent(),
context.data,
context.children
)
}
})
1、向子元素或子組件傳遞 attribute 和事件
在普通組件中，沒有被定義為 prop 的 attribute 會自動添加到組件的根元素上，將已有的同名 attribute 進行替換或與其進行智能合并。
然而函數(shù)式組件要求你顯式定義該行為：
Vue.component('my-functional-button', {
functional: true,
render: function (createElement, context) {
// 完全透傳任何 attribute、事件監(jiān)聽器、子節(jié)點等。
return createElement('button', context.data, context.children)
}
})
通過向 createElement 傳入 context.data 作為第二個參數(shù)，我們就把 my-functional-button 上面所有的 attribute 和事件監(jiān)聽器都傳遞下去了。事實上這是非常透明的，以至于那些事件甚至并不要求 .native 修飾符。
如果你使用基于模板的函數(shù)式組件，那么你還需要手動添加 attribute 和監(jiān)聽器。因為我們可以訪問到其獨立的上下文內容，所以我們可以使用 data.attrs 傳遞任何 HTML attribute，也可以使用 listeners (即 data.on 的別名) 傳遞任何事件監(jiān)聽器。
<template functional>
<button
class="btn btn-primary"
v-bind="data.attrs"
v-on="listeners"
>
<slot/>
</button>
</template>
2、slots() 和 children 對比
你可能想知道為什么同時需要 slots() 和 children。slots().default 不是和 children 類似的嗎？在一些場景中，是這樣——但如果是如下的帶有子節(jié)點的函數(shù)式組件呢？
<my-functional-component>
<p v-slot:foo>
first
</p>
<p>second</p>
</my-functional-component>
對于這個組件，children 會給你兩個段落標簽，而 slots().default 只會傳遞第二個匿名段落標簽，slots().foo 會傳遞第一個具名段落標簽。同時擁有 children 和 slots()，因此你可以選擇讓組件感知某個插槽機制，還是簡單地通過傳遞 children，移交給其它組件去處理。
七、模板編譯
你可能會有興趣知道，Vue 的模板實際上被編譯成了渲染函數(shù)。這是一個實現(xiàn)細節(jié)，通常不需要關心。但如果你想看看模板的功能具體是怎樣被編譯的，可能會發(fā)現(xiàn)會非常有意思。下面是一個使用 Vue.compile 來實時編譯模板字符串的簡單示例：
<div>
<header>
<h1>I'm a template!</h1>
</header>
<p v-if="message">{{ message }}</p>
<p v-else>No message.</p>
</div>
render:
function anonymous(
) {
with(this){return _c('div',[_m(0),(message)?_c('p',[_v(_s(message))]):_c('p',[_v("No message.")])])}
}
staticRenderFns:
_m(0): function anonymous(
) {
with(this){return _c('header',[_c('h1',[_v("I'm a template!")])])}
}
到此這篇關于渲染函數(shù) & JSX詳情的文章就介紹到這了,更多相關渲染函數(shù) & JSX內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題
今天小編就為大家分享一篇解決vuejs 使用value in list 循環(huán)遍歷數(shù)組出現(xiàn)警告的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇vue中當圖片地址無效的時候,顯示默認圖片的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue實戰(zhàn)之項目開發(fā)時常見的幾個錯誤匯總
vue作為前端主流的3大框架之一,目前在國內有著非常廣泛的應用,下面這篇文章主要給大家介紹了關于Vue實戰(zhàn)之項目開發(fā)時常見的幾個錯誤匯總的相關資料,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue.js實現(xiàn)的幻燈片功能,結合實例形式分析了vue.js實現(xiàn)幻燈片的相關樣式、配置、功能等操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了VUE在線調用阿里Iconfont圖標庫的方法,內容是圍繞VUE前端和阿里Iconfont圖標庫展開的，經(jīng)歷了從網(wǎng)站上東拼西湊圖標的時代，大概是15~16年左右我開始解除阿里Iconfont圖標庫，剛開始就只會下載圖標使用，需要的朋友可以參考下2021-10-10
vue-cli中devServer.proxy相關配置項的使用
這篇文章主要介紹了vue-cli中devServer.proxy相關配置項的使用詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue給對象添加屬性沒有響應式的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了在 Vue.js中優(yōu)雅地使用全局事件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
model在vue里面實現(xiàn)雙向綁定,通過父節(jié)點向子節(jié)點傳遞參數(shù),子節(jié)點通過操作再回傳給父節(jié)點的變量,有點像prop和$emit組合使用,下面這篇文章主要給大家介紹了關于Vue3中v-model的相關資料,需要的朋友可以參考下2022-11-11
vite打包出現(xiàn)"default"?is?not?exported?by?"no
這篇文章主要給大家介紹了關于vite打包出現(xiàn)"default"?is?not?exported?by?"node_modules/...問題解決的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11