javascript - 如何在 Vue 模板中循环非响应式(Reactive)数组而不将其放入数据属性或计算属性中？

Question

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

const names = ["Amy", "Joseph", "Hank"];

我想在我的标记中循环它们，在 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!

但是在 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>

我必须将我的名字放入 data() 或 compulated 属性中，但这会导致它们 react 性，还有其他方法可以做到这一点吗？

Answer 1

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

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>