Vue经验点滴

在使用Vue开发项目的过程中遇到了很多问题，其中有一些是特别值得整理出来以备后用的。

所以我觉得值得记录下来的知识点都列在这篇文章中，希望对你也能有所帮助。

如何在Vue中创建 Web Worker线程

在javascript中创建 Worker线程非常容易，你可以随便在网上找到一篇详解文章。

同样的方法在Vue中就不好用了。下面是在Vue中创建 Web Worker的正确做法

let myworker = new Worker(new URL('./workers/worker', import.meta.url), {type: 'module'})

myworker.onmessage = (event) => {
    ...
}

上面这段代码中有两上点需要注意：

• 创建worker线程时，一定要用 new URL(...)指明woker.js文件的位置，否则无法成功创建woker线程。
• onmessage 函数最好使用箭头函数，否则如果在其内部使用this指针时，该this指定指向的不是worker调用者的上下文。

如何在Vue中引入一个纯 javascript 库

在Vue中引入一个纯的javascript库需要执行以下几个步骤：

• 将javascript库放到你的项目中的某个目录下。比如放在 src文件夹的util目录下。
• 在使用该javascript的Vue页面中引入该库

  ...
  import xxx from '@/utils/xxx.js'
  ...

  其中 @代表 src目录。

它是在jsconfig.json中配置的，如下：

{
...
"paths": {
    "@/*": [
        "src/*"
    ]
}
...
}

此外 import 引入的是一个对象还是一个方法也要注意。
如果写成

import xxx from ....

表示 xxx 是一个对象，使用它里边的方法时，通常这样写：

...
xxx.someFunc(...)
...

如果只是想引入库中的某个方法，要写成这样：

import { xxx } from ...

上面表示的是从某个库中引入一个对象的xxx方法，其中{}表示一个对象。

• 当将javascript库引入到Vue之后，很有可能需要对该库做一些修改，比如在库中函数的前面加上export关键字，表示该函数可以被导出，供外面使用。