vue render函數
基礎javascript
vue推薦在絕大多數狀況下使用template來建立你的html。然而在一些場景中，你真的須要javascript的徹底編程能力。這就是render函數。它比template更接近編譯器html
<h1>
<a name="hello-world" href="#hello-world">
Hello world!
</a>
</h1>
在html層，咱們決定這樣定義組件接口：
<anchored-heading :level="1">Hello world!</anchored-heading>
當咱們開始寫一個經過level prop動態生成heading標籤的組件，你可能很快這樣實現：vue
<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
}
}
})
在這種場景中使用template並非最好的選擇：首先代碼冗長，爲了在不一樣級別的標題中插入錨點元素，咱們須要重複的使用<slot>;
雖然模板在大多數組件中都很是好用，可是在這裏它就不是最簡潔的了。那麼，咱們來嘗試使用render函數重寫上面的例子：
Vue.component(
'anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // tag name 標籤名稱
this.$slots.default // 子組件中的陣列
)
},
props: {
level: {
type: Number,
required: true
}
}
})
簡單清晰不少，簡單來講，這樣代碼精簡不少，可是須要很是熟悉vue的事例屬性。在這個例子中，你須要知道當你不使用slot屬性向組件中傳遞內容時，好比：
anchored-heading 中的hello world!這些子元素被存儲在組件實例中的
$slots.default中。若是你還不瞭解，在深刻render函數前，須要瞭解實例的API.
createElement元素
第二件須要熟悉的是如何在createElement函數中生成模板。這裏是createElement接受的參數：
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一個 HTML 標籤字符串，組件選項對象，或者一個返回值類型爲String/Object的函數，必要參數
'div',
// {Object}
// 一個包含模板相關屬性的數據對象
// 這樣，您能夠在 template 中使用這些屬性.可選參數.
{
// (詳情見下一節)
},
// {String | Array}
// 子節點 (VNodes)，由 `createElement()` 構建而成，
// 或簡單的使用字符串來生成「文本結點」。可選參數。
[
'先寫一些文字',
createElement(
'h1', '一則頭條'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
深刻data object函數
有一件事要注意：正如在模板語法中，v-bind:class和v-bind:style，會被特別對待同樣，在VNodeV數據對象中，下列屬性名是級別最高的字段。該對象也容許你綁定普通的HTML特性，就像DOM屬性同樣，好比innerHTML（這裏會取代v-html指令）。
|
{
// 和`v-bind:class`同樣的 API
'class': {
foo: true,
bar: false
},
// 和`v-bind:style`同樣的 API
style: {
color: 'red',
fontSize: '14px'
},
// 正常的 HTML 特性
attrs: {
id: 'foo'
},
// 組件 props
props: {
myProp: 'bar'
},
// DOM 屬性
domProps: {
innerHTML: 'baz'
},
// 事件監聽器基於 `on`
// 因此再也不支持如 `v-on:keyup.enter` 修飾器
// 須要手動匹配 keyCode。
on: {
click: this.clickHandler
},
// 僅對於組件，用於監聽原生事件，而不是組件內部使用 `vm.$emit` 觸發的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定義指令. 注意事項：不能對綁定的舊值設值
// Vue 會爲您持續追蹤
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// Scoped slots in the form of
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 若是組件是其餘組件的子組件，需爲 slot 指定名稱
slot:
'name-of-slot',
// 其餘特殊頂層屬性
key:
'myKey',
ref: 'myRef'
}
|
約束java
VNodes必須惟一express
組件樹中的全部VNodes必須是惟一的。這意味着下面的render函數是無效的編程
render:function(creatElement){api
var myParagraphVNode = createElement('p', 'hi');數組
return createElement('div', [
// 錯誤-重複的VNodes
myParagraphVNode, myParagraphVNode
])
}babel
若是你真的須要重複不少次的元素/組件，你可使用工廠函數來實現，例如，下面這個例子中render函數完美有效的渲染了20個重複的段落：app
render:function(createElement){
return createElement('div',Array.apply(null,{length:20}).map(function(){
return createElement('p','hi');
}))
}
使用javascript代替模板功能
v-if and v-for
因爲使用原生的javascript來實現某些東西很簡單，vue的render函數沒有提供專用的API，好比：template中的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>
這些都會在render函數中被javascript的if/else和map重寫
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.')
}
v-model
render函數中沒有與v-model相應的api,你必須本身來實現相應的邏輯：
render:function(createElement){
var self = this;
return createElement('input',{
domprops:{
vlaue:self.value
},
on:{
input:function(event){
self.value = event.target.value;
self.$emit('input',event.target.value);
}
}
})
}
這就是深刻底層要付出的，儘管麻煩一些，但相對於v-model來講，你能夠更靈活的控制。
事件&按鍵修飾符
對於.passive .capture 和.once事件修飾符。vue提供了相對應的前綴能夠用於on:
| Modifier(s) | Prefix |
|---|---|
.passive |
& |
.capture |
! |
.once |
~ |
.capture.once or.once.capture |
~! |
on: {
'!click': this.doThisInCapturingMode,
'~keyup': this.doThisOnce,
`~!mouseover`: this.doThisOnceInCapturingMode
}
對於其餘的修飾符，前綴不是很重要，由於你能夠直接在事件處理函數中使用事件方法：
| Modifier(s) | Equivalent in Handler |
|---|---|
.stop |
event.stopPropagation() |
.prevent |
event.preventDefault() |
.self |
if (event.target !== event.currentTarget) return |
Keys:.enter, .13 |
if (event.keyCode !== 13) return (change 13 to another key code for other key modifiers) |
Modifiers Keys:.ctrl, .alt, .shift, .meta |
if (!event.ctrlKey) return (change ctrlKey to altKey, shiftKey, or metaKey, respectively) |
下面是使用了全部修飾符的例子：
on:{
keyup:function(event){
//若是觸發事件的元素不是事件綁定的元素
//則返回
if(event.target !== event.currentTarget)return
// 若是按下去的不是enter鍵或者
// 沒有同時按下shift鍵
// 則返回
if(!event.shiftKey || event.keyCode !== 13)return
// 阻止 事件冒泡
event.stopPropagation()
// 阻止該元素默認的keyup事件
event.preventDefault()
// ...
}
}
slots
你能夠從this.$slots獲取VNode列表中的靜態內容。
render:function(createElement){
createElement('div',this.$slots.default)
}
還能夠從this.$scopedSlots中得到能用做函數的做用域插槽，這個函數返回VNodes：
render:function(createElement){
return createElement('div',[this.$scopedSlots.default({text:this.msg})])
}
若是要用render函數向子組件中傳遞做用域插槽，能夠利用VNode數據中的scopedSlots域：
render:function(createElement){
return createElement('div',[
createElement('child',{
scopedSlots:{
default:function(props){
return createElement('span',props.text)
}
}
})
])
}
jsx
若是你寫了不少render函數，可能會以爲痛苦：
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 (h) {
return (
<AnchoredHeading level={1}>
<span>Hello</span> world!
</AnchoredHeading>
)
}
})
將
h 做爲
createElement 的別名是 Vue 生態系統中的一個通用慣例，實際上也是 JSX 所要求的，若是在做用域中
h 失去做用， 在應用中會觸發報錯。
函數化組件
以前建立的錨點標題組件是比較簡單的，沒有管理或者監放任何傳遞給它的狀態，也沒有生命週期方法。它只是一個接受參數的函數。
在這個例子中，咱們標記組件爲functional，這意味着它是無狀態（沒有data）,無實例(沒有this上下文)。
一個函數化組件就像這樣：
Vue.component(
'my-component', {
functional: true,
// 爲了彌補缺乏的實例
// 提供第二個參數做爲上下文
render:
function (createElement, context) {
// ...
},
// Props 可選
props: {
// ...
}
})
注意：在2.3.0以前的版本中，若是一個函數式組件想要接受props，則props選項是必須的。在2.3.0或以上的版本中，你能夠省略props選項，全部組件中的屬性都會被自動解析爲props
組件須要的一切都是經過上下文傳遞，包含：
- props:提供props的對象，
- children：VNode子節點的數組
- slots：slots對象
- data:傳遞給組件的data對象
- parent:對父組件的引用
- listeners:（2.3.0+）一個包含了組件上所註冊的v-on偵聽器的對象，這只是一個指向data.on的別名
- injections:(2.3.0+)若是使用了inject選項，則該對象包含了應當被注入的屬性
在添加functional:true以後，錨點標題組件的render函數之間，簡單更新增長context參數。
相關文章
- 1. Vue-render函數
- 2. vue render函數
- 3. Vue render函數
- 4. vue之Render函數
- 5. iview（vue） render函數
- 6. Vue的Render函數
- 7. vue render函數的理解
- 8. vue進階篇- Render函數
- 9. Vue - 渲染函數render
- 10. 理解vue中render函數
- 更多相關文章...
- • PHP array_combine() 函數 - PHP參考手冊
- • PHP array_count_values() 函數 - PHP參考手冊
- • Flink 數據傳輸及反壓詳解
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Vue-render函數
- 2. vue render函數
- 3. Vue render函數
- 4. vue之Render函數
- 5. iview（vue） render函數
- 6. Vue的Render函數
- 7. vue render函數的理解
- 8. vue進階篇- Render函數
- 9. Vue - 渲染函數render
- 10. 理解vue中render函數