Vue中曾经出现的<render>是做什么的?

作者站长头像
站长
· 阅读数 7

在学习Vue源码时偶然发现,有个processRender(element),该函数定义为

// 2.0.0-alpha.1 src/compiler/parser/index.js 125行
function processRender(el) {
    if (el.tag === 'render') {
        el.render = true
        el.renderMethod = el.attrsMap[':method'] || el.attrsMap['v-bind:method']
        el.renderArgs = el.attrsMap[':args'] || el.attrsMap['v-bind:args']
        
        if (process.env.NODE_ENV !== 'production') {
            if (el.attrsMap.method) {
                warn('<render> method should use a dynamic binding, e.g. `:method="..."`.')
            }
            else if (!el.renderMethod) {
                warn('method attribute is required on <render>.')
            }
            if (el.attrsMap.args) {
                warn('<render> args should use a dynamic binding, e.g. `:args="..."`.')
            }
        }
    }
}

里面有<render>标签,但在2.0.0-alpha.5中取消了这个标签和processRender的处理。2.0.0-alpha.5的Release Notes中说

The <render> tag is removed in favor of stateless functional components.

想知道这个标签是干嘛用的,百度谷歌都搜不到一点信息。它和无状态的函数式组件又有什么关系?

回复
1个回答
avatar
test
2024-07-01

简单说一下,没有必要深究这种没有在正式版本中出现的功能,特别还是 alpha 版本。很多功能都是实验或者尝试性质的特性,大概知道他想实现什么功能就好了。

版本说明中提到了一个 recorded video 可能会对你有所帮助。

无状态组件其实就是 函数式组件,所以应该目的就是为了实现类似的功能。

可以在测试用例中(test\unit\features\render\render.spec.js)看到使用方式并不是十分友好,并不如函数式组件简单好用并且符合直觉。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容