这两种写法有什么区别吗，是否存在性能差异？

[a81n9]

这两种写法有什么区别吗，是否存在性能差异？
如果更改为 jsx 写法，这两种写法又有什么差异？

1. 在 script 中定义变量传递

<script setup>
const author = {
  name: 'Veronica',
  company: 'Veridian Dynamics',
}

const postTitle = 'My first blog post'

const commentIds = [1, 2, 3]

function onClick() {
  console.log('Hello World')
}
</script>

<template>
  <BlogPost :author :post-title :comment-ids @click="onClick" />
</template>

2. 直接以模板字面量形式传递（个人更倾向于这种，避免频繁 script 中定义变量导致关注点分离）

<template>
  <BlogPost
    :author="{
      name: 'Veronica',
      company: 'Veridian Dynamics',
    }"
    post-title="My first blog post"
    :comment-ids="[1, 2, 3]"
    @click="
      () => {
        console.log('Hello World')
      }
    " />
</template>

[a81n9]

@yyx990803 @antfu

期待个专业解答

[edison1105]

第一种写法变量只会创建一次，每次rerender 复用变量。第二种写法每次都创建新的变量，性能不如第一种。

[a81n9]

最佳实践还是建议将所有字面量都抽离到 script 中定义对吧

那么以 jsx 的形式书写也是一样吗？

[edison1105]

同理，你看编译出来的代码就能明白了。

[hcg1023]

[xuyimingwork]

如果你确实关心性能，那么可以用 performance 进行测试，然后你会发现没有区别（大概率）。
我认为团队协作中可维护性和可读性更重要，没必要为一些非常临时、局部的变量增加变量名。