资讯专栏INFORMATION COLUMN

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

J4ck_Chan / 2027人阅读

摘要:状态管理社区当前最流行的状态管理方案分别是单向数据流的和基于的。目前的现状主要是由于并没有将其底层的曝光出来。是一个开源项目,完全兼容的,拥簇面向未来编程,致力于加速未来生态圈的建设。

概要

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: `
{{ x }} {{ y }} {{ width }} {{ height }}
` }
当下

未来很美好,让人充满憧憬,我知道很多都和我一样对此心怀激动。最理想的情况下,我们要在 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: `
  
count is {{ count }} plusOne is {{ plusOne }}
`, 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 这么近。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104843.html

相关文章

  • 智慧化转型 企业如何构建面向未来的混合云IT新动能

    摘要:智慧计算是智慧企业建设的原动力。有调查显示,目前有的企业运行多个云,而的企业表示他们将在未来个月内部署混合云。同时,英特尔与许多生态系统合作伙伴建立了紧密合作关系,可帮助企业制定和实施可行的混合云战略。随着数字经济的崛起, 互联网业务模式的变革,以及当前经济环境的复杂性。传统企业如何把握机遇迎接挑战,企业已经到了业务数字化创新发展的关键时刻。英特尔和合作伙伴拥有差异化的软硬件产品、丰富的行业...

    liuhh 评论0 收藏0
  • 精读《前端未来展望》

    摘要:精读前端可以从多个角度理解,比如规范框架语言社区场景以及整条研发链路。同是前端未来展望,不同的文章侧重的格局不同,两个标题相同的文章内容可能大相径庭。作为使用者,现在和未来的主流可能都是微软系,毕竟微软在操作系统方面人才储备和经验积累很多。 1. 引言 前端展望的文章越来越不好写了,随着前端发展的深入,需要拥有非常宽广的视野与格局才能看清前端的未来。 笔者根据自身经验,结合下面几篇文章...

    MadPecker 评论0 收藏0
  • Dubbo开源现状与未来规划

    摘要:今天的话题是与的开源现状和未来规划,我们知道,过去一段时间疏于维护,去年阿里高调宣布重启开源之后,社区里问的最多的问题是,这次开源与上次有什么一样,还有就是和是什么关系希望通过这次的分享能够解答这些问题。 摘要: Dubbo 在过去一段时间疏于维护,去年阿里高调宣布重启 Dubbo 开源之后,社区里问的最多的问题是,这次开源与上次有什么一样,还有就是 Dubbo 和 Spring Bo...

    zhoutao 评论0 收藏0
  • 高速公路“+智能”时代 华为云如何做好智慧高速赋能者?

    摘要:在日前由中国公路学会主办的第届中国高速公路信息化研讨会上,华为云的高光亮相,不仅彰显出华为针对智慧高速建设在产品技术积淀行业经验积累和生态系统打造上的领先性,也描绘出华为云将普惠真正落地到智慧高速中的方法和路径。日前,清明节以及五一劳动节期间,收费公路对7座以下(含7座)载客车辆免收通行费的重磅消息一出,全国各地的车主们都沸腾了!不过,车主们对于堵车的担心也随之而来,其中省界收费站更是导致高...

    2450184176 评论0 收藏0
  • SOA架构技术概述

    摘要:在汽车行业,因汽车智能化和网联化需求尤其是自动驾驶系统应用的需要,车载系统软件架构技术受到国内外整车企业的关注。当前,大众奥迪宝马福特等汽车巨头自成联盟进行软件架构技术和规范的应用研究,预计前后将开始应用于量产车型。 ​一、SOA架构声明SOA架构声明用来解释SOA架构和面向服务的基础设计理念,致力于解决面向服务的核心价值...

    番茄西红柿 评论0 收藏2637

发表评论

0条评论

最新活动
阅读需要支付1元查看
<