首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
V2EX  ›  JavaScript

面向未来编程(Future-Oriented Programming),建设未来 Vue 生态

  •  
  •   liximomo · 32 天前 · 2929 次点击
    这是一个创建于 32 天前的主题,其中的信息可能已经有所发展或是发生改变。

    概要

    Vue 的作者尤雨溪最近公布了 3.0 版本最重要的 RFC Vue Function-based API。在 React 推出 Hooks 后不久,Vue 社区也迎来了自己的组件逻辑复用机制。

    未来

    Function-based API 背后的设计动机和优缺点,尤大已经在 RFC 中表述的很清楚了,可以肯定的是它所带来的价值远远大于它所引起的问题。随着 3.0 的逐渐逼近,我们可以预见整个 vue 的生态会发生巨大变化,我们看看具体会有哪些变化。

    状态管理

    React 社区当前最流行的状态管理方案分别是单向数据流的 Redux 和 基于 observableMobx。而 Vue 社区则是单向数据流的 Vuex 一枝独秀。很长一段时间,我都在期待 Vue 社区可以出现 Mobx 的对标物,对于 Vue 这样一个本身就是基于 observable 的框架,却没有相应的状态管理库,着实令人费解。虽然存在 mobx-vue,但它是基于 mobx 而实现的,并没有利用 Vue 本身的 observable 机制,不只是库大小,在使用体验式上也不如人意。

    目前的现状主要是由于 Vue 并没有将其底层的 observable API 曝光出来。而在 Vue3 与 Function-based API 中,Vue 会提供更多的 observable API,相信这一改动可以帮助社区产生一些全新易用的状态管理库。

    组件 /库

    新的设计允许我们将组件逻辑单独封装出来,会涌现出大批类似 react-use 这类的逻辑通用库。这类型的库是一系列通用功能的合集,天然 tree-shaking 友好,类似 lodash 在 JavaScript 开发中的地位一样,最终也会有一款提供常见功能的 Function 类库成为 Vue 开发中的瑞士军刀。

    import { useMousePosition, useWindowSize } from '^.-';
    
    // 在组件中使用该函数
    const Component = {
      setup() {
        const { x, y } = useMousePosition()
        // 与其它函数配合使用
        const { width, height } = useWindowSize()
        return { x, y, width, height }
      },
      template: `<div>{{ x }} {{ y }} {{ width }} {{ height }}</div>`
    }
    

    当下

    未来很美好,让人充满憧憬,我知道很多都和我一样对此心怀激动。最理想的情况下,我们要在 2019 年第三季度才能迎来 Vue3 的正式发布。But,Vue 社区从来不让你失望,Vuer 永不等待。我要向大家介绍 vue-function-api,从现在开始解锁 Vue3 最新特性 Function API


    vue-function-api

    vue-function-api 是一个开源项目,完全兼容 Vue3 的 Function API,拥簇面向未来编程,致力于加速 Vue 未来生态圈的建设。开发者可以借助它使用 Vue3 的组件逻辑复用机制开发下一代 vue 应用程序,利用 Vue3 的响应性 API 建设未来 Vue 生态。

    安装

    npm

    npm install vue-function-api --save
    

    yarn

    yarn add vue-function-api
    

    使用

    vue-function-api 利用了 Vue 的 plugin 机制,只需要在使用前进行注册即可。

    import Vue from 'vue';
    import { plugin, value, computed, watch, onMounted } from 'vue-function-api'
    
    // 安装插件
    Vue.use(plugin);
    
    new Vue({
      template: `
      <div>
        <span>count is {{ count }}</span>
        <span>plusOne is {{ plusOne }}</span>
        <button @click="increment">count++</button>
      </div>
    `,
      setup() {
        // reactive state
        const count = value(0);
        // computed state
        const plusOne = computed(() => count.value + 1);
        // method
        const increment = () => {
          count.value++;
        };
        // watch
        watch(
          () => count.value * 2,
          val => {
            console.log(`count * 2 is ${val}`);
          }
        );
        // lifecycle
        onMounted(() => {
          console.log(`mounted`);
        });
        // expose bindings on render context
        return {
          count,
          plusOne,
          increment,
        };
      },
    }).$mount('#app');
    

    结语

    从来没有一次这么期待过 Vue3,也从来没有一次离 Vue3 这么近。

    52 回复  |  直到 2019-06-21 09:34:13 +08:00
        1
    lqzhgood   32 天前
    额。。。我怎么感觉 vuex 还是优点呢……
    redux 写的那个恼火,redux+Immutable 那个闹心……
        2
    johnkiller   32 天前 via iPhone
    期待+1
        3
    noe132   32 天前
    redux 需要写较多 boilerplate
    vuex 和 redux 对 ts 支持不好

    我自己的项目,store 是自己用 vue 的 observable 实现的
        4
    yxcxx   32 天前 via iPhone   ♥ 6
    求求你们不要再搞新概念了,面向未来是什么鬼?是不是还要搞个面向世界编程和面向新时代编程啊?
        5
    sunjourney   32 天前
    @yxcxx #4 Python 就有面向未来编程啊
        6
    liximomo   32 天前
    @lqzhgood 这个还是要看场景的,vuex 对有些项目来说使用太繁琐了,库也是要随需求进一步细分的。
        7
    liximomo   32 天前
    @yxcxx 这不算是新感念,这里的未来是指已经大概明确的未来,与模糊的,不确定的未来不同。对我们来说,面向未来是一种决策,提前去接受,适应这种确定会发生的未来,可以使自己取得领先的优势。
        8
    msaionyc   32 天前   ♥ 5
    前端都是些啥妖魔鬼怪,败坏概念,老老实实期待就期待,就你这也配叫 *-Oriented Programming,你面向了什么,面向了未来? future ?别逗了
        9
    guweimo   32 天前
    @yxcxx 就是喜欢搞这些概念来吸引人啊,不然怎么吸引别人用新的呢。
        10
    love   32 天前
    期待。

    当前的 react hooks 存在的问题在 vue 版 hooks 不存在,这个 1024 级好评。
        11
    wly19960911   32 天前
    最近写多了 rxjs,感觉也就那样了,仅仅是 observable,并不是 stream。

    看了下 react-hooks + rxjs 用起来舒服太多了,很多想要的功能都能做。代码思路上都能简洁。
        12
    sunjourney   32 天前
    @love #10 yyx 说什么你就信什么吗?
    针对这句:
    ---
    当前的 react hooks 存在的问题在 vue 版 hooks 不存在
        13
    littleshy   32 天前
    hooks 是啥? angular 里有木有类似的?
        14
    miniwade514   32 天前
    对于业务逻辑复杂的项目,真正的挑战还是代码设计,而不是我该用 class components 还是 hooks
        15
    liximomo   32 天前
    @miniwade514 但是你怎么设计还是受限于你底层的设施的,hooks 提供了更大的设计可能。
        16
    Deville   32 天前
    Future-Oriented Programming 我好慌。。
        17
    GiantHard   32 天前 via Android
    @littleshy React 新出的函数式风格的 API,angular 没有类似的东西,但是,如果 ng 中的生命周期事件转换成 observable 的话,ng 差不多就可以拥有类似的功能了。
        18
    ben1024   32 天前
    Vue 的路线走歪了,又要借鉴 React,又要超过 React
    还是一个 minix 凑合着用吧
        19
    www5070504   32 天前
    面向未来编程 牛逼 太 6 了

    敬仰之情如滔滔江水连绵不绝

    又犹如黄河之水一发而不可收
        20
    avastms   32 天前 via Android
    唉,这代码出来还是一坨坨的,是不是都觉得前端不能算完整的程序员,可以放松要求啊

    造出这么多概念,不就是把值类型全部替换成引用型吗,没觉得哪里新鲜

    而且代码可读性根本没有提升
        21
    q8164305   32 天前 via Android
    我觉得 vue 现在挺好的,别再造概念了
        22
    Mogugugugu   32 天前 via Android   ♥ 2
    期待 面向社会主义 编程
        23
    notreami   32 天前
    前端们,先把 Vue2.0 的生态升级到 3.0。
    Vue 的未来肯定是废弃啊。也许 2 年,也许 200 年。。。
        24
    zhwithsweet   32 天前
    @sunjourney #12 话不能这么说,至少像我这样的菜鸡是比较相信的 yyx,技术被碾压了。
        25
    MrKou47   32 天前 via iPhone
    @avastms 说的这么明白,还让不让人恰饭了?
        26
    sailei   32 天前
    vue 3.0 终于向轻量化 走了
        27
    sugars   32 天前
    非常期待,出来马上学
        28
    liximomo   32 天前
    @sugars 利用 vue-function-api 这个包,你现在就可以开始学啦
        29
    xfriday   32 天前
    还是 angular.io 看着舒服
        30
    esbug   32 天前
    @notreami 这句话怎么说?
        31
    wszgrcy   32 天前 via Android
    @xfriday 自从学会了 angular,发现 angular 的每次改动越来越小了。。。反观其它框架,恨不得天天搞大新闻,不知道会不会谷歌放弃维护
        32
    murmur   32 天前
    @wszgrcy vue 现在还是 2 的稳定版,你说的天天搞大新闻的是 react
        33
    kiwier   32 天前
    面向四个现代化编程,哈哈
        34
    dodo2012   32 天前
    我选择 react,搞来搞去发现 react 最简单,vue 的概念越来越多了
        35
    Magentaize   32 天前 via iPhone
    所以说 rxjs 是面向世界末日编程?
        36
    wobuhuicode   32 天前
    vue 的使用者小白多,吹个 NB 也能理解
    大家都是 996 写代码的。用个框架就能把你高人一等了不成
        37
    ianva   32 天前   ♥ 4
    老老实实抄就行了,还面向未来编程,刚抄一个 hooks 就开始得瑟
        38
    reus   32 天前
    抄 angular
    抄 virtual dom
    抄 hooks
    下一个抄什么?
    呵呵,不改 copycat 本质
    hooks 那么好的话,我直接用 react 不就行了,还用 vue 干嘛?反正 vue3 等于砍掉重练了,学 react 还不是一样
        39
    Caballarii   32 天前
    尤大这次有点过于高估他的用户群体能力了
        40
    SpaceVim   32 天前 via Android
    前段整天喜欢叫嚣各种虚的
        41
    tomoya92   32 天前 via iPhone
    @yxcxx 楼主怎么知道 vue3 能代表未来的编程方向呢?

    ps 明天双色球是多少,楼主偷偷告诉我呗 😂
        42
    ianva   32 天前
    @reus 这一版看起来就像是从抄 angular 向抄 react 转型的一版
        43
    idealhs   32 天前
    面向社会主义编程
        44
    l1nyanm1ng   32 天前
    贵圈真乱
        45
    IsaacYoung   32 天前 via iPhone
    future 有点扯
        46
    Aruforce   32 天前 via Android
    前端娱乐圈? js 娱乐圈?
        47
    FrankHB   32 天前
    smg,我还以为你们前端○已经进化到吃透 call by future 了呢。
        48
    love   32 天前   ♥ 1
    @sunjourney 没看过就别 bb 了,我用了 react hooks 这么多月,一看 yyx 发的 rfc 就知道相对 react 改进在哪。vue 的 hooks 和 react 的 hooks 差别相当大,react 纯函数式,每次 render 都会运行一次函数,导致一些反直觉问题,要用 useCallback/useRef 之类的绕过,用 useEffect 也要很小心。而 vue 根本不是函数式,只运行一次就把组件状态全部打在闭包里,运行模型相当直觉,心智负担减少很多。
        49
    natuka   32 天前
    相比之下创新比较困难,在原有的基础上进行改进,这个与前者相比容易些。
        50
    ldehai   32 天前
    别的不说,Vue 的文档写的确实不错
        51
    wszgrcy   32 天前 via Android
    @murmur 对 react 动不动就冒出来新东西,相比开始,我觉得 angular 真稳定,最多就是加个参数,加个方法,有时候还用不到。。。。
        52
    murmur   32 天前
    @reus 按你这么说网上哪些 preact 这些框架都是吃饱撑着的,有 react 干嘛还要 react 兼容对不对,都是开源代码互相借鉴还上升到抄袭上了,我记得 react 的贡献者不是还跟 vue 有合作关系
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4026 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 27ms · UTC 02:57 · PVG 10:57 · LAX 19:57 · JFK 22:57
    ♥ Do have faith in what you're doing.