vue render函數解析

一。render 函數的作用:

寫一些vue.js的template太繁瑣，利用render，可以使用js來生成模板，更加靈活和簡便。

二。使用render前提:

官網也說了。在深入渲染函數之前推薦閱讀實例屬性 API 因為寫很多render的函數里面需要調用其實例屬性的API.

三。一個簡易demo

實現效果：

目標：點擊1的時候使用，下方內容使用h1標題，點擊hi 的時候，使用hi的標題.

其父組件很好寫：

<template>
  <div id="app">
    <input type="radio" value="1"  v-model.number="selectlevel" name="bigsize"/>1
    <input type="radio" value="2"  v-model.number="selectlevel" name="bigsize"/>2
    <input type="radio" value="3"  v-model.number="selectlevel" name="bigsize"/>3
    <input type="radio" value="4"  v-model.number="selectlevel" name="bigsize"/>4
    <input type="radio" value="5"  v-model.number="selectlevel" name="bigsize"/>5
    <input type="radio" value="6"  v-model.number="selectlevel" name="bigsize"/>6
    <br>
    內容大小:
    {{ selectlevel }}
    <fuck :level="selectlevel">
        balabala...balabala...balabala...balabala...balabala...
        balabala...balabala...balabala...balabala...balabala...
        balabala...balabala...balabala...balabala...balabala...
        balabala...balabala...balabala...balabala...balabala...
        balabala...balabala...balabala...balabala...balabala...
        balabala...balabala...balabala...balabala...balabala...
    </fuck>

  </div>
</template>

<script>
import fuck from './components/fuck'
  export default {
    data (){
        return {
            selectlevel : 1
        }
    },
    components:{
        fuck
    }
  };
</script>

子組件不使用render的時候，是這樣: 很復雜，多個slot。

<template>
  <div id="fuck">
      
      <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>
  </div>
</template>

<script>
  export default {
    name : 'fuck',
    props:{
        level: {
            type: Number,
            required:true
        }
    },
  }
</script>

使用render后，是這樣：只需要一個函數就行。可以看到這個文件里面沒有template，使用render生成的template。

<script>
  export default {
    name : 'fuck',
    render: function(createElement) {
        return createElement(
            'h' + this.level,
            this.$slots.default
        );
    },
    props:{
        level: {
            type: Number,
            required:true
        }
    },
  }
</script>

幾點說明

1. render方法會傳入一個createElement函數

這個函數呢。其返回一個"虛擬DOM",其參數有三個:
tag　　　　類型：String/Object/Function　 說明：一個HTML標簽，組件類型,或一個函數
Data　　　 類型：Object 說明：一個對應屬性的數據對象,用於向創建的節點對象設置屬性值
Children　　類型：String/Array　　　　　　　說明：子節點

2. createElement這個方法在vue2的習慣性使用中經常用h來命名
3. 經常見到的render: h => h(App) 具體是什么含義?
   這是以下代碼的縮寫。

render: function (createElement) {
    return createElement(App);
}

作用呢？
可以參看第一種寫法：

import App from './App'
new Vue({
    el: '#root',
    template: '<App></App>',
    components: {
        App
    }
})

第二種寫法:

import App from './App'
new Vue({
    el: '#root',
    render: h => h(App)
})

上面兩種的效果是一樣的，可以看出 h(App)函數 的作用是：使用App作為這個Vue實例的template（同時一並了注冊App組件）###

再補充一點的是:在業務中，生產效率是第一位，所以絕大部分業務代碼都應當用 template 來完成。 你不用在意性能問題 ， 如果使用了 webpack 做編譯 , template 都會被預編譯為 render 函數。####