|
介绍
Vue提供了一种可以让组件变为无状态、无实例的函数化组件。从原理上说，一般子组件都会经过实例化的过程，而单纯的函数组件并没有这个过程，它可以简单理解为一个中间层，只处理数据，不创建实例，也是由于这个行为，它的渲染开销会低很多。实际的应用场景是，当我们需要在多个组件中选择一个来代为渲染，或者在将children,props,data等数据传递给子组件前进行数据处理时，我们都可以用函数式组件来完成，它本质上也是对组件的一个外部包装。
使用场景
定义两个组件对象，test1，test2 var test1 = {props: ['msg'],render: function (createElement, context) { return createElement('h1', this.msg)}}var test2 = {props: ['msg'],render: function (createElement, context) { return createElement('h2', this.msg)}}定义一个函数式组件，它会根据计算结果选择其中一个组件进行选项 Vue.component('test3', {// 函数式组件的标志 functional设置为truefunctional: true,props: ['msg'],render: function (createElement, context) { var get = function() { return test1 } return createElement(get(), context)}})函数式组件的使用 <test3 :msg="msg" id="test"></test3>new Vue({el: '#app',data: { msg: 'test'}})最终渲染的结果为：
源码分析
函数式组件会在组件的对象定义中，将functional属性设置为true，这个属性是区别普通组件和函数式组件的关键。同样的在遇到子组件占位符时，会进入createComponent进行子组件Vnode的创建。由于functional属性的存在，代码会进入函数式组件的分支中，并返回createFunctionalComponent调用的结果。 注意，执行完createFunctionalComponent后，后续创建子Vnode的逻辑不会执行，这也是之后在创建真实节点过程中不会有子Vnode去实例化子组件的原因。(无实例) |
