Vue.js 組件提供了一個 functional  開關，設置為 true 后，就可以讓組件變為無狀態、無實例的函數化組件。因為只是函數，所以渲染的開銷相對來說，較小。

函數化的組件中的 Render 函數，提供了第二個參數 context 作為上下文，data、props、slots、children 以及 parent 都可以通過 context 來訪問。

1 示例

這里，我們用  functional 函數化組件來實現一個智能組件。

html：

<div id="app">  <smart-component :data="data"></smart-component>  <button @click="change('img')">圖片組件</button>  <button @click="change('video')">視頻組件</button>  <button @click="change('text')">文本組件</button></div>

js：

//圖片組件設置var imgOptions = {  props: ['data'],  render: function (createElement) {    return createElement('div', [      createElement('p', '圖片組件'),      createElement('img', {        attrs: {          src: this.data.url,          height: 300,          weight: 400        }      })    ]);  }};//視頻組件設置var videoOptions = {  props: ['data'],  render: function (createElement) {    return createElement('div', [      createElement('p', '視頻組件'),      createElement('video', {        attrs: {          src: this.data.url,          controls: 'controls',          autoplay: 'autoplay'        }      })    ]);  }};//文本組件設置var textOptions = {  props: ['data'],  render: function (createElement) {    return createElement('div', [      createElement('p', '文本組件'),      createElement('p', this.data.content)    ]);  }};Vue.component('smart-component', {  //設置為函數化組件  functional: true,  render: function (createElement, context) {    function get() {      var data = context.props.data;      console.log("smart-component/type:" + data.type);      //判斷是哪一種類型的組件      switch (data.type) {        case 'img':          return imgOptions;        case 'video':          return videoOptions;        case 'text':          return textOptions;        default:          console.log("data 類型不合法：" + data.type);      }    }    return createElement(      get(),      {        props: {          data: context.props.data        }      },      context.children    )  },  props: {    data: {      type: Object,      required: true    }  }})var app = new Vue({  el: '#app',  data: {    data: {}  },  methods: {    change: function (type) {      console.log("輸入類型：" + type);      switch (type) {        case 'img':          this.data = {            type: 'img',            url: 'http://pic-bucket.ws.126.net/photo/0001/2019-02-07/E7D8PON900AO0001NOS.jpg'          }          break;        case 'video':          this.data = {            type: 'video',            url: 'http://wxapp.cp31.ott.cibntv.net/6773887A7F94A71DF718E212C/03002002005B836E73A0C5708529E09C1952A1-1FCF-4289-875D-AEE23D77530D.mp4?ccode=0517&duration=393&expire=18000&psid=bbd36054f9dd2b21efc4121e320f05a0&ups_client_netip=65600b48&ups_ts=1549519607&ups_userid=21780671&utid=eWrCEmi2cFsCAWoLI41wnWhW&vid=XMzc5OTM0OTAyMA&vkey=A1b479ba34ca90bcc61e3d6c3b2da5a8e&iv=1&sp='          }          break;        case 'text':          this.data = {            type: 'text',            content: '《流浪地球》中的科學：太陽何時吞并地球？科學家已經給出時間表'          }          break;        default:          console.log("data 類型不合法：" + type);      }    }  },  created: function () {    //默認為圖片組件    this.change('img');  }});