如何Vue.js中使用第三方库

谁践踏了优雅 2022-09-02 11:34 162阅读 0赞

在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦.

本文将介绍一些在 Vue.js 中使用第三方库的方式.

希望能够帮助大家，另外小编谢谢大家一如既往的支持，欢迎大家一起和群里的小伙伴一起学习，交流，群里面每天都有分享初学者的笔记资料，视频。[点击进入暗号：知乎][Link 1]

## 全局变量 ##

在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 window 对象上:

`entry.js`

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>window._ = require(</code><code>'lodash'</code><code>);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

`MyComponent.vue`

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>export </code><code>default</code> <code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>created() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(_.isEmpty() ? </code><code>'Lodash everywhere!'</code> <code>: </code><code>'Uh oh..'</code><code>);</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这种方式不适合于服务端渲染, 因为服务端没有 window 对象, 是 undefined, 当试图去访问属性时会报错.

## 在每个文件中引入 ##

另一个简单的方式是在每一个需要该库的文件中导入:  
`MyComponent.vue`

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import _ from </code><code>'lodash'</code><code>;</code></p> <p></p> <p><code>export </code><code>default</code> <code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>created() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(_.isEmpty() ? </code><code>'Lodash is available here!'</code> <code>: </code><code>'Uh oh..'</code><code>);</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这种方式是允许的, 但是比较繁琐, 并且带来的问题是: 你必须记住在哪些文件引用了该库, 如果项目不再依赖这个库时, 得去找到每一个引用该库的文件并删除该库的引用. 如果构建工具没设置正确, 可能导致该库的多份拷贝被引用.

## 优雅的方式 ##

在 Vuejs 项目中使用 JavaScript 库的一个优雅方式是讲其代理到 Vue 的原型对象上去. 按照这种方式, 我们引入 Moment 库:  
`entry.js`

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import moment from </code><code>'moment'</code><code>;</code></p> <p><code>Object.defineProperty(Vue.prototype, </code><code>'$moment'</code><code>, { value: moment });</code></p> </td> 
  </tr> 
 </tbody> 
</table>

由于所有的组件都会从 Vue 的原型对象上继承它们的方法, 因此在所有组件/实例中都可以通过 `this.$moment:` 的方式访问 Moment 而不需要定义全局变量或者手动的引入.

`MyNewComponent.vue`

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>export </code><code>default</code> <code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>created() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'The time is '</code> <code>. </code><code>this</code><code>.$moment().format(</code><code>"HH:mm"</code><code>));</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

接下来就了解下这种方式的工作原理.

## Object.defineProperty ##

一般而言, 可以按照下面的方式来给对象设置属性:

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>Vue.prototype.$moment = moment;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

可以这样做, 但是 Object.defineProperty 允许我们通过一个 descriptor 来定义属性. Descriptor 运行我们去设置对象属性的一些底层(low-level)细节, 如是否允许属性可写? 是否允许属性在 for 循环中被遍历.

通常, 我们不会为此感到困扰, 因为大部分时候, 对于属性赋值, 我们不需要考虑这样的细节. 但这有一个明显的优点: 通过 descriptor 创建的属性默认是只读的.

这就意味着, 一些处于迷糊状态的(coffee-deprived)开发者不能在组件内去做一些很愚蠢的事情, 就像这样:

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>this</code><code>.$http = </code><code>'Assign some random thing to the instance method'</code><code>;</code></p> <p><code>this</code><code>.$http.get(</code><code>'/'</code><code>); </code><code>// TypeError: this.$http.get is not a function</code></p> </td> 
  </tr> 
 </tbody> 
</table>

此外, 试图给只读实例的方法重新赋值会得到 TypeError: Cannot assign to read only property 的错误.

**$**  
你可能会注意到, 代理第三库的属性会有一个 $ 前缀, 也可能看到其它类似 $refs, $on, $mount 的属性和方式, 它们也有这个前缀.

这个不是强制要求, 给属性添加 $ 前缀是提供那些处于迷糊状态(coffee-deprived)的开发者这是一个公开的 API, 和 Vuejs 的一些内部属性和方法区分开来.

**this**  
你还可能注意到, 在组件内是通过 this.libraryName 的方式来使用第三方库的, 当你知道它是一个实例方法时就不会感到意外了. 但与全局变量不同, 通过 this 来使用第三方库时, 必须确保 this 处于正确的作用域. 在回调方法中 this 的作用域会有不同, 但箭头式回调风格能保证 this 的作用域是正确的:

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>this</code><code>.$http.get(</code><code>'/'</code><code>).then(res =&gt; { </code></p> <p><code>&nbsp;&nbsp;</code><code>if</code> <code>(res.status !== 200) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.$http.get(</code><code>'/'</code><code>) </code><code>// etc</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// Only works in a fat arrow callback.</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>});</code></p> </td> 
  </tr> 
 </tbody> 
</table>

## 插件 ##

如果你想在多个项目中使用同一个库, 或者想将其分享给其他人, 可以将其写成一个插件:

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import MyLibraryPlugin from </code><code>'my-library-plugin'</code><code>;</code></p> <p><code>Vue.use(MyLibraryPlugin);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在应用的入口引入插件之后, 就可以在任何一个组件内像使用 Vue Router, Vuex 一样使用你定义的库了.

### 写一个插件 ###

首先, 创建一个文件用于编写自己的插件. 在示例中, 我会将 Axios 作为插件添加到项目中, 因而我给文件起名为 axios.js. 其次, 插件要对外暴露一个 install 方法, 该方法的第一个参数是 Vue 的构造函数:

`axios.js`

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>export </code><code>default</code> <code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>install: </code><code>function</code><code>(Vue) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// Do stuff</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

最后, 利用 Vue 的实例方法 use 将插件添加到项目中:  
`entry.js`

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import AxiosPlugin from </code><code>'./axios.js'</code><code>;</code></p> <p><code>Vue.use(AxiosPlugin);</code></p> <p></p> <p><code>new</code> <code>Vue({ </code></p> <p><code>&nbsp;&nbsp;</code><code>created() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>this</code><code>.$http ? </code><code>'Axios works!'</code> <code>: </code><code>'Uh oh..'</code><code>);</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>})</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### 彩蛋: 插件的可选参数 ###

插件的 `install` 方法可以接受可选参数. 一些开发可能不喜欢将 Axios 实例命名为 $http, 因为这是 Vue Resource 提供的一个通用名字. 因而可以提供一个可选的参数允许他们随意命名:

`axios.js`

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import axios from </code><code>'axios'</code><code>;</code></p> <p></p> <p><code>export </code><code>default</code> <code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>install: </code><code>function</code><code>(Vue, name = </code><code>'$http'</code><code>) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Object.defineProperty(Vue.prototype, name, { value: axios });</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

`entry.js`

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import AxiosPlugin from </code><code>'./axios.js'</code><code>;</code></p> <p><code>Vue.use(AxiosPlugin, </code><code>'$axios'</code><code>);</code></p> <p></p> <p><code>new</code> <code>Vue({ </code></p> <p><code>&nbsp;&nbsp;</code><code>created() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>this</code><code>.$axios ? </code><code>'Axios works!'</code> <code>: </code><code>'Uh oh..'</code><code>);</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>})</code></p> </td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: https://link.zhihu.com/?target=https%3A//jq.qq.com/%3F_wv%3D1027%26k%3DnKNuXAFr