在 Vue.js 中，组件里并不需要 reactive 的实例变量还应该放在 data 里面吗？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2327 天前的主题，其中的信息可能已经有所发展或是发生改变。

例如说现在有一个组件里面创建了一个比较复杂的对象，这个对象只是一个 helper 性质的东西，对象的成员是完全不需要 reactive 的。那这个对象还应该放在 data 里面吗？

感觉由于 vue 会对这个对象的所有属性加上 getter/setter 之类的，可能会导致一些例如性能之类的奇奇怪怪的问题。

对象

reactive

Vue

Data

3 条回复 • 2018-07-20 10:28:51 +08:00

yesC

2018-07-19 17:34:28 +08:00

变量命名时加_或$前缀，https://vuefe.cn/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

noe132

2018-07-19 17:38:28 +08:00

如果东西不多，当然随意。
如果你用写类的方式写 Vue 组件，就不会有这个问题，因为实例属性就是 Vue 的 data

不过因为 Vue 的响应式是对 data 里所有的对象深层遍历安装 getter setter 的，所以如果不是数量特别多，比如几千几万几十万这种，通常没有性能问题。而且，如果你的属性没有在 render 函数里被访问到，或者被其他的渲染函数用到的计算属性依赖，通常是不会有副作用的，修改这些属性不会触发重新渲染。

marcong95

2018-07-20 10:28:51 +08:00

@yesC 这倒是个方法，但是文档说「它们可能和 Vue 内置的属性、API 方法冲突。」，也不知道会不会有坑

@noe132 有些对象的确是有可能很大，例如 echarts 的实例，里面各种循环引用，我怀疑还真有点肉眼可见的性能问题。