小程序

有小程序开发经验的同学都知道，小程序原生开发是很蛋疼的。如下这些小程序开发框架都是基于Vue或React的二次封装，简化小程序开发：

taro（React技术栈，推荐使用）
wepy（Vue技术栈，强烈不推荐使用）
uni-app（Vue技术栈，可以使用）

vue的一些周边库和Vue强绑定，而不是一个独立的js库的形式存在。导致代码难以理解，相关的Bug，问题也带到了二次开发的框架中。

这种强依赖导致的问题会给以后项目升级，迁移带来很多问题。比如vuex作为Vue的官方推荐的状态管理方案，只能在Vue的上面使用，不能在react上面使用。Redux的状态管理在react上用的多，这个却能用在Vue之上。类似的问题很多，你会发现React周边的东西可以用于Vue，Vue的东西不能用在React上。

如果你觉得这个问题不严重，当你把Vue代码迁移到小程序wepy框架时发现，wepy不支持Vuex（bug异常多），状态管理只能用redux，欲哭无泪。同样的问题，如果你用的是React相关技术栈，react迁移到Taro小程序框架异常简单，而且可以一次性生成微信小程序，支付宝小程序，字节跳动小程序等。

模板语法 VS JSX

Vue的单文件组件，使用<template>，<script>对代码进行分割，直接导致的问题就是上下文丢失。举个例子，你封装了一些常用的函数，在Vue文件中import进来。你这个函数能在template中直接使用吗？

// filter.js 文件
export function isNickname(value) {
  return /^[\s\S]{1,50}$/.test(value);
}

<template>
  <div>
    {{ a }}
    <button @click="a = isNickname('abc')">Test</button>
    {{ b }}
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import {isNickname} from '../fn/filter';

export default {
  name: 'HelloWorld',
  props: { msg: String },
  data: () => {
    return {
      a: false,
      b: 1,
      c: 1,
    }
  },
  methods: {
    isNickname1() {
      return isNickname('abc');
    }
  }
}
</script>

<style scoped></style>

上述代码会报错：

[Vue warn]: Property or method "isNickname" is not defined on the instance but referenced during render

所以你只能将方法定义在methods中，再引用进来。模板语法并不知道你有isNickname这个函数，简单的操作多了3行代码。

模板语法不是图灵完备的，必须转换为js代码（render 函数），放在component语境下才行。类似的例子还有很多，你会发现，你写的代码与Vue强绑定了，哪天Vue核心库崩了，你代码也崩了。Vue 核心库升级了，周边依赖库也得跟着升级。

模板分割

好的代码组织能将常变与不变的部分进行分割解耦

Vue 的模板严重限制了这一点。举个例子，前端有个下拉菜单，功能不断增加，而且对于不同的人要显示不同菜单（权限管理）。在 Vue 中，为了实现 html 代码（绑定在 template 中）的分割，你只能再搞一个组件。在 React 中，可以直接这样写：

`1`	`const menu = <div>abc<div>;`

可单独做一个组件（低开销函数组件），也可当做变量，放在当前代码中。相对灵活很多。

JSX 手写 render 渲染函数自带下面的优势：

完整的 js 功能来构建视图页面，可以使用临时变量、js 自带的控制流、以及直接引用当前 js 作用域中的值
开发工具对 jsx 的支持比现有 vue 模板先进（linting、typescript、编译器自动补全）

可测试性

Vue需要新建一个.vue文件

<template>
  <div>
    {{hello}}
  </div>
</template>
<script>
export default {
  name: 'Test',
  props: {
    hello: String
  },
  created() {
    console.log(this.hello);
  }
}
</script>
<style scoped></style>

React操作都在jsx环境下执行，放的位置随意，写法比模板更容易测试：

function Test(props: { hello: string }) {
  console.log(props);
  return <div>{props.hello}</div>
}

Vue与React测试成本的差异明显。React手起刀落，一个函数就搞定了，要测试什么内容清晰可见。

万恶之源 this 指针

写过 React 函数组件的同学都知道，相比 class 组件，函数组件少了 this 指针，代码简化、清晰不少。而这个问题在 Vue 上更为严重。全局 this ！

有人觉得这是优点，方便使用。等你代码量上去了再来说话。

当项目多人协作的时候，或者承接某某祖传代码，你不全局搜索，你都不知道 this 上面挂了羊头还是狗肉。

this.ajax
this.http
this.message
this.wtf…

正如一位网友评论：

那东西就是全局作用域。拿“允许在全局作用域上随便放东西很方便”作为优点的话，和“允许随地大小便会很方便”有什么区别……

写 C 语言的新手都知道全局变量不要随意用，这满天飞的 this，张三读不懂，李四看不懂，IDE 也不懂。而且这是官方推荐写法。

本文发表于 0001-01-01，最后修改于 0001-01-01。

本站永久域名「 jiavvc.top 」，也可搜索「后浪笔记一零二四」找到我。

小程序

模板语法 VS JSX

可测试性

万恶之源 this 指针

推荐阅读