vue 内部this变了 引入js_learn

上一篇文章，写了如何使用element-ui完成布局。首先，我们通过import语句将element-ui完整的引入。然后使用全局方法Vue.use()使用插件。Vue.use方法会自动阻止多次注册相同的插件，同一个插件只会注册一次。

前端的世界里，我们能找到各种功能的js文件。这些js文件在自己需要完成的功能上都做的很好。典型的一些插件如:js.cookie.js：封装cookie操作的js

axios：vue推荐使用的AJAX框架[Promise based HTTP client for the browser and node.js]

…

开发项目时，我们要避免重复造轮子，那么如何将这些js文件集成到我们的项目里使用呢？

方式一：插件

我们先从最熟悉的方式插件方式开始，也就是上一篇中提到的element-ui的引入方式。

这里我们需要注意的是，element-ui是其作为Vue的插件开发的。所以，我们能够在import后，直接使用Vue.use的方式引入。

而对于其他的js库，如axios，如果要以插件的方式引入，那么我们需要做一次小小转换——将axios制作成Vue的插件。

这是Vue开发插件的官网文档，大家在可以点进去先学习一下。

封装axios为插件

首先，我们需要创建一个js文件，要引入axios，那这里以axios为例。我们在项目里创建一个文件，并命名为axios.js。

查看官网的开发插件的文档，我们可以知道，Vue.js插件有一个公开方法install。这个方法的第一个参数是Vue构造器，第二个参数是一个可选的参数。

我们可以通过以下的方式将库添加到Vue的原型对象上：1

2

3

4

5

6

7import axios from 'axios'

export default {

install: function(Vue){

Object.defineProperty(Vue.prototype, '$axios', { value: axios})

}

}

接下来，我们在main.js中可以像element-ui一样的方式引入到整个项目中。1

2

3import axiosPlugin from './axios.js'

Vue.use(axiosPlugin)

引入之后，我们只需要在项目里通过this.$axios就可以使用了。

插件参数设置

前面我们提到intall方法，有第二个可选的参数。简单说，你们可能并不想使用$axios这个名字调用。那么就可以利用第二个参数来修改它。

我们创建的axios.js文件修改如下：1

2

3

4

5

6

7import axios from 'axios'

export defaut {

install: function (Vue, name = '$axios'){

Object.defineProperty(Vue.prototype, name, { value: axios })

}

}

在main.js引用的时候如下：1

2

3import axiosPlugin from './axios.js'

Vue.use(axiosPlugin, '$myAxios')

这样，你就可以使用this.$myAxios调用了。

方式二：将库变成Vue的原型对象属性

方法二比方法一要简单一些。在main.js中，只需要按照下面代码引入即可(还是以axios为例)：1

2

3import axios from 'axios'

Object.defineProperty(Vue.prototype, '$axios', 'axios')

因为所有的组件都会继承Vue原型对象上的方法，因此，这些方法在任何组件里都可以通过this.$axios访问到。

原理

Object.defineProperty

我们可以使用下面的方式来定义属性：1Vue.prototype.$axios = axios

这样做也能够达到目的。但是Object.defineProperty允许我们用属性描述器来定义我们的属性。我们可以定义属性是否可写、可枚举或可配置。通常，我们并不需要这么复杂的方式来赋值属性。但这里使用Object.defineProperty有个好处：用属性描述器定义的属性默认是只读的。这可以防止一些经验不高的开发者犯些低级错误：1

2this.$axios = 'assign some random thing to theinstancemethod'

this.$axios.get('/') // TypeError: this.$axios.get isnota function

使用Object.defineProperty能够保护引入的库不被重新赋值。如果尝试重写，程序会抛出“TypeError: Cannot assign to read only property”的错误。

$

$符号，我们用$开头的属性存放引入的库。这种做法不是强制的，只是为了提醒这些属性是公有的。你可以在任何地方使用。反之，某些属性只能在Vue内部使用。

this

我们可以使用this.$libraryname来访问引入的库。但是，我们需要保证this指针指向的是Vue实例。通常，在回调函数中直接使用this，this并不指向Vue实例。

当然，可以使用箭头函数来解决回调this指向不对的问题。也可以在回调函数前，定义let self = this，在回调函数中使用self也可以解决这个问题。

小结

这篇文章中，我们学习了在Vue中引入其他js库的方式。这样，我们就可以使用丰富的js库来完成我们的项目了。下一篇，将要写Vue里的通信方式，学习组件之间是如何通信的。