vue组件实现,vue 组件开发的几种方式
Vue提供了一种叫做功能组件的组件类型，用来定义那些没有响应数据，不需要任何生命周期的场景。它只接受一些道具来展示组件。以下文章主要介绍Vue高级组件的功能组件的使用场景和源代码分析。有需要的可以参考一下。
目录
使用场景源代码分析的介绍和总结
介绍
Vue提供了一个功能组件，可以使一个组件成为无状态的和实例化的。一般的子组件原则上会经历实例化的过程，而简单的功能组件则没有这个过程。可以简单理解为只处理数据不创建实例的中间层。也正是因为这种行为，它的渲染开销会低很多。在实际应用场景中，当我们需要在多个组件中选择一个进行渲染，或者在传递孩子、道具、数据等数据之前对数据进行处理时。对于子组件，我们都可以使用功能组件，功能组件本质上是组件的外部包装器。
使用场景
定义两个组件对象，test1和test2。
var test1={
道具：[msg]，
render: function (createElement，context) {
返回createElement(h1 ，this.msg)
}
}
var test2={
道具：[msg]，
render: function (createElement，context) {
返回createElement(h2 ，this.msg)
}
}
定义一个功能组件，它会根据计算结果选择其中一个组件。
Vue.component(test3 ，{
//将功能组件的标志functional设置为真
功能性：真的，
道具：[msg]，
render: function (createElement，context) {
var get=function() {
返回测试1
}
返回createElement(get()，context)
}
})
功能组件的使用
test3 :msg=msg id=test
/test3
新Vue({
埃尔： #app ，
数据：{
消息：“测试”
}
})
最终的渲染结果是：
h2测试/h2
源码分析
功能组件会在组件的对象定义中将功能属性设置为true，这是区别普通组件和功能组件的关键。同样，当它遇到子组件占位符时，它将输入createComponent来创建子组件Vnode。由于functional property的存在，代码会进入functional component的分支，返回createFunctionalComponent调用的结果。注意，createFunctionalComponent执行后，后续创建子vnode的逻辑将不会被执行，这也是为什么在创建真实节点的过程中不会有子vnode实例化子组件的原因。(无示例)
函数createComponent(){
if(is true(ctor . options . functional)){
返回createFunctionalComponent(Ctor，propsData，Data，context，children)
}
}
CreateFunctionalComponent方法将检测并合并传入的数据，实例化FunctionalRenderContext，最后调用功能组件定义的render方法执行渲染过程。
函数createFunctionalComponent(
Ctor，//功能组件生成器
PropsData，//传入组件的props
占位符组件传入的Data，//attr属性
上下文，//vue实例
子//子节点
){
//数据检测和合并
var options=Ctor.options
var props={ }；
var propOptions=options.props
if (isDef(propOptions)) {
for(比例中的变量键){
props[key]=validateProp(key，propOptions，props data empty object)；
}
}否则{
//合并属性
if(isDef(data . attrs)){ merge props(props，data . attrs)；}
//合并道具
if(isDef(data . props)){ merge props(props，data . props)；}
}
var render context=new functional render context(data，props，children，contextVm，Ctor)；
//调用功能组件中的自定义渲染函数
var vnode=options . render . call(null，renderContext。_c，renderContext)
}
这个类FunctionalRenderContext的最终目标是定义一个不同于真实组件渲染的渲染方法。
函数FunctionalRenderContext() {
//省略其他逻辑
这个。_c=function (a，b，c，d){ return createElement(context VM，a，b，c，d，need normalization)；};
}
在执行render函数的过程中，会递归调用createElement的方法。此时，元件已经是真正的元件，正常的元件安装过程开始。
问：为什么功能组件需要定义不同的createElement方法？createElement这个功能组件和过去唯一的区别就是最后一个参数不一样。如前一章所述，createElement将根据最后一个参数决定是否展平子Vnode。一般孩子的编译结果都是Vnode类型的。只有函数组件是特殊的，它可以返回一个数组。这个时候拍打是必要的。让我们看看下面的例子：
Vue.component(测试，{
功能性：真的，
render: function (createElement，context) {
返回context.slots()。系统默认值
}
})
试验
pslot1/p
pslot/p
/测试
此时，功能组件测试的render函数返回two slot的Vnode，以数组的形式存在，这就是需要扁平化的场景。
总结一下功能组件，从源代码可以看出，功能组件不像普通组件一样有实例化组件的过程，所以没有包括组件的生命周期和组件的数据管理在内的过程。它只接收完整传递给组件进行处理的数据，并呈现所需的内容。所以作为一个纯函数，渲染的成本也可以大大降低。
总结
关于Vue高级组件的功能组件的使用场景和源代码分析这篇文章到此为止。有关Vue高级组件的功能组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。