Vuejs.org: Inaccuracy in comparisons guide

[philoyou11]

template 部分无需使用 this 引用，写多了有点乱，不好区分是 data 还是 props 抑或者 methods 甚至可以是 computed 属性， 诚然可以团队约束来解决。个人觉得既然不同概念，不同使用方式似乎更合理些，可能丢失些许简洁性吧

[chrisvfritz]

Hi @philoyou11 - I apologize that I don't speak Chinese. 😅 @Jinjiang Do you have time to help here?

[Jinjiang]

我觉得这是 Vue 设计上的特点之一吧，就是可以通过 data、props、methods、computed 等不同但又很典型的方式定义组件的成员，从而简化了使用。而且从传统软件理论上，为同一个组件设计同名的 data、props、methods 或 computed 但实际背后是不同的行为似乎也不太推荐吧。所以在此做个解释。当然这里主要是讨论文档撰写的，关于设计理念本身的讨论更多的可以移步到我们的论坛或各大主流社区。
非常感谢。

Explanation: This issue discusses about why Vue.js put all data, props, methods, computed members into this because they confuse people from each others.

My reply is it's one of distinguishing feature of Vue to define component members with 4 different common ways to make this job simple and quick. And if we separate them out, things in different place with the same name always confuse people.

Thanks.

[chrisvfritz]

@Jinjiang Ah, thanks! For anyone else that finds this message and happens to read English, I'll also add that I had the same initial feeling coming to Vue from React. But over time, this "limitation" became one of my favorite features, because it leads to much more readable components.

For example, I've seen React components passed this.props.todos, with an array from an API, then that array is normalized into a new array in this.state.todos, and finally filtered in a this.todos method. In Vue, you're forced to use a different name for each prop, datum, computed property, and method - so you have to really think about what each thing actually is and give them more meaningful names.

[nickmessing]

@chrisvfritz