Vue學習筆記進階篇——Render函數

時間 2019-11-08

標籤 vue 學習筆記進階 render 函數简体版

原文原文鏈接

基礎

Vue 推薦在絕大多數狀況下使用 template 來建立你的 HTML。然而在一些場景中，你真的須要 JavaScript 的徹底編程的能力，這就是 render 函數，它比 template 更接近編譯器。html

<h1>
  <a name="hello-world" href="#hello-world">
    Hello world!
  </a>
</h1>

如今咱們打算使用vue組件實現以上的渲染結果，咱們渴望定義的接口以下:vue

<anchored-heading :level="1">Hello world!</anchored-heading>

level的值決定了，動態生成heading。
若是咱們使用以前學到的知識實現經過level prop 動態生成heading 標籤的組件，你可能很快想到這樣實現：java

<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></slot>。
雖然模板在大多數組件中都很是好用，可是在這裏它就不是很簡潔的了。那麼，咱們來嘗試使用render 函數重寫上面的例子：node

<div id="app">
    <anchored-heading :level="1">hello</anchored-heading>
</div>

    Vue.component('anchored-heading',{
        render:function (createElement) {
            return createElement(
                'h' + this.level,
                this.$slots.default
            )
        },
        props:{
            level:{
                type:Number,
                required:true
            }
        }
    })

    new Vue({
        el:'#app'
    })

運行結果以下：express

簡單清晰不少！簡單來講，這樣代碼精簡不少，可是須要很是熟悉 Vue 的實例屬性。在這個例子中，你須要知道當你不使用 slot 屬性向組件中傳遞內容時，好比anchored-heading 中的 Hello world!, 這些子元素被存儲在組件實例中的 $slots.default中。編程

createElement參數

從上面的例子中，咱們看到了使用了一個createElement的方法，這個方法的做用顯而易見，那就是用來建立元素，生成模板的。它接受的參數以下：api

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一個 HTML 標籤字符串，組件選項對象，或者一個返回值類型爲String/Object的函數，必要參數
  'div',
  // {Object}
  // 一個包含模板相關屬性的數據對象
  // 這樣，您能夠在 template 中使用這些屬性.可選參數.
  {
    // (詳情見下一節)
  },
  // {String | Array}
  // 子節點 (VNodes)，由 `createElement()` 構建而成，
  // 或簡單的使用字符串來生成「文本結點」。可選參數。
  [
    '先寫一些文字',
    createElement('h1', '一則頭條'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

第一個參數是一個html標籤，前面已經說了這個函數是用來建立元素，可是建立什麼元素呢，那就取決於第一個參數，而這個參數就是所需建立元素的html標籤，如div, span, p等.

第二個參數是可選參數，這個參數是用來描述所建立的元素的，爲所建立的元素設置屬性，如class, style, props等等.

第三個參數就是建立的元素的子節點了。由 createElement() 構建而成，
或簡單的使用字符串來生成「文本結點」。也一樣是可選參數。

深刻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'
}

完整示例

有了以上的知識，咱們就能夠實現咱們想要實現的功能了，如下爲完整示例：app

<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', [
    // 錯誤-重複的VNodes
    myParagraphVNode, 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 = this
            return createElement('input',{
                domProps:{
                    value:self.myValue
                },
                on:{
                    input:function (event) {
                        self.myValue = event.target.value
                        self.$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:

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)`

咱們在上一個例子上加入一個keyup的事件，當按了enter按鍵時彈框。修改createElement的第二參數的on, 修改後的代碼以下：

on:{
    input:function (event) {
       self.myValue = event.target.value
       self.$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'
    })