为什么会有人说 Vue.js 简单？

[ianva]

作为用过 angular 1 和 react 开发过很多项目的人来看， vue 的概念上比 angular 1 还多，从 compontent ， directive 的概念上来说一个概念就超过一个 react 的概念，组件设计的复杂度上讲也是。
用过 angular directive 写过很多组件的人来说，用过 react 就觉得 angular 组件设计过渡，项目组件化其实很难，很多概念来的还不如 react 简简单单的概念写的方便
而 Vue 是延续了很多设计，真搞不懂为啥会有人说 Vue 简单，就是因为有中文文档和 generator ？

[learnshare]

够用（能拿来解决问题，保证产出）就是好东西。

[ianva]

@learnshare 好坏没关系，都有优点，讨论的是 Vue 是个是个简单的库，从设计上来看其实很臃肿

[otakustay]

vue 对应 react 我不觉得概念多
data 在 react 中有 state 不
method 在 react 中有 callback 不
event 在 jsx 里有 onXxx 不
components 大家都一样
props 大家都一样

react 还要带上 children 、 ref 等一堆东西

ng1 不熟，但至少也有 scope 、 service 、 provider 、 directive 、 event 、 digest 、 watch 等，和 vuex 比起来毫不逊色
至于 ng2 ，概念能把你砸成肉酱

你觉得哪个 vue 概念是 react 里没有从而能让人觉得 react 简单的

[ianva]

@otakustay
显然是不一样，双向绑定要做到的东西要更多，要比如 watch ，
我举几个例子比如 vue 的 directive 和 angular 类似当然比 angular 还复杂，
其中的一些特性 params ， deep ， acceptStatement ， terminal ， priority ，这些都是什么？这些真需要么？真的好理解么？为什么 react 不需要这些东西？
现在看来 vue 的组件自定义的规则比 angular 的组件还是要多， ng2 说概念多真不觉得，和 ts 结合的很好把 ng1 里面的很多东西都剔除了，相对 vue 他要和 es6 class 之类的结合的很好几乎不可能

[ianva]

@otakustay
http://cn.vuejs.org/guide/custom-directive.html
http://cn.vuejs.org/guide/components.html
如果看了这文档还觉得这些东西简单那真不好说什么了，也许深入到某一个解决方案的时候这些都是需要有的，但从另一个角度设计会不会避开这些东西呢

[Vamwere]

1.vue 的文档比其他同类型优秀，特别是中文文档
2.vue 在现有项目里接入非常简单，直接引用 vuejs 就可以开写
3.vue 提供了指令，过滤器这些非常方便的东西
但这些简单都是表层的。。。

用 vue 写一个复杂的 spa 应用，需要的东西就太多了，路由要吧？你用个 vue-router ，我会告诉你它性能不行，还有一堆 bug 吗？数据管理你要用个 vuex 吧？我会告诉你它弱爆了吗？学会 vue+vue-router+vuex+webpack 这一套和学习 ng 有过之而无不及，抛开这些，最重要的社区支持，你用 ng 和 react 想要什么一搜就一堆，而且很多质量极其的高， vue 造轮子造疯你

个人对 vue 作者是有点偏见的，写 vue 的时候概念抄的都是 ng ，然后黑 ng ，现在 react 火了，又开始抄 react ，抄就抄呗，你干嘛还要黑人家

[hasbug]

文档可以， demo 足够，用的人也不少。易上手

[ianva]

@Vamwere
1. ng1 先不说，我们看 ng2 的文档 https://angular.cn/ 当然官方中文，另外 react 太简单了文档真不需要太多
2. 项目介入的话现在哪个框架没有 generator ， github 上以搜各种 yo-xxx 多太多
3. 指令过滤器这些确实是方便，其实你 react 装个 react-template 也是一样，我是 ng1 过来的，当时觉得怎么没这些指令，过滤器，各种不爽，后来发现简直是多虑，结合 FP 的一些高阶函数用起来不要太开心

[ianva]

@hasbug
文档足够，概念太多，我想不出如果文档不够好有多少人会有疑问，
用的人相对 angular 和 react 差一个数量级，整个社区的支持太差，高质量的组件并不多

[otakustay]

@ianva react 不需要？ Virtual DOM 、 shouldComponentUpdate 、 Immutable 、 Uncontroled Component 、 propTypes 、 Stateless Component ……，这都没算 JSX 的语法，以及 JSX 里各种限制，比如三元不好用啊， render 只能返回一个元素啊
我觉得你只是没仔细看 React 的文档，就看了个 getting started ，然后对于 Vue 又详细看文档不只看《起步》一章，然后这一对比产生了错觉吧……
比如下面只是 React 的一部分，你真的全看了吗

[ianva]

@otakustay
react 的这些当然用过，写过挺多的组件，也做过一些项目， react 这些概念相对于 vue 这些完全不可比
其实你举得例子真正算特殊的也就 addons ，我们挨个盘点下
1. 动画，这个其实就提供个 container 当然这里有个坑，效果和多个子元素的 key 是相关的，除此之外这个 container 非常的简单，当然有些时候确实需要自己扩展些东西，可以自己搞个 container 替代，但对比下 http://cn.vuejs.org/guide/transitions.html
2. 双向绑定这个不说了，其实这方案很少会用，要说成本，我们可以谈谈 vue 的整个库了
3. 测试工具和库无关复杂度无关概念无关， vue 有提供么？可能大多数都不写单元测试？这个我结合 airbnb 的 enzyme 可以测试 jsx 语法再加上 mocha + chai + jsdom 终端跑
4. 克隆组件，这个也是看需求非比要， React.cloneElement 就够用了
5. Immutability 这个看项目了，我觉得 vue 想引入还真挺不容易，毕竟有违双向绑定，当然 angular 也有 Immutability 的项目
6. PureRenderMixin 看性能的，非必要
7. 性能分析的 tools 就更不谈了

我想说的是我刚在举得例子里的 directive 里的这些概念在整个组件的生命周期里是有用的，而且这些概念的制造势必是在你写组件的时候需要，而且要理解的，这就是成本，而且这些东西和组件耦合的非常紧密，而不是可以拆出来如 addons 这样的

[ianva]

@otakustay
来我们对比下 vue 这堆

全局配置
debug
delimiters
unsafeDelimiters
silent
async
devtools
全局 API
Vue.extend
Vue.nextTick
Vue.set
Vue.delete
Vue.directive
Vue.elementDirective
Vue.filter
Vue.component
Vue.transition
Vue.partial
Vue.use
Vue.mixin
选项 / 数据
data
props
propsData
computed
methods
watch
选项 / DOM
el
template
replace
选项 / 生命周期钩子
init
created
beforeCompile
compiled
ready
attached
detached
beforeDestroy
destroyed
选项 / 资源
directives
elementDirectives
filters
components
transitions
partials
选项 / 杂项
parent
events
mixins
name
extends
实例属性
vm.$data
vm.$el
vm.$options
vm.$parent
vm.$root
vm.$children
vm.$refs
vm.$els
实例方法 / 数据
vm.$watch
vm.$get
vm.$set
vm.$delete
vm.$eval
vm.$interpolate
vm.$log
实例方法 / 事件
vm.$on
vm.$once
vm.$off
vm.$emit
vm.$dispatch
vm.$broadcast
实例方法 / DOM
vm.$appendTo
vm.$before
vm.$after
vm.$remove
vm.$nextTick
实例方法 / 生命周期
vm.$mount
vm.$destroy
指令
v-text
v-html
v-if
v-show
v-else
v-for
v-on
v-bind
v-model
v-ref
v-el
v-pre
v-cloak
特殊元素
component
slot
partial
过滤器
capitalize
uppercase
lowercase
currency
pluralize
json
debounce
limitBy
filterBy
orderBy
数组扩展方法
array.$set
array.$remove
Proudly sponsored by

[hxtheone]

反正我是看到双向绑定就不想用 vue 了, 抄就抄了也不挑点好的抄

[ianva]

@hxtheone 双向绑定确实提高生产力，这确实是有点，我至少觉得 vue 其实并不简单，设计上臃肿，和 react 比不说了，和 ng1 比也没什么优势， ng2 比那差挺多的

[otakustay]

@ianva 这里面和模板有关的，包括 directive 、指令、过滤器，其实在 react 中都是 jsx 的一部分，区别在于 jsx 的语法接近 js 所以你熟悉

slot 、 partial 这些不影响组件的实现和使用，不懂就不懂呗，你真有这样的需求，在 react 中去实现只会更麻烦

data 、 props 、 events 、 method 这些基本的， react 中都有

全局 API 大同小异

生命周期 Vue 因为用的是模板而不是 jsx 所以多了 compile 部分的钩子

全局配置差不多， React 人 process.env.NODE_ENV 其实挺难用的

所以综合下来，区别基本都是一下两点导致的：

1 、模板 VS jsx
2 、绑定 VS vDOM

你用熟悉了 jsx 当然觉得额外学习模板很费劲，习惯了 vDOM 又觉得绑定给你增加负担，这就是个先来后到的关系吧

顺便，不懂 directive 一点不影响 vue 的组件开发，内置的足够用了，大不了费劲在 data 上多一些计算逻辑，反正放到 react 里也是 render 写一大堆代码

[hxtheone]

@ianva 但是双向绑定带来数据流混乱在维护的时候太蛋疼了, 写 ng1 的时候实现一个 afterRender 都要 google 半天, react 里一个 componentDidMount 的事儿, Vue 倒是很识趣的加上了 lifecycle, 但这种缺什么就往里加什么的方式, 反正我个人是很不喜欢的, 所以我看了 Vue 的文档, 也觉得这个框架并不如它宣传的那么简单

[ianva]

@otakustay

我说这些的目的是说 vue 一点都不简单，设计复杂臃肿，我们不是比较优缺点的

至于指令之类的我 angular 用的很爽，我也很认同他的声明式模板，单 react 用多了又发现又有局限性，比如 ng-switch ，之类的东西其实很难看， ng-if 也是 github 上好多人反馈后才加的，因为也有违声明式模板的初衷， react 的 jsx 通过限制只执行一个值这件事上，让模板的复杂度降低了，把大量逻辑限制起来了，被迫在闭包里在，其他地方写，当然三元是个问题，但不是大的问题， map ， filter ， reduce ，等等这些很好用

[maxiujun]

哪个也没有 ember.js 简单，好用。

[ianva]

@hxtheone 对的数据流的混乱给我在一些持续维护的项目上带来了很大困扰，而又没时间重构大项目，很麻烦，所以说持续维护性的项目上如果开始没有好的架构粗暴的用双向绑定容易出问题，当然双向绑定也并不意味这维护性差，只是没有一些成熟的建筑学如 flux 这样的结局方案流行，需要自己总结很多东西，所以说在长期维护性项目和需求变更频繁的项目上风险性高

[ianva]

@maxiujun 这个到没尝试过，可以说说他的优点