Vue3 还是 React？

你会 Vue 的话基本的 html、css、js 能力都有了，学 react 不困难的，Vue3 迁移的坑太多了。以前我维护 vue2.x 项目的时候都很痛苦，一个小版本升级都能 n 多问题，比如 eslint、ts 的支持，后来果断迁移到 react 了。

react 大版本升级都没问题，我们从 react16.x 一路升级到 17 都没什么问题，工具链也一样。但是 Vue 升级周边也得升级

老项目升级 Vue3 还是要谨慎。。。 能切换到 react 是最好的，工作量不少，react 基本就靠的 js 语法，写起来自由。

纯粹的 html、js、css 构建网站的传统做法已经被 template/jsx 替代了，jQuery 时代的做法已经不适合使用了，虽然现在 jQuery 现存市场还很大（from）：

不过新项目的采用 jQuery 已经很少了（from）：

Vue 和 React 最大的区别就是 template/jsx，proxy/immutable。

template/jsx 本质上都是语法糖，template 的语法糖是 v-if 、v-for 这些，而且 Vue 中文文档写的好，对于新手入门友好，但是由于 IDE 的支持、ts 支持问题会导致维护困难，jsx 也是 js 上加的语法糖，但只有一个，无需太多记忆，学起来就像学 js 语法，比模板语法自由许多，react 相比 vue 有许多优点：

• 完整的 js 功能用来构建视图 UI（Vue template 中无法注入一些复杂逻辑）
• 直接引用当前 js 作用域变量（jsx 中可以直接使用 import 进来的东西，vue 不行）
• typescript 支持和 IDE 支持好，开发友好，重构方便（这个说句良心话，ms 当初搞 ts 是不支持 jsx 的，但是社区呼声太大才支持的 tsx，维护也是 ms，vue 就没那么幸运了，只能尤大拉个小团队维护 template 的 ts 支持，所以很难做的完善）
• 调试方便：jsx 调试可以直接定位到某一行代码错误，Vue 不行，只能自己摸头找找 bug。

性能 Vue 确实好一点，但是这一点用户不会有明显感知（差距太小），反而可维护性和重构升级是一个项目考虑的关键，毕竟大家都不希望以后接手的项目是一坨屎山

Vue 和 React 都有优缺点，Vue 打包体积和性能略好，但 typescript 支持一言难尽，也就注定了只要项目规模稍微大一点就不可能用 Vue。

Vue2 的 Object 写法用 as 关键字去支持 Typescript 本来就很不好，比如官方的例子：

import Vue, { PropType } from 'vue'

interface ComplexMessage {
  title: string,
  okMessage: string,
  cancelMessage: string
}
const Component = Vue.extend({
  props: {
    name: String,
    success: { type: String },
    callback: {
      type: Function as PropType<() => void>
    },
    message: {
      type: Object as PropType<ComplexMessage>,
      required: true,
      validator (message: ComplexMessage) {
        return !!message.title;
      }
    }
  }
})

as 是类型断言，通常在编译器无法正确推断类型的时候才使用，常用在 js 项目往 ts 项目迁移，比如如果你这么写会报错：

const foo = {};
foo.bar = 123; // Error: 'bar' 属性不存在于 ‘{}’
foo.bas = 'hello'; // Error: 'bas' 属性不存在于 '{}'

需要改成：

interface Foo {
  bar: number;
  bas: string;
}

const foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hello';

实现 js 项目像 ts 项目迁移，或者 ts 官方的例子：

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

也可以写成（这样写更好）：

const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");

as 语法应该少用或者不用的，不能作为主流写法。