Vue学习笔记进阶篇——Render函数
本文為轉載，原文：Vue學習筆記進階篇——Render函數
基礎
Vue 推薦在絕大多數情況下使用 template 來創建你的 HTML。然而在一些場景中，你真的需要 JavaScript 的完全編程的能力，這就是?render 函數，它比 template 更接近編譯器。
<h1><a name="hello-world" href="#hello-world">Hello world!</a> </h1>現在我們打算使用vue組件實現以上的渲染結果，我們渴望定義的接口如下:
<anchored-heading :level="1">Hello world!</anchored-heading>level的值決定了，動態生成heading。
如果我們使用之前學到的知識實現通過level?prop 動態生成heading 標簽的組件，你可能很快想到這樣實現：
在這種場景中使用 template 并不是最好的選擇：首先代碼冗長，為了在不同級別的標題中插入錨點元素，我們需要重復地使用?<slot></slot>。
雖然模板在大多數組件中都非常好用，但是在這里它就不是很簡潔的了。那么，我們來嘗試使用render?函數重寫上面的例子：
運行結果如下：
簡單清晰很多！簡單來說，這樣代碼精簡很多，但是需要非常熟悉 Vue 的實例屬性。在這個例子中，你需要知道當你不使用?slot?屬性向組件中傳遞內容時，比如anchored-heading?中的 Hello world!, 這些子元素被存儲在組件實例中的?$slots.default中。
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?，會被特別對待一樣，在 VNode 數據對象中，下列屬性名是級別最高的字段。該對象也允許你綁定普通的 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' }完整示例
有了以上的知識，我們就可以實現我們想要實現的功能了，以下為完整示例：
<div id="app"><my-heading :level="2"><p>Hello Chain</p></my-heading> </div> var getChildrenTextContent = function (children) {return children.map(function (node) {return node.children ? getChildrenTextContent(node.children):node.text}).join('')}Vue.component('my-heading', {render:function (createElement) {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}}})new Vue({el:'#app'})運行結果：
約束
VNodes 必須唯一
組件樹中的所有?VNodes必須是唯一的。這意味著，下面的 render function 是無效的：
render: function (createElement) {var myParagraphVNode = createElement('p', 'hi')return createElement('div', [// 錯誤-重復的VNodesmyParagraphVNode, myParagraphVNode]) }如果你真的需要重復很多次的元素/組件，你可以使用工廠函數來實現。例如，下面這個例子 render 函數完美有效地渲染了 20 個重復的段落：
render: function (createElement) {return createElement('div',Array.apply(null, { length: 20 }).map(function () {return createElement('p', 'hi')})) }?
使用javascript代替模板功能
v-if?和?v-for
由于使用原生的 JavaScript 來實現某些東西很簡單，Vue 的 render 函數沒有提供專用的 API。比如， template 中的v-if?和?v-for,這些都會在 render 函數中被 JavaScript 的?if/else?和?map重寫。 請看下面的示例：
<div id="app-list"><list-component :items="items"></list-component> </div> Vue.component('list-component',{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. ')}},props:['items']})new Vue({el:'#app-list',data:{items:[{name:'item1'},{name:'item1'},{name:'item1'}]}})運行結果：
當items為空時:
v-model
render函數中沒有與v-model相應的api - 你必須自己來實現相應的邏輯。請看下面一個實現了雙向綁定的render示例：
<div id="app-input"><p>{{value}}</p><my-input :value="value" @input="updateValue"></my-input> </div> Vue.component('my-input',{render:function (createElement) {var self = thisreturn createElement('input',{domProps:{value:self.myValue},on:{input:function (event) {self.myValue = event.target.valueself.$emit('input', event.target.value)}},attrs:{type:'text',step:10}})},props:['value'],computed:{myValue:function () {return this.value}},})var app_input = new Vue({el:'#app-input',data:{value:''},methods:{updateValue:function (val) {this.value = val}}})運行結果：
這就是深入底層要付出的,盡管麻煩了一些，但相對于 v-model來說，你可以更靈活地控制。
事件和按鍵修飾符
對于?.passive、.capture?和?.once事件修飾符, Vue 提供了相應的前綴可以用于?on:
| .passive | & |
| .capture | ! |
| .once | ~ |
| .capture.once?or?.once.capture | ~! |
例如:
on: {'!click': this.doThisInCapturingMode,'~keyup': this.doThisOnce,`~!mouseover`: this.doThisOnceInCapturingMode }對于其他的修飾符, 前綴不是很重要, 因為你可以直接在事件處理函數中使用事件方法:
| .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) |
我們在上一個例子上加入一個keyup的事件，當按了enter按鍵時彈框。修改createElement的第二參數的on, 修改后的代碼如下：
on:{input:function (event) {self.myValue = event.target.valueself.$emit('input', event.target.value)},'keyup':function (event) {if (event.keyCode == 13){alert(event.target.value)}} }在輸入框內輸入內容，按回車鍵，結果如下：
slots
你可以從this.$slots獲取VNodes列表中的靜態內容:
render: function (createElement) {// `<div><slot></slot></div>`return createElement('div', this.$slots.default) }還可以從this.$scopedSlots?中獲得能用作函數的作用域插槽，這個函數返回 VNodes:
render: function (createElement) {// `<div><slot :text="msg"></slot></div>`return createElement('div', [this.$scopedSlots.default({text: this.msg})]) }請看下面使用this.$scopedSlots的例子：
<div id="app-slot"><com-scoped-slot><template scope="props"><p>parent value</p><p>{{props.text}}</p></template></com-scoped-slot> </div> Vue.component('com-scoped-slot',{render:function (h) {return h('div', [this.$scopedSlots.default({text:this.msg})])},props:['text'],data:function () {return {msg:'child value'}}})new Vue({el:'#app-slot'})運行結果：
完
上一節：Vue學習筆記進階篇——過渡狀態
返回目錄
轉載于:https://www.cnblogs.com/ChainZhang/p/7182731.html
總結
以上是生活随笔為你收集整理的Vue学习笔记进阶篇——Render函数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Kafka简介、安装
- 下一篇： html5倒计时秒杀怎么做,vue 设