vue 将脚本编译为组件,使用setup()函数将组件从组件返回到渲染函数,

eqqqjvef  于 5个月前  发布在  其他
关注(0)|答案(1)|浏览(64)

此功能解决了什么问题?

目前,script setup组件被编译成一个代码,其中setup()函数返回模板中使用的所有数据,组件还具有components属性,就像在正常的script中定义的那样。
在Vue 3中,setup()返回一个访问本地变量和直接导入的组件的渲染函数,这不仅导致了捆绑包的大小变小(不仅仅是因为压缩前的代码更短),而且所有变量和组件名称都可以缩短为单个字母。如果Vue 2也能以相同的方式表现就好了,也许可以使用一些编译器配置选项来强制实现这一点?

建议的API应该是什么样子?

{
      __name: 'MyComponent',
      props: { prop1: Object, prop2: Boolean },
      setup (s) {
        const e = s, d = whatever();
        return () => h(a.B, ...)
      }
    }

而不是

{
      __name: 'MyComponent',
      components: { Foo: a.B, Bar: c.d },
      props: { prop1: Object, prop2: Boolean },
      setup (s) {
        const e = s, d = whatever();
        return { __sfc: !0, props: e, someData: d };
      }
    }
axr492tv

axr492tv1#

这目前是一个非目标,因为Vue 2的模板到渲染函数的编译是写成一种不执行任何JS表达式解析的方式(它是用其他工具在单独的步骤中完成的)。所以整个过程没有必要的信息来基于<script setup>范围信息前缀/解包refs。这只能在我们完全重构Vue 2的模板编译时才可能实现,但那将是一个庞大且高风险的重构,而我们现在并不打算这样做。

相关问题