[2019-06-27] vue 3.0 前瞻: 这样的vue你还会用吗?

[coppyC]

前言

最近总是看到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呢?

真香警告！！

[MikuBlog]

这不是让我放弃vue的理由🙃

[weixiaolv]

期待你的下期节目《为什么我从Vue转React了》

[coppyC]

@Tinyjimmy 不用期待了，就是现在 #9

[BoBoooooo]

顶一下楼主

Vue3还是持观望态度,社区UI库,目前似乎只有antd for vue 出了一个beta版本支持Vue3

element-ui官方不维护了,多个社区版本还在紧锣密鼓的折腾中...

2.x的老项目迁移成本太大了,新项目会考虑上Vue3

[coppyC]

饿了么ui居然不维护了，怎么说也是国内第一批vue 的 ui了，怪可惜的。

[jw-12138]

饿了么ui居然不维护了，怎么说也是国内第一批vue 的 ui了，怪可惜的。

可能是攒的issue太多了🌝