Javascript 如何在Vue模板中循环非反应性数组，而不将其放入数据属性或计算属性中？

我有一个这样的静态数组数据

const name=[“艾米”、“约瑟夫”、“汉克”]；

我想在我的标记中循环它们，在React中，我可以简单地执行以下操作：

import React, { memo } from "react";

// these guys are static values!
const names = ["Amy", "Joseph", "Hank"];

const App = () => (
  <div>
    {names.map(name => ( // render once and no more!
      <span key={name}>{name}</span>
    ))}
  </div>
);

export default memo(App); // won't re-render anymore!

import React，{memo}来自“React”；
//这些家伙是静态值！
常量名称=[“艾米”、“约瑟夫”、“汉克”]；
常量应用=（）=>(
{names.map（name=>（//渲染一次，不再渲染！
{name}
))}
);
导出默认备忘录（应用程序）；//不会再重新渲染了！

但在Vue中，我能想到的唯一方法是：

<template>
  <div>
    <span v-for="name in names" :key="name">{{ name }}</span>
  </div>
</template>

<script>
const names = ["Amy", "Joseph", "Hank"];

export default {
  data() {
    return {
      names // I have to put these guys in data property, now it becomes reactive, I don't want this. Although this will only render once.
    };
  }
};
</script>

{{name}}
常量名称=[“艾米”、“约瑟夫”、“汉克”]；
导出默认值{
数据（）{
返回{
名称//我必须把这些家伙放在数据属性中，现在它变成了被动的，我不想要这个。虽然这只会渲染一次。
};
}
};

---

我必须把我的名字放在

data（）

或

computed

属性中，但这会导致它们是被动的，还有其他方法吗？

您可以这样创建一个自定义选项

export default {
  data() {
    return {
      //your reactive thins here
    };
  }
  names : ["Amy", "Joseph", "Hank"],
  .......
};

最后，在模板中，您可以像

<template>
  <div>
    <span v-for="name in $option.names">{{ name }}</span>
  </div>
</template>

{{name}}

为什么要这样做？@ZohaibIjaz，因为这会导致名称有getter和setter，这使得javascript不需要做任何事情。我认为这是重复的。可能也有帮助。