vue的函数型组件很少使用，所以可能不太了解。 所以，如果花点时间了解一下，就会有一个大致的印象，其实那只是函数，感觉有点像react的无状态组件。 我会记录下来的。
首先，vue的函数类型组件functional主要具有以下特征：
无状态(无对应数据)无实例)无this上下文(无法像传统组件那样通过this获取属性)生命周期轻、呈现性能高、呈现开销低。 适用于只依赖外部数据传输而变化的组件(表示法组件，无逻辑状态更改)。template标记中注明functional，script标记用于只接收props值
Test.vue，
将scriptvarvueCompt={//home的data值转换为组件vuecompt内部props: ['data']，//渲染函数render 3360 function (createelement ) '这是vue图像'，createelement '，{ attrs : } src : this.data.URL，height: 200 (，)； varreactcompt={ props : [ ' data ' ]，render : function (createelement ) return createelement (div )，) createee elemem 用于构建react用户界面的JavaScript库')、createelement(img )、{ attrs : } src : this.data.URL、height: 200 添加export default {/* functional : true时，函数类型组件functional */functional : true，props : {数据： } type 33: 在this中调用的所有传统属性现在都必须调用*/render 3360函数(createelement，context )//switch (date )来确定哪种类型的组件case ' react ' : returnreactcompt； efault:console.log () data类型不正确。 ) data.type )； } return createelement (get component )、{ props : } data : context.props.data，}、context.children； (，)； /script Home.vue
template div class='home' h2vue的functional小栗旬/H2 test : data=' data '/testbutton @ click=' change (react ' ) react export default { name: 'Home '，data () { return } data : {，}；components: { Test，}、methods : { change : function (type ) switch(type ) case'vue'3360this.data )、等等黑； case ' react ' : this.data={ type : ' react '，URL 3360 ' https://cdn.jsdelivr.net/GH/reactnativecn/react -啊黑； }，}，created: function () ) this.change('react )； (，)； /script vue中的函数类型组件functional参考：
官方函数参考
详细介绍了Vue函数表达式组件的原理和使用
Vue函数类型组件functional
谈Vue.js的functional函数化组件
推荐使用在线MP4旋转gif工具