Vue 的作者尤雨溪最近公布了 3.0 版本最重要的 RFC Vue Function-based API。在 React 推出 Hooks 后不久,Vue 社区也迎来了自己的组件逻辑复用机制。
Function-based API 背后的设计动机和优缺点,尤大已经在 RFC 中表述的很清楚了,可以肯定的是它所带来的价值远远大于它所引起的问题。随着 3.0 的逐渐逼近,我们可以预见整个 vue 的生态会发生巨大变化,我们看看具体会有哪些变化。
React 社区当前最流行的状态管理方案分别是单向数据流的 Redux 和 基于 observable
的 Mobx。而 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 是一个开源项目,完全兼容 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 这么近。
1
lqzhgood 2019-06-20 12:36:10 +08:00
额。。。我怎么感觉 vuex 还是优点呢……
redux 写的那个恼火,redux+Immutable 那个闹心…… |
2
johnkiller 2019-06-20 13:03:50 +08:00 via iPhone
期待+1
|
3
noe132 2019-06-20 13:06:31 +08:00
redux 需要写较多 boilerplate
vuex 和 redux 对 ts 支持不好 我自己的项目,store 是自己用 vue 的 observable 实现的 |
4
yxcxx 2019-06-20 13:13:13 +08:00 via iPhone 6
求求你们不要再搞新概念了,面向未来是什么鬼?是不是还要搞个面向世界编程和面向新时代编程啊?
|
5
sunjourney 2019-06-20 13:21:18 +08:00
@yxcxx #4 Python 就有面向未来编程啊
|
7
liximomo OP @yxcxx 这不算是新感念,这里的未来是指已经大概明确的未来,与模糊的,不确定的未来不同。对我们来说,面向未来是一种决策,提前去接受,适应这种确定会发生的未来,可以使自己取得领先的优势。
|
8
msaionyc 2019-06-20 13:34:49 +08:00 5
前端都是些啥妖魔鬼怪,败坏概念,老老实实期待就期待,就你这也配叫 *-Oriented Programming,你面向了什么,面向了未来? future ?别逗了
|
10
love 2019-06-20 13:38:20 +08:00
期待。
当前的 react hooks 存在的问题在 vue 版 hooks 不存在,这个 1024 级好评。 |
11
wly19960911 2019-06-20 13:42:03 +08:00
最近写多了 rxjs,感觉也就那样了,仅仅是 observable,并不是 stream。
看了下 react-hooks + rxjs 用起来舒服太多了,很多想要的功能都能做。代码思路上都能简洁。 |
12
sunjourney 2019-06-20 14:31:21 +08:00
|
13
littleshy 2019-06-20 14:45:58 +08:00
hooks 是啥? angular 里有木有类似的?
|
14
miniwade514 2019-06-20 14:55:22 +08:00
对于业务逻辑复杂的项目,真正的挑战还是代码设计,而不是我该用 class components 还是 hooks
|
15
liximomo OP @miniwade514 但是你怎么设计还是受限于你底层的设施的,hooks 提供了更大的设计可能。
|
16
Deville 2019-06-20 15:12:02 +08:00
Future-Oriented Programming 我好慌。。
|
17
GiantHard 2019-06-20 15:20:14 +08:00 via Android
@littleshy React 新出的函数式风格的 API,angular 没有类似的东西,但是,如果 ng 中的生命周期事件转换成 observable 的话,ng 差不多就可以拥有类似的功能了。
|
18
ben1024 2019-06-20 15:30:19 +08:00
Vue 的路线走歪了,又要借鉴 React,又要超过 React
还是一个 minix 凑合着用吧 |
19
www5070504 2019-06-20 15:35:47 +08:00
面向未来编程 牛逼 太 6 了
敬仰之情如滔滔江水连绵不绝 又犹如黄河之水一发而不可收 |
20
EPr2hh6LADQWqRVH 2019-06-20 15:37:27 +08:00 via Android
唉,这代码出来还是一坨坨的,是不是都觉得前端不能算完整的程序员,可以放松要求啊
造出这么多概念,不就是把值类型全部替换成引用型吗,没觉得哪里新鲜 而且代码可读性根本没有提升 |
21
q8164305 2019-06-20 15:40:47 +08:00 via Android
我觉得 vue 现在挺好的,别再造概念了
|
22
Mogugugugu 2019-06-20 16:10:38 +08:00 via Android 2
期待 面向社会主义 编程
|
23
notreami 2019-06-20 16:20:22 +08:00
前端们,先把 Vue2.0 的生态升级到 3.0。
Vue 的未来肯定是废弃啊。也许 2 年,也许 200 年。。。 |
24
zhwithsweet 2019-06-20 16:34:30 +08:00
@sunjourney #12 话不能这么说,至少像我这样的菜鸡是比较相信的 yyx,技术被碾压了。
|
26
sailei 2019-06-20 17:26:48 +08:00
vue 3.0 终于向轻量化 走了
|
27
sugars 2019-06-20 17:30:18 +08:00
非常期待,出来马上学
|
29
xfriday 2019-06-20 17:42:56 +08:00
还是 angular.io 看着舒服
|
31
wszgrcy 2019-06-20 18:14:25 +08:00 via Android
@xfriday 自从学会了 angular,发现 angular 的每次改动越来越小了。。。反观其它框架,恨不得天天搞大新闻,不知道会不会谷歌放弃维护
|
33
kiwier 2019-06-20 18:21:46 +08:00
面向四个现代化编程,哈哈
|
34
dodo2012 2019-06-20 18:22:44 +08:00
我选择 react,搞来搞去发现 react 最简单,vue 的概念越来越多了
|
35
Magentaize 2019-06-20 18:26:15 +08:00 via iPhone
所以说 rxjs 是面向世界末日编程?
|
36
wobuhuicode 2019-06-20 18:28:58 +08:00
vue 的使用者小白多,吹个 NB 也能理解
大家都是 996 写代码的。用个框架就能把你高人一等了不成 |
37
ianva 2019-06-20 18:32:18 +08:00 4
老老实实抄就行了,还面向未来编程,刚抄一个 hooks 就开始得瑟
|
38
reus 2019-06-20 18:37:13 +08:00
抄 angular
抄 virtual dom 抄 hooks 下一个抄什么? 呵呵,不改 copycat 本质 hooks 那么好的话,我直接用 react 不就行了,还用 vue 干嘛?反正 vue3 等于砍掉重练了,学 react 还不是一样 |
39
Caballarii 2019-06-20 18:39:51 +08:00
尤大这次有点过于高估他的用户群体能力了
|
40
nG29DOMuRYTWfcSr 2019-06-20 18:42:07 +08:00 via Android
前段整天喜欢叫嚣各种虚的
|
41
tomoya92 2019-06-20 18:45:29 +08:00 via iPhone
|
43
idealhs 2019-06-20 19:40:47 +08:00
面向社会主义编程
|
44
l1nyanm1ng 2019-06-20 19:45:47 +08:00
贵圈真乱
|
45
IsaacYoung 2019-06-20 19:46:44 +08:00 via iPhone
future 有点扯
|
46
Aruforce 2019-06-20 19:50:37 +08:00 via Android
前端娱乐圈? js 娱乐圈?
|
47
FrankHB 2019-06-20 20:36:55 +08:00
smg,我还以为你们前端○已经进化到吃透 call by future 了呢。
|
48
love 2019-06-20 21:23:11 +08:00 1
@sunjourney 没看过就别 bb 了,我用了 react hooks 这么多月,一看 yyx 发的 rfc 就知道相对 react 改进在哪。vue 的 hooks 和 react 的 hooks 差别相当大,react 纯函数式,每次 render 都会运行一次函数,导致一些反直觉问题,要用 useCallback/useRef 之类的绕过,用 useEffect 也要很小心。而 vue 根本不是函数式,只运行一次就把组件状态全部打在闭包里,运行模型相当直觉,心智负担减少很多。
|
49
natuka 2019-06-21 08:43:58 +08:00
相比之下创新比较困难,在原有的基础上进行改进,这个与前者相比容易些。
|
50
ldehai 2019-06-21 09:15:21 +08:00
别的不说,Vue 的文档写的确实不错
|