复用那些事（Vue 版）

这期讲讲 vue 开发中常用到的一些方法复用小技巧。

Plugins

插件开发其实就是给 Vue 原型链添加方法以便全局调用，vue 全家桶里的 vue-i18n（this.$t('...')）、vue-router（this.$router(...)）、vuex（this.$store）等等走的就是这个路线。我们也可以写自定义插件，见Writing a Plugin，但是效果很差！想想编程课教给我们的常识：绝大多数全局变量是有害的。且不说传统意义上的性能、可维护性这类问题；开发后期你会安装许许多多的三方插件，这些插件提供商往往用词很单调，极容易遇到命名冲突。假如你早早就把某个全局变量的坑给占了，之后非得用三方插件的时候，命名冲突的代价就太大了。我自己也给项目添加过插件，挺后悔的；开发人员应付全家桶里的方法已经够累了，还要顾及我的一个奇怪全局变量；唉，还是不要为难大家了。

Import module

导入 JS 模块是另一种朴素的解决方案。下面是我从自己所属项目 repo 里摘抄过来的代码，太糟糕了！

// Button.vue
import {fetch} from '~/utils/fetch.js'

export default {
  name: 'Button',
  methods: {
    fetch,
  }
};

为什么糟糕？我先给个常见的面试题：CommonJS 和 ES6 module 里的 this 有啥区别？解答如下：

CommonJS this 指向当前模块，ES6 this 指向 undefined

这是常识！不要做一些魔改常识的事！如上代码将 fetch 方法注册到了 VUE methods 之中；运行时 fetch 里的 this 强行指向了 vue 实例，直接污染了上下文。再次强调：不要做一些魔改常识的事！即便你想用 Import module，也不要直接注册到 methods 里，至少得保持正常调用：

// Button.vue
import {fetch} from '~/utils/fetch.js'

export default {
  name: 'Button',
  methods: {
    fetch () {
      return fetch();
    }
  }
};

Mixins

上文提到 JS 模块导入是一种朴素的解决方案，换个说法其实就是所谓的“野路子”。官方有标准方案，叫mixin（混入）。

export const myMixin = {
  data(){ ... },
  created () { ... },
  methods: {
    fetch() {
      console.log('My mixin!')
    }
  }
}

混入就是自己写一个包含任意 vue 选项方法的 JS 对象，并将其注册到常规 Vue 组件的 mixins 钩子里。Mixin 的方法将在运行时合并到 vue 对象中。

// Button.vue
import {myMixin} from '~/mixin/fetch.js'

export default {
  name: 'Button',
  mixins: [myMixin],
  mounted(){
    this.fetch();
  }
};

混入最早也是来自于 React 社区，但是 React 官方很快就把它标记成了有害的😅。理由很简单：你完全看不出 minxin 给组件混入了多少东西；还有，mixin 和组件方法、mixin 之间常出现命名冲突；此外，开发中很直观的感受就是——如上——仅仅打开 Button.vue 文件，IDE 无法帮助跳转到 this.fetch() 的定义出处，可用性很差。

provide / inject

除了混入外，官方还给了一个不推荐的方案叫provide / inject，又称依赖倒置（和 Spring 里的 DI 差距有点大）。基本思想就是在祖先结点 provide 一个方法，后代结点在 inject 钩子里注入方法名即可使用。有人还将provide / inject比作 React 里的 Context API。

const Ancestor = {
  provide: [foo],
}

const Descendant  = {
  inject: ['foo'],
  created () {
    this.foo();
  }
}

现实很残酷，开发中基本没人去用它；官网里写不推荐是有原因的：前后代组件强耦合，后代组件必须包在某些特定组件下才能使用，易用性就太差了；此外，还是那个老问题，inject 里的方法不支持 IDE 静态检测，开发时很难受。

HOC

HOC（高阶组件）又是一款民间强行移植过来的 React 方案，我曾经写过一篇文章（《Vue 高阶组件》）介绍 HOC，这里不展开了，有兴趣的朋友可以去看看。HOC 通过继承或委任，为不同的组件添加公共方法，实现代码复用。但是 HOC 移植到 Vue 有点哗众取宠的味道，亲测比 mixin 还难用：子组件的方法是运行时动态加入的，如下代码中 this.fetch() 简直迷之来源，肉眼看去毫无线索。

// Button.vue
export default {
  name: 'Button',
  mounted(){
    this.fetch();
  }
};

Slot-scope

作用域插槽是 vue 2.6 推出的新功能；民间很快就把这个新 feature 应用到了实践中——我也写过文章（《Vue renderless 组件》）介绍相关内容。简单来说就是写一个包含特定业务逻辑的非渲染组件（如下<Counter>）；通过 v-slot 的形式暴露公共方法或对象；并将这些方法或对象分享给组件内的插槽元素使用。

<template>
  <Counter v-slot="{ count, increment }">
     <span>{{ count }}</span>
    <button @click="increment">Increment</button>
  </Counter>
</template>

作用域插槽是目前为止 vue2 里最优秀的解决方案：我们可以确切地得知可访问的属性与方法，不用再“猜测”来源；slot-scope 还得到了 vscode 插件的支持，这个易用性就提高了很多。不过，缺点也是有的：就是这一招只能在 template 里用，可惜了。

Composition API

最后再介绍一下 vue3 新 feature——Composition API。正所谓“天下文章一大抄”，Composition API 现象级“借鉴”了 React Hooks。Vue3 给 vue 组件增加了一个setup函数；这个函数用于初始化模板里的属性和方法，包括所有的响应式属性、计算属性、观察者和生命周期钩子等等。Setup 内容比较多，暂时不展开了，我们先是把目光集中到本期主题上——如何复用代码。

如下所示，我简单梳理一下 Composition API 的使用方法：

将业务相关的逻辑封装在 userCounter.js 文件里
vue 组件再通过 ES module 的形式引入 userCounter.js
setup 函数中得到组件所需的 public 属性和方法
最后通过 setup return 的形式将上述属性和方法注册到模版中

<template>
  <span>{{ count }}</span>
  <button @click="increment">Increment</button>
</template>

<script>
import useCounter from '~/use/userCounter.js';

export default {
  setup () {
    const { count, increment } = useCounter();
    return { count, increment };
  }
}
</script>

大家可以回看一下前面方案的一些缺陷，Composition API 几乎解决了所有问题：

通过 ES module 得到属性和方法，确切地指向了定义文件
注入的方法不会污染上下文
不需要添加全局变量
不会得到不明所以的方法混入
不受模板和组件范围的限制
若使用 typescript，编辑器还可以帮助我们进行类型检查和建议

Composition API 是一种更新的逻辑重用和代码组织方法。虽然 vue3 还没正式发布，相关三方库支持 Composition API 还有一段时间；但是看看隔壁 React 社区，大量的三方库已经完成了 React Hooks 重构。我们可以设想一下以后 vuex 的使用方法：

// Vue3
setup() {
  const { commit, state } = useStore();
  const count = state.count;
  const increment = () => commit('increment', 1);
  return { increment, count }
}

再对比一下 vue2 里的 vuex 是怎么污染 Vue 原型链的，以及使用一些不明所以的mapper。代码可维护性一目了然。

// Vue2
methods: {
  increment() {
    this.$store.commit('increment', 1);
  }
  ...mapState({
    count: 'count',
  }),
}

小结

这期复习了一下 vue 开发中常用的几种代码复用手段。内容狠简单，我觉得 vue 前端应该全部掌握，并积极使用更先进的实现方案。

几年前，我有幸从某传统大泥团框架中跳脱出来，启动了一个 vue 项目。当时真心觉得“VueJs 的天是明亮的天……”，以为找到了前端银弹。但是好景不长，新项目很快也成了大泥团。原因很多也很无奈，怎么说呢，技术发展的趋势总体来说是积极向上的，比如 Vue 项目的下限自然高于 JSP；但是目前来说，所有框架的下限依旧处于“垃圾代码”的范畴中。因此，有效的技术管理才是项目“不至于过烂”的保障。上面提到的小技巧也许能在一人一时一地发挥作用，但是期望提升产品整体质量，负责人可能还是需要花更多心思的。