V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ianva
V2EX  ›  前端开发

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

  •  3
     
  •   ianva ·
    ianva · 2016-07-22 19:18:52 +08:00 · 49842 次点击
    这是一个创建于 3079 天前的主题,其中的信息可能已经有所发展或是发生改变。
    作为用过 angular 1 和 react 开发过很多项目的人来看, vue 的概念上比 angular 1 还多,从 compontent , directive 的概念上来说一个概念就超过一个 react 的概念,组件设计的复杂度上讲也是。
    用过 angular directive 写过很多组件的人来说,用过 react 就觉得 angular 组件设计过渡,项目组件化其实很难,很多概念来的还不如 react 简简单单的概念写的方便
    而 Vue 是延续了很多设计,真搞不懂为啥会有人说 Vue 简单,就是因为有中文文档和 generator ?
    134 条回复    2018-03-31 10:19:11 +08:00
    1  2  
    SourceMan
        1
    SourceMan  
       2016-07-22 19:26:24 +08:00 via iPhone
    因为它就是简单呀
    Troevil
        2
    Troevil  
       2016-07-22 19:27:08 +08:00
    概念多不代表它复杂,说它简单因为它用起来真的简单
    cxbig
        3
    cxbig  
       2016-07-22 19:30:14 +08:00
    相对其他框架来说简单太多。
    cxbig
        4
    cxbig  
       2016-07-22 19:32:02 +08:00   ❤️ 1
    React 也不过是最近半年变得调理清楚一些,之前不同的人用不同的框架,代码结构千差万别。
    ianva
        5
    ianva  
    OP
       2016-07-22 19:33:16 +08:00
    @Troevil 如果我想实现一个 dialog 能谈一谈用 Vue 实现的思路么,从被调用,用外部数据填充,标签指定填充布局,到弹出插入 dom ,外部数据和 dialog 渲染的先后此讯,到调用的方式
    用他写个组件的时候其实并不是这么如愿的方便
    zhuangtongfa
        6
    zhuangtongfa  
       2016-07-22 19:34:13 +08:00
    因为 vue 本身就简单,你觉得 react 简单那是因为你还没接触 react 的全家桶,react 没全家桶的话真的很难用,vue 一个框架就相当于 react+全家桶了,虽然 vue 也有全家桶.
    你要比较的话就拿 react 全家桶和 vue 全家桶比,不要只拿 react 和 vue 比,你比比就知道 vue 真的才叫简单
    ianva
        7
    ianva  
    OP
       2016-07-22 19:34:22 +08:00
    @cxbig react 的整个概念就是一个 vue compontent 的概念而且还要简单很多,从这个角度讲 vue 一点都不简单
    ianva
        8
    ianva  
    OP
       2016-07-22 19:35:18 +08:00
    @zhuangtongfa 全家桶当然都会用过,但如果 vue 想达到 react 全家桶的维护性,那必然比 react 全家桶还要复杂
    ianva
        9
    ianva  
    OP
       2016-07-22 19:35:45 +08:00
    @zhuangtongfa 另外谁说 react 必须要全家桶才能用的?
    ianva
        10
    ianva  
    OP
       2016-07-22 19:36:21 +08:00   ❤️ 2
    这么看其实多数人就用个双向绑定的功能
    zhuangtongfa
        11
    zhuangtongfa  
       2016-07-22 19:37:25 +08:00   ❤️ 1
    @ianva 不用全家桶就残疾框架
    skksdd
        12
    skksdd  
       2016-07-22 19:37:34 +08:00   ❤️ 4
    其实楼主不是来问为什么的
    zhuangtongfa
        13
    zhuangtongfa  
       2016-07-22 19:38:06 +08:00
    @ianva react 就一个 V 层,你开发就只开发 V?
    ianva
        14
    ianva  
    OP
       2016-07-22 19:38:21 +08:00
    @zhuangtongfa react 只是一个库, flux 是个框架,用 vue 双向绑定为目的的人群来看 react 并不逊色
    ianva
        15
    ianva  
    OP
       2016-07-22 19:39:49 +08:00
    @zhuangtongfa vue 本身也不能算个框架,他提供的功能并不提供整个项目的建筑学,从这角度讲他不具备 flux 这样优异的维护性,充其量也就是个 V 层
    Troevil
        16
    Troevil  
       2016-07-22 19:40:27 +08:00
    @ianva 闹了半天你是来求组件实现思路的 囧..
    具体实现得具体想,你问的这么详细我也没空具体跟你讲,毕竟我也没这时间, 但是就你说的 dialog 我个人觉得 vue 实现还是很简单的, 调用 数据填充 不就是 vue 组件化的功能吗? 至于什么时候渲染 以及 插入 dom ,那个 vue 的组件 生命周期的各个过程有关 ,建议直接查文档了解就可以了, 调用方式 静态 直接 vue webpack 编译写 tag 或者 动态的话 官方有例子 , 可以动态注册 或者 动态生成组件, 总的来说官方文档看完,足够你写出东西了 ,如果你还觉得难, 那我觉得你可能得再多看看类似的前端框架
    ianva
        17
    ianva  
    OP
       2016-07-22 19:43:44 +08:00
    @Troevil 并不是组件实现,而是整个项目的组件化,从这点上讲 vue 会让他边复杂,我举例子 dialog 就是这个意思,因为涉及到整个组件的生命周期,从 dialog 本身的渲染到,内部内容的渲染顺序,还有插入 body 时的处理也就是脱离根元素,另外是内容的布局,这些方面其实实现上并不简单,而且难于拆分的更细化
    作为整个项目的组件化上这些问题是非常容易碰到
    如果谈简单,其实仅仅是双向绑定时候的生产力吧
    zhuangtongfa
        18
    zhuangtongfa  
       2016-07-22 19:45:00 +08:00
    @ianva 但就开发体验上来说,做同样的事,vue 代码比 react 少,先不说维护性,题目问的是为什么 vue 简单不是吗?react 组件通信本身就麻烦,不引入 flux 的话很难处理,而且题目问的是 vue 为什么简单,vue 开发同样的东西不是比 react 简单多了吗
    ianva
        19
    ianva  
    OP
       2016-07-22 19:45:35 +08:00
    @Troevil 从这个角度看, react 非常自然的去拆分项目和组件,而 vue 通常不会这么想,因为本身的组件设计其实是很复杂的,这点在用 angular 的时候非常明显
    ianva
        20
    ianva  
    OP
       2016-07-22 19:47:00 +08:00
    @zhuangtongfa vue 的组件通信上其实是很难于维护的, angular 上开过负载项目时候就因此遇到过问题,大量撞他的维护上仅仅是事件通讯解决不好,如果不引入 flux 其实 react 当然也可以 eventbus 的方式做
    shiny
        21
    shiny  
       2016-07-22 19:51:36 +08:00
    因为入门对初学者友好,进阶都不容易。
    zhuangtongfa
        22
    zhuangtongfa  
       2016-07-22 19:59:47 +08:00
    @ianva vue 的组件通信为啥就难维护了,有 eventbus 而且不是也有 flux 的 vuex 吗?
    zhuangtongfa
        23
    zhuangtongfa  
       2016-07-22 20:07:34 +08:00
    @ianva 你用 vue-cli 生成一个项目,用用就知道了,vue 组件化不比 react 差,只是粒度没 react 那么细,但是就是因为没那么细反而避免了很多麻烦.而且 vue 的 component 很多功能都是很实用的,比如 css 的 scoped,支持多种 css 预处理器,自带钩子机制,处理 css 动画过渡真的很简单,简单写几个 css,挂载下就行,开发体验比 react 真的好很多,同样的项目我用 react1 个月都搞不定,但是用 vue 一两个星期就搞定了
    chairuosen
        24
    chairuosen  
       2016-07-22 20:08:06 +08:00   ❤️ 1
    我觉得 Vue 的简单是指灵活,小需求可以用非常少的代码实现,什么组件啊通信啊不用管。大需求又可以用到 Vue 的全部丰富功能。又可以当库用,又可以当框架。
    比如只作用在后端渲染的 HTML 里的某一部分。
    loading
        25
    loading  
       2016-07-22 20:44:19 +08:00 via Android
    你可以用 jquery 写一个它的 demo 看看。
    civet
        26
    civet  
       2016-07-22 21:02:29 +08:00 via iPhone
    这究竟要讨论 易学?易用?还是架构复杂度问题?
    别的不说,只觉得用 vue 写可以敲少很多代码,而且可以更专注原始的 html css
    LancerComet
        27
    LancerComet  
       2016-07-22 21:10:17 +08:00
    楼主觉得复杂应该是 Vue 把概念更细分了, ng 的指令拆为指令 + 组件; ng 的控制器可看为 Vue 实例(视图对象),不过里面的属性按角色分为 data 、 events 、 methods 、 components 、 props ,如果有 Vuex 还要算上 store 、 actions 、 getters ,虽然看起来多,但个人觉得很清晰,像 ng 跟 Avalon 之类都扔到 scope / vm 上,到最后可能却变的混乱。
    ianva
        28
    ianva  
    OP
       2016-07-22 22:25:49 +08:00
    @skksdd 其实是来引战的
    ianva
        29
    ianva  
    OP
       2016-07-22 22:26:30 +08:00
    @loading 我说的简单和复杂是相对与 angular 和 react ,引入的概念比 angular 还多
    ianva
        30
    ianva  
    OP
       2016-07-22 22:27:11 +08:00
    @civet 对相对与 jquery 之类的 dom 操作库确实是,这不是一个操作 dom 为主流的年代了
    ianva
        31
    ianva  
    OP
       2016-07-22 22:29:44 +08:00   ❤️ 1
    @LancerComet anglar 在后面也引入了 compontent 的概念, vue 的这概念页是学的 angular ,长时间用 angular 做项目自然知道这类 mvvm 的库和框架是怎么大幅提高生产力的,但维护性上问题很大, scope 确实是毒瘤, angular 后面确实主张用 this 去做, angular 2 更是去掉了这个概念
    ianva
        32
    ianva  
    OP
       2016-07-22 22:31:41 +08:00
    @chairuosen 对在我看来是整个库的设计臃肿,没有跳出 angular 1 的设计理念,相对与 react 来说复杂太多了,生产力方面的提升主要是双向绑定和一些指令,声明式的模板,用 angular 产出确实是高
    ianva
        33
    ianva  
    OP
       2016-07-22 22:35:39 +08:00
    @zhuangtongfa 用过 angular 多年的人看到 vue 基本就知道是个什么运作方式,毕竟 vue 说起来算个 angular 的简版,加少许改进,毕竟作者最初开发这个库的原因是跟着 angular 练手的,用 angular 在生产力方面确实是高出 react 很多,但一旦进入维护阶段 angualr 的成本大幅提高, vue 有同样的问题,我说 vue 不简单的原因是整个设计其实比 angular 的设计还要臃肿,太多概念,而且 angular 本身一些不好的设计也在里面,其实了解整个库的上手难度是高于 react 非常多的,在 flux 从 facebook 公布之前 react 早被各种方式广泛使用,包括 backbone 之类的,当然并不一定是最佳实践
    Perry
        34
    Perry  
       2016-07-22 22:37:40 +08:00
    agree to disagree
    ZGLHHH
        35
    ZGLHHH  
       2016-07-22 22:41:43 +08:00
    1.Vue 仅仅负责了 MVC 中的 V
    2.文档和用法清晰易懂
    3.社区
    ianva
        36
    ianva  
    OP
       2016-07-22 22:44:05 +08:00
    @ZGLHHH
    1. 当然是个 mvvm ,如果仅仅算个 v 那比 react 复杂多少呢
    2. 文档上来说其实就中文文档这一点可以说国人友好
    3. 社区上看是完全失败的,整个 github vue 项目不到 3000 ,而 react , angular 是 6 万多
    ZGLHHH
        37
    ZGLHHH  
       2016-07-22 22:48:41 +08:00
    ianva
        38
    ianva  
    OP
       2016-07-22 22:51:53 +08:00
    @ZGLHHH 只讲对自己有利的东西 react 的真正优点可不是 Virtual DOM ,而设计上一点也不比 angualr 简单,当然 angular 1 有历史遗留问题, 2 的话 vue 真没法比
    Vamwere
        39
    Vamwere  
       2016-07-22 23:57:41 +08:00
    react 是给程序员用的
    ianva
        40
    ianva  
    OP
       2016-07-23 00:06:16 +08:00
    @Vamwere 谁是程序员,谁又不是
    learnshare
        41
    learnshare  
       2016-07-23 00:09:16 +08:00
    够用(能拿来解决问题,保证产出)就是好东西。
    ianva
        42
    ianva  
    OP
       2016-07-23 00:11:07 +08:00
    @learnshare 好坏没关系,都有优点,讨论的是 Vue 是个是个简单的库,从设计上来看其实很臃肿
    otakustay
        43
    otakustay  
       2016-07-23 00:20:04 +08:00
    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
        44
    ianva  
    OP
       2016-07-23 00:35:47 +08:00
    @otakustay
    显然是不一样,双向绑定要做到的东西要更多,要比如 watch ,
    我举几个例子比如 vue 的 directive 和 angular 类似当然比 angular 还复杂,
    其中的一些特性 params , deep , acceptStatement , terminal , priority ,这些都是什么?这些真需要么?真的好理解么?为什么 react 不需要这些东西?
    现在看来 vue 的组件自定义的规则比 angular 的组件还是要多, ng2 说概念多真不觉得,和 ts 结合的很好把 ng1 里面的很多东西都剔除了,相对 vue 他要和 es6 class 之类的结合的很好几乎不可能
    ianva
        45
    ianva  
    OP
       2016-07-23 00:37:32 +08:00
    @otakustay
    http://cn.vuejs.org/guide/custom-directive.html
    http://cn.vuejs.org/guide/components.html
    如果看了这文档还觉得这些东西简单那真不好说什么了,也许深入到某一个解决方案的时候这些都是需要有的,但从另一个角度设计会不会避开这些东西呢
    Vamwere
        46
    Vamwere  
       2016-07-23 00:38:26 +08:00
    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
        47
    hasbug  
       2016-07-23 00:38:45 +08:00
    文档可以, demo 足够,用的人也不少。易上手
    ianva
        48
    ianva  
    OP
       2016-07-23 00:42:50 +08:00
    @Vamwere
    1. ng1 先不说,我们看 ng2 的文档 https://angular.cn/ 当然官方中文,另外 react 太简单了文档真不需要太多
    2. 项目介入的话现在哪个框架没有 generator , github 上以搜各种 yo-xxx 多太多
    3. 指令过滤器这些确实是方便,其实你 react 装个 react-template 也是一样,我是 ng1 过来的,当时觉得怎么没这些指令,过滤器,各种不爽,后来发现简直是多虑,结合 FP 的一些高阶函数用起来不要太开心
    ianva
        49
    ianva  
    OP
       2016-07-23 00:51:08 +08:00
    @hasbug
    文档足够,概念太多,我想不出如果文档不够好有多少人会有疑问,
    用的人相对 angular 和 react 差一个数量级,整个社区的支持太差,高质量的组件并不多
    otakustay
        50
    otakustay  
       2016-07-23 00:53:24 +08:00
    @ianva react 不需要? Virtual DOM 、 shouldComponentUpdate 、 Immutable 、 Uncontroled Component 、 propTypes 、 Stateless Component ……,这都没算 JSX 的语法,以及 JSX 里各种限制,比如三元不好用啊, render 只能返回一个元素啊
    我觉得你只是没仔细看 React 的文档,就看了个 getting started ,然后对于 Vue 又详细看文档不只看《起步》一章,然后这一对比产生了错觉吧……
    比如下面只是 React 的一部分,你真的全看了吗
    ianva
        51
    ianva  
    OP
       2016-07-23 01:12:23 +08:00
    @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
        52
    ianva  
    OP
       2016-07-23 01:15:47 +08:00
    @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
        53
    hxtheone  
       2016-07-23 01:31:11 +08:00
    反正我是看到双向绑定就不想用 vue 了, 抄就抄了也不挑点好的抄
    ianva
        54
    ianva  
    OP
       2016-07-23 01:34:44 +08:00
    @hxtheone 双向绑定确实提高生产力,这确实是有点,我至少觉得 vue 其实并不简单,设计上臃肿,和 react 比不说了,和 ng1 比也没什么优势, ng2 比那差挺多的
    otakustay
        55
    otakustay  
       2016-07-23 01:42:39 +08:00 via iPad
    @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
        56
    hxtheone  
       2016-07-23 01:43:54 +08:00
    @ianva 但是双向绑定带来数据流混乱在维护的时候太蛋疼了, 写 ng1 的时候实现一个 afterRender 都要 google 半天, react 里一个 componentDidMount 的事儿, Vue 倒是很识趣的加上了 lifecycle, 但这种缺什么就往里加什么的方式, 反正我个人是很不喜欢的, 所以我看了 Vue 的文档, 也觉得这个框架并不如它宣传的那么简单
    ianva
        57
    ianva  
    OP
       2016-07-23 01:49:28 +08:00
    @otakustay

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

    至于指令之类的我 angular 用的很爽,我也很认同他的声明式模板,单 react 用多了又发现又有局限性,比如 ng-switch ,之类的东西其实很难看, ng-if 也是 github 上好多人反馈后才加的,因为也有违声明式模板的初衷, react 的 jsx 通过限制只执行一个值这件事上,让模板的复杂度降低了,把大量逻辑限制起来了,被迫在闭包里在,其他地方写,当然三元是个问题,但不是大的问题, map , filter , reduce ,等等这些很好用
    maxiujun
        58
    maxiujun  
       2016-07-23 01:51:55 +08:00
    哪个也没有 ember.js 简单,好用。
    ianva
        59
    ianva  
    OP
       2016-07-23 01:52:37 +08:00
    @hxtheone 对的数据流的混乱给我在一些持续维护的项目上带来了很大困扰,而又没时间重构大项目,很麻烦,所以说持续维护性的项目上如果开始没有好的架构粗暴的用双向绑定容易出问题,当然双向绑定也并不意味这维护性差,只是没有一些成熟的建筑学如 flux 这样的结局方案流行,需要自己总结很多东西,所以说在长期维护性项目和需求变更频繁的项目上风险性高
    ianva
        60
    ianva  
    OP
       2016-07-23 01:52:56 +08:00
    @maxiujun 这个到没尝试过,可以说说他的优点
    ianva
        61
    ianva  
    OP
       2016-07-23 01:56:52 +08:00
    @otakustay 另外 react 也有 http://wix.github.io/react-templates/ 这样 ng 风格的模板,原封不动,如果真觉得不爽可以整起来,当然需要在编译阶段做些事情,也略显麻烦
    otakustay
        62
    otakustay  
       2016-07-23 02:00:11 +08:00 via iPad   ❤️ 2
    @ianva 你没有意识到,你所说的这些 react 的优势,所谓的限制不易出错、被迫闭包、多用 map 、 filter 、 reduce ,每一件对于不那么优秀的开发者都是一种负担
    世界上更多的是不会 filter 不会 map ,只会写个数组 for+push 。更多的是代码随处写 F5 跑起来就关机回家。更多的是根本无法理解"只执行一个值"是怎么回事的人。
    所以, Vue 就是"简单""好用",不在于 API 多少,而在于不受限制、不需要听你的哲学、不需要接受思想的洗礼,我很弱但我能让页面展现出来给老板交差,我能下班回家看电影逛街,这就是简单好用
    otakustay
        63
    otakustay  
       2016-07-23 02:01:05 +08:00 via iPad
    @ianva 你说这些第三方的完全没用,我觉得你是太过优秀了,看不到最底层的人是怎么写代码干活的了。。。
    ianva
        64
    ianva  
    OP
       2016-07-23 02:04:13 +08:00
    @otakustay 从这点来说其实是模板上的问题,所以 http://wix.github.io/react-templates/ 这样的方案完全可以解决,就算不解决并不是个劣势,如果抛开这些我不觉得 react 学习成本比 vue 高,如果说什么哲学,那么 ng 的声明式模板也是哲学,对你说的人群别人还觉得不如 ejs 呢
    ianva
        65
    ianva  
    OP
       2016-07-23 02:05:28 +08:00
    @otakustay 见识多了,毕竟干了这么多年,你说的那些人群也必然不是 vue 的定位人群, vue 这些概念太复杂了
    otakustay
        66
    otakustay  
       2016-07-23 02:12:54 +08:00 via iPad   ❤️ 4
    @ianva 这不是优劣势的问题,对于大部分的人,他们会做的就是:

    1 、把官网的例子 copy 过来
    2 、胡乱改改变量,加点逻辑
    3 、跑起来看看

    如果没跑起来,就整个蒙蔽了

    你让他们找第三方的 react-template ?让他们再集成这种 addon ?你干脆直接让他们滚蛋回家比较合适。
    在这一点上, Vue 就能做到,随便水平怎么样,拿着也许本来就已经写了一大半的大学上课的水平的 HTML ,按着官方例子写个 data ,在 HTML 上吧 src 改成 v-src ,把 onclick 改成 on-click ,哎呦跑起来了
    所以 Vue 就是"简单"的,这个话题讨论的"简单"就在这里

    你让他们用 EJS ,他们应该也会高兴的,但它们还要去写 jQuery ,去写 attr 、 prop 、 on 、 off , Vue 告诉他们可以这样那样就不用写着写东西了,他们就更高兴了,而且也没给他们什么额外的负担(人家连 doc 都不看,有个啥负担可言,写错了就上 CSDN 问就是了),不久照样写 HTML 么,不就 attr 前面加个 v-,事件前面加个 on-么,对于这些人, Vue 的 modifier 都是不需要知道的, jQuery 是 e.preventDefault , Vue 里也就一样是 e.preventDefault ,毫无迁移成本,这就是"简单"

    我知道 React 很优秀,但 React (以及 Flux )天生是为了应对 Facebook 这种级别的应用而生的(这是 Facebook 自己说的),对于那些一辈子也见不到这个级别的东西的人来说,他们不会懂

    我再往简单的说,一个 JSX 能吓退各种二三线城市小公司 80 %以上的程序员,光听到"React 的组件是用 JSX 写的,不是 JS",他们就已经和 React 说拜拜了
    otakustay
        67
    otakustay  
       2016-07-23 02:14:51 +08:00 via iPad
    @ianva 不,这些人恰恰是 Vue 的人群,因为 Vue 做到了 copy paste 可以跑出个项目来, React 没有做到,拿着 React 的 demo 可以弄出个 Hello World ,接下去怎么办,他们一筹莫展
    这是我实际接触过的情况, ng1 他们也能接受,反正 copy paste 改改变量能跑,但 React 他们真的不行
    ianva
        68
    ianva  
    OP
       2016-07-23 02:15:07 +08:00
    @otakustay 是的,他们会用 jquery 的他们不会用 vue 的,因为双向绑定的概念对他们来说太难了,接受不了,我觉得用 Vue 的人群已经算是很有基础的了
    otakustay
        69
    otakustay  
       2016-07-23 02:17:34 +08:00 via iPad   ❤️ 1
    @ianva 有一类人很能接受 Vue 和 ng1 ,就是 java 写的不错但前端不行的人,他们可以接受绑定这个概念,但是对于组件,对于树形结构,完全没办法理解,那么对他们来说,一堆数据+一个 HTML +写写 js 改数据,是在开心不过的了,这就是我厂现在 RD 写页面的现状- -
    ianva
        70
    ianva  
    OP
       2016-07-23 02:19:49 +08:00
    @otakustay 那人群又不一样了,其实讨论的有点过了,其实方便的就几点,声明模板,数据双向绑定,剔除了 ng1 历史遗留的 module
    ianva
        71
    ianva  
    OP
       2016-07-23 02:24:04 +08:00
    @otakustay 之前有个 php 的工程师,被要求 cto 用 angular 写一个项目,然后 4 个月没搞定离职了,然后我看了下 2000 多行的 controller 全挂 scope ,没敢碰代码,然后他们团队的 php 架构师维护这项目最后坚定的说一定不能用 angluar 这种技术,必须 jquery ,所以 vue 相对来说还是需要水平的
    mdluo
        72
    mdluo  
       2016-07-23 03:28:53 +08:00   ❤️ 2
    LZ 是真的懂而且都比较深入的研究过,我们这些只用过一个或者只看过别人写的体会而没有自己实际体会的看看就好了。

    这样下去迟早会把尤雨溪炸出来,或者是在其他地方

    另外感觉 vue 在国内的蜜汁好评率是不是因为每当中文社区里出现反对声音的时候,老尤就会出来用自己最丰富的 vue.js 使用经验把反对者打败
    coffce404
        73
    coffce404  
       2016-07-23 07:50:53 +08:00 via Android
    看个一两小时文档就能入门的框架,说他简单很正常。
    双向绑定只是一个表单语法糖,以为 vue 就是双向绑定的人,明显是不理解 vue 。 vue 的核心是优秀的组件设计,与 react 最大的区别只是 render 写法和原理的不同,另外 api 设计更加简洁,就这点区别。
    sox
        74
    sox  
       2016-07-23 07:53:40 +08:00 via Android
    你没看尤小右写的框架对比?

    但就一点不需要专门的性能优化就比 React/angular 显得简单。
    SuperMild
        75
    SuperMild  
       2016-07-23 07:58:21 +08:00 via iPad
    @mdluo 可见有一个活跃的高手对项目发展多么重要
    sox
        76
    sox  
       2016-07-23 07:59:24 +08:00 via Android
    ps. 我没听别人说过 vue 简单,只是说好用。
    readonly
        77
    readonly  
       2016-07-23 09:26:53 +08:00 via iPhone   ❤️ 1
    项目中用到了比较深度的自定义指令,官方的文档没有丝毫用处,必须得去看 v-for 源码。

    但是我得说说我为什么要写这种指令: 因为我需要完全声明式的语法,去构造所需的数据结构。我不能让开发人员去写一堆的 map filter reduce 。大多数人其实都是会类似 jsp 之类的技术的,他们希望用声明式的写法去处理模板中的数据。
    相对于 react ,对,它很 js 。但大多数人的 js 水平实在是渣渣,函数式,高阶组件,不懂 js 的人就是不懂,不用指望他们懂。

    概念多是因为功能多, react 要做到 vue 默认自带的功能,也需要了解很多东西,这是拿菜刀和瑞士军刀在比, vue 你可以完全不用指令,全部用 js 和组件,但是这可能是徒增烦恼,因为就是有父子作用域相互交织会比较直观的场景。

    PS: react 光光是 jsx 就让我不知道怎么解释给小伙伴了,不然就不会有那么多文章给它正名了。而且要看懂那些文章,你得知道 webpack , bable-react ,。对于 vue 来说,只需要知道 .vue 文件会进行编译就可以了,里面依然是很传统的写法。
    题主就是那种会说: 语文好难,概念好多,东西好多,要学的好多,还是数学直观,容易懂的人了吧?
    zhuangtongfa
        78
    zhuangtongfa  
       2016-07-23 09:48:54 +08:00   ❤️ 1
    我们跟你讲简单易用,你跟我们讲可维护性,我们跟你讲语法,你跟我们讲 api 设计,这还讨论个啥
    react 本身定位就是做中大型项目,vue 定位是中小型项目,你每天做 fackbook 那种大型项目?
    就中小型项目来说,做同样的事,vue 开发快这不是简单吗?提供给你的东西是多,但都是有用的,难道还自己造轮子
    就跟你拿 java 和 php 对比,你问的是为什么 php 简单易用,我也跟你讲 php 的简单易用,你非跟我扯可维护性,那我也没什么话好说了
    XueSeason
        79
    XueSeason  
       2016-07-23 10:09:22 +08:00
    想到一句话,你永远叫不醒一个装睡的人。
    zhuangtongfa
        80
    zhuangtongfa  
       2016-07-23 10:13:34 +08:00
    而且你说 vue 的 api 多,概念多
    api 多就难?vue 的 api 里哪一个不是针对实际开发的功能
    别人给你一整套武林秘籍,灵活使用,你说难,非得抱着一本如来佛掌在那练
    ianva
        81
    ianva  
    OP
       2016-07-23 10:24:12 +08:00
    @coffce404 vue 的组件设计恰恰是他的问题,用过 ng1 就会知道有多少毛病,问什么 ng2 会这样改进,由于 directive 和 compontent 的设计复杂所以,写组件的时候要注意的东西其实很多, react 这点上来说就比较容易,我举个例子,当我们想把某一部分的业务做组件独立的时候,其实很多时候做没做的原因在于成本,恨不得一个 function 就解决问题,当然你 creativeClass 其实就写了很多东西,还要考虑生命周期,但 vue 的 directive 和 compontent 其实要考虑的更多,那么这个时候我们很有可能就放弃了把不分业务独立这件事情,
    另外在组件的设计上虽然提供了很多功能,其实是因为内部的复杂导致必须对外暴露很多东西才让一些东西可以实现,这也是无奈之举,有所感慨是因为从 ng1 到 react 的对比,同样的 directive 确做不到规则更少更的简单 react compontent 能方便做到的东西
    ianva
        82
    ianva  
    OP
       2016-07-23 10:27:23 +08:00
    @zhuangtongfa 从双向绑定和模板的方面说,这确实是简单,和 ng1 一样,但我们能说 ng1 也很简答么,但其实很多概念涉及到的东西非常多,概念多意味着作者为了制造这些概念势必要做很多特别的处理,也就意味着做一些东西很有可能会踩很多坑,从整个库来看确实东西太多,组件设计的过于复杂
    ianva
        83
    ianva  
    OP
       2016-07-23 10:29:42 +08:00
    @sox 只讲对自己有利的东西 react 的真正优点可不是 Virtual DOM ,组件设计上的轻巧比 vue 好太多了 ,而另外设计上一点也不比 angualr 简单,当然 ng1 有历史遗留问题, ng2 没法比了
    ianva
        84
    ianva  
    OP
       2016-07-23 10:33:37 +08:00
    @readonly 模板上来说, js 的原生是易于理解,声明式模板的设计也很好,这没的说,当然有些时候会有局限性,所以我想说的是,其实对于切菜来说菜刀最好,给瑞士军刀其实不好用,从这点说 vue 是复杂的,另外你说的那些其实 webpack bable , vue 一样需要
    morethansean
        85
    morethansean  
       2016-07-23 10:41:19 +08:00   ❤️ 3
    vue 看 10 分钟就能直接用起来,
    而 ag1 还要先学一堆概念。
    大多数人先只有一个简单的需求,抱着我要实现一个 xxx 来看看你这个框架应该怎么实现,对于框架其他的功能我先了解了解以后有了复杂的需求的时候再用。从这点来说 vue 真是简单得不能再简单了。
    这大概也是你说的 “如果谈简单,其实仅仅是双向绑定时候的生产力吧” 。
    ng1 你除了要考虑各种各样的问题你还需要对他的一些实现有一定的了解,不然就是各种各样的性能坑和谜之 misbehavior 等等。而 react 对于某些人来说,光是环境搭建 IDE 配置可能都要弄个半天,在他们现有的技术栈上 vue 真是太简单了。
    其实也就是, vue 并没有脱离他们传统的开发模式到多远,没有给他们带来那么多一定要了解的或者和之前不同的新概念。看看 ag1 非得在文档里不停地 DIDIDIDIDI ,还科普你 DI 是什么 blablabla ,强行要把这么一套概念告诉你,解释这套系统的设计模式。简简单单就设计成这样了,告诉你应该这么用就够了,比如像 Polymer 一样,对很多人来说没那么混淆视线。
    cljnnn
        86
    cljnnn  
       2016-07-23 10:49:31 +08:00 via Android   ❤️ 1
    vue 很简单了,我以前连 js 都没有怎么用过。学了半天 vue 就做了一个查看股票行情的网页,有排序,删除,添加。
    plqws
        87
    plqws  
       2016-07-23 10:58:02 +08:00
    ng 的概念太多了, vue 只要按照官方 demo 写完自己改改就能跑了,而且写着写着自己就能理解了。 ng 就是你写完还不知道这个是干嘛用的。
    CupTools
        88
    CupTools  
       2016-07-23 11:01:08 +08:00 via Android
    @morethansean +1

    上次 hackathon 的时候跟队友用 react 环境配置弄了 N 久
    wslsq
        89
    wslsq  
       2016-07-23 11:05:34 +08:00
    很喜欢 vue 啊,对 vue 有偏见的人真心不明白
    loveyu
        90
    loveyu  
       2016-07-23 11:48:30 +08:00
    当你写了一堆后台逻辑,然后 BOSS 让你写个后台。面对一大堆数据和交互,我想 vue 的双向绑定和那个啥是最简单的,刷新下就能看到效果多好。简单不简单,还是看怎么用吧。
    zhuangtongfa
        91
    zhuangtongfa  
       2016-07-23 11:58:42 +08:00
    react 本身是简单,只有几个 api,问题是你开发就用这几个 api 就够了?给你把菜刀,你觉得切菜用菜刀挺好的,如果是切其他东西呢?react 生态复杂,小白能轻易上手?
    起步就要配 webpack,babel,学 jsx,用着用着发现要组件通信,props 不够用,又得引入 event/message,然后又说不够优雅,又得引入 flux 概念,学着学着又了解到 redux,大多数时候只是想做个移动页面,在移动端使用打包大,还得学 webpack 优化,需要了解那么多东西?
    vue 说真的,光是双向绑定,项目中使用就能减少很多工作量了,你确定 react 能做到?
    别扯维护性,api 设计,api 怎么设计的那是作者的事,不在讨论范围呢,只讨论 react 和 vue 哪个更简单
    blackboom
        92
    blackboom  
       2016-07-23 12:17:49 +08:00 via Android
    react 学习曲线比陡峭,正如楼上所说的,路由 flux redux 接受起来需要一段过程,而 VUE 相对来说就比较快一些
    coffce404
        93
    coffce404  
       2016-07-23 12:44:47 +08:00
    @ianva 拿 ng1 的经验类比 vue 就是错的,比起 ng1 , vue 更类似 react
    heganj
        94
    heganj  
       2016-07-23 12:46:21 +08:00
    我只用过 react ,未用过 Vue 和 angular 。
    react 的强大之处在于生态,常用的组件基本能 google 到
    react 也能操作 svg ,跟 d3 配合使用很爽
    服务器端生成 html ,反而比较少时候需要用到

    不知道 vue , ng 在这些方面如何
    shulen
        95
    shulen  
       2016-07-23 13:14:27 +08:00
    vue 确实简单,感觉 ng 难不少
    zonghua
        96
    zonghua  
       2016-07-23 13:28:46 +08:00
    @cljnnn 然而我是属于用 jQuery 习惯了,用 Vue 改不回来。
    reverland
        97
    reverland  
       2016-07-23 14:03:15 +08:00
    @zhuangtongfa vue 用着用着也是,起步就要配 webpack,babel,学 jsx,用着用着发现要组件通信,props 不够用,又得引入 event/message,然后又说不够优雅,后来 vuex , 在移动端使用打包大,还得学 webpack 优化...
    NovemberEleven
        98
    NovemberEleven  
       2016-07-23 14:19:50 +08:00
    汗,我到现在还是 jQuery + handlebars ,主业不是做前端
    zhuangtongfa
        99
    zhuangtongfa  
       2016-07-23 14:49:41 +08:00
    @reverland 呵呵,真不好意思,我只知道我用 vue-cli 生成的项目脚手架,webpack 都不用碰,而且作者做了优化处理,build 出来的 js 才 100 多 kb,通信我用 eventbus,简单高效,别说你移动端还用 react
    undozen
        100
    undozen  
       2016-07-23 15:29:28 +08:00
    这个讨论有意思
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4932 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 44ms · UTC 05:40 · PVG 13:40 · LAX 21:40 · JFK 00:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.