blog
blog copied to clipboard
coppyC
[2019-06-27] vue 3.0 前瞻: 这样的vue你还会用吗?
前言
最近总是看到Evan You在github上活动很多, 然后收到这个
之前也看过, 不过以为是vue的拓展库, 就没怎么了解
今天仔细看了一下, 发现是vue3.0 的劲爆新内容, 目前这个库是为 2.x 准备的, 等到时候 3.0 一发布,就可以无缝切换过去。不得不说, vue还真是为人民群众着想啊, 既能尝鲜, 又不会断后路。
然后又从文中顺手过去 Evan You 的知乎专栏。
https://zhuanlan.zhihu.com/p/68477600
大家可以过去看看, 我在这里说一下感受。
3.0 改动
3.0 除了一些性能提升, 使用 ts, Proxy 重写这些不太会影响 2.x 开发者开发体验的功能外, 最重要的就是引入新的钩子 setup
先来一段代码看看
import { value, computed, watch, onMounted } from 'vue'
const App = {
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
}
}
}
嗯, 一切还是那么熟悉, 你看这 computed，这watch，这mounted，这data，噫? 好像有点不对劲。
这data怎么变成了value? 还要用 .value 还访问，还有这mounted怎么还要加个 on，再仔细看，所有的东西都是在 setup 中，而且用起来也和 2.x 的用法相去甚远。这就是之前vue3.0偷跑消息的 「vue hooks」
vue hooks
是的，之前他们说的 vue hooks 就是这个，而为什么叫 vue hooks呢，因为这个灵感来源于 React hooks ，原话是这么说的
Function-based API 受 React Hooks 的启发，提供了一个全新的逻辑复用方案，且不存在上述问题。
可以说vue3.0首先要感谢react，react是一个开创性的框架，vue的很多灵感源于react，然后还要感谢vue的团队，vue 提供了很多react没有的特性，很方便开发者，而且 hooks 也结合了vue的特色（watch 等），并不是照搬 react
类型推导
这一块主要还是为了 typescript，vue一直在努力提升结 typescript 的支持，对typescript 的支持无非就是提升 typescript 时的代码提示，说实话，我觉得vue在typescript的还有很长的路要走，主要是这么几个原因:
- vue 的使用者几乎全是 js 玩家
- vue 推荐使用的是模版引擎来渲染html，而不是jsx。这里并不是说jsx多好多好，模版引擎多不好，而是 ts 支持jsx，而不是支持模版引擎，所有在jsx中提示很好，想在模版引擎有正确提示，则需要vue的团队额外下功夫，但是到现在 vetur 在模版中对变量的提示似乎没有很大的变化。虽说vue也可以使用jsx，但是如果使用jsx，还有什么理由不用react 呢，这个vue的jsx地位就有一点尴尬，感觉像是替代品，而且在2.x版本只能在render钩子中使用。
- vue 对 typescript 的风格一直在改变，从
Vue.extend到 class 装饰器，再到现在3.0的createComponent(同Vue.extend但在 3.0 中它其实是单纯为了类型推导而存在的)，不过还说 " 它的返回类型可以用于 TSX 和 Vetur 的模版自动补全。" 难道说，vetur 模版 会升级? 不管怎么样, 还是期待一下吧。
向下兼容?
看到这里，大家也都看到vue setup() 功能的新特性, 和2.x的很多功能是冲突的, 新 API 的引入实际上会让相当一部分的旧选项长远来说变得没有必要。
所以vue在未来也将会提供 2 个vue3.0的版本，
- 兼容版本: 同时支持新 API 和 2.x 的所有选项
- 标准版本：只支持新 API 和部分 2.x 选项。
有哪些选项在标准版本是没有的呢?
- data（由 setup() + value) + state) 取代）
- computed（由 computed 取代）
- methods（ 由 setup() 中声明的函数取代）
- watch （由 watch() 取代）
- provide/inject（由 provide() 和 inject() 取代）
- mixins （由组合函数取代）
- extends （由组合函数取代）
- 所有的生命周期选项 （由 onXXX 函数取代）
我来说一下这个问题，也就是说vue官方心中的3.0版本是标准版本，兼容版本仅仅是为了2.x用户的迁移，可能不会长期支持。而且很严重的是，这种风格的vue，我相信很多人是 hold 不住的，不好上手。我经常向新手推荐vue，就是因为他强大，而且容易上手，但这种函数api可能就对新手不太友好。这样下来，不用hooks的人用3.0的意义也就不大，vue的社区可能会分裂，一种是 2.x，一种是3.x，像 React 一样，组件流派和hooks真香党，但和react不同的是，vue的社区不如react强大，vue的核心插件都是官方维护，这让使用vue的人技术栈都差不多，同个技术栈也好维护，但可能也因为这样，导致社区不活跃（官方做的太多，社区就不活跃，像angular，功能做得太完善，社区都没东西好做了，当然也有集成太多不好拓展的缘故吧）。说实话，我认为vue的社区经不起折腾，不活跃是一个点，另一个点是目前所有的社区组件都基于2.x，到时候3.x是要重写呢，还是用兼容版本让3.x失去意义呢?
你问我react的社区怎么就不怕 hooks 提案分割社区?
我认为react的社区很活跃，而且本来就百si花fen齐wu放lie，就当一个全局状态管理就有三种流行方案 redux, mobx, rxjs，不像vue一个vuex由官方维护，所以react也不介意再分裂一次社区。也就是这种状态，让两个不同react技术栈的人来维护同一本代码十分痛苦。怎么说呢? 各有千秋吧。
点题
最后，再问一句，
这样的 vue， 你还会用吗?
你是选择2.x还是3.0呢?
真香警告！！
顶一下楼主
Vue3还是持观望态度,社区UI库,目前似乎只有antd for vue 出了一个beta版本支持Vue3
element-ui官方不维护了,多个社区版本还在紧锣密鼓的折腾中...
2.x的老项目迁移成本太大了,新项目会考虑上Vue3
