vue data 中应该装什么样的数据？

Question

vue可以说是操作数据来控制页面的显示的

但是如果数据过多又会造成 data内容过多、臃肿

所以问题来了 什么样的数据可以放入data呢？或者说值得放入data

比如一个导航栏

<div class="nav">
    <div class="nav-item">我是标题1</div>
    <div class="nav-item">我是标题2</div>
    ...
    <div class="nav-item">我是标题n</div>
</div>

但是为了偷懒我也可以在data中写入标题，然后v-for遍历

<div class="nav">
     <div class="nav-item" v-for="item in navItems">{{item}}</div>
</div>

data(){
   return {
    navItems: ['我是标题1', '我是标题2' ....., '我是标题n']
   }
}

最后展示效果都一样，但是这做data无疑是变大了，这两种方式怎么取舍？还是无所谓吗？
新人问题，请各位有经验的大佬指教

Answer 1

如果你这种数据确实，在你的项目中很多；可以单独拿出来，放到数据js中去

声明一个js

// data.js
export default {
  menuData:[] // 这里放你的data数据
}
// vue 组件
import data from 'data.js';

data(){
   return {
      navItems:[...data]
   }
}

上面的做法，就是你的 数据比较多的情况下，可以这样做。 因为那部分数据基本不会动；所以编辑修改的可能性小，可以当作基础数据，单独领出去。

个人建议啊，我自己在写后台系统的时候，大部分的配置数据也是这样抽取出去的，这样让写组件的人，可以只关心业务，代码看起来没那么糟心

Answer 2

可以用for循环的都建议放在data里，这样维护方便，减少html代码冗余

Answer 3

做开发无论用什么语言，代码的复用性是非常重要的，说大了叫模块开发，工厂模式，说小了叫代码封装，重复的代码无形中增加了维护成本，修改起来就要到处去找，各种框架的出现解决的一个重要问题就是 减少代码重复；

就上面这种问题，一行js就可以减少好几行的重复代码，无疑是再好不过的；

你可能担心这样是不是增加了vue的负担，增大了webpack、浏览器的计算量，确实增加了，webpack，浏览器就像一艘货船，总是担心船的负重而总是拉一点点货，实际上是对资源的浪费。