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

2018-07-19 17:07:58 +08:00
 marcong95

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

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

2801 次点击
所在节点    程序员
3 条回复
yesC
2018-07-19 17:34:28 +08:00
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 的实例,里面各种循环引用,我怀疑还真有点肉眼可见的性能问题。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/472415

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX