文章目录
1. 重点提炼
- 插件
- Vue.use
- 传入一个函数或者一个包含有 install 方法的对象
- 扩展 Vue、Vue实例(组件实例)的功能
- mixin
- Vue.use
2. 引例
其实后面要讲述的路由、状态管理都会用到插件,插件是开发过程中大概率会用到的内容。
插件实际很简单,目的就是为了扩展vue
功能,提供了一种规则的写法去扩展vue
的功能。
组件是Vue
的实例,Vue
其实本质就是构造函数。
我们自己可以给Vue
组件扩展功能(不通过插件,在prototype
下追加)。
2.1 example01-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="fn">按钮</button>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.prototype.getName = function() {
console.log('abcd');
};
let app = new Vue({
el: '#app',
data: {
},
methods: {
fn() {
console.log(this);
}
}
});
</script>
</body>
</html>
参考:https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.52
Branch: branch04commit description:a1.52(example01-1——vue的proptotype下扩展功能)
tag:a1.52
2.2 example01-2
可以直接调用扩展的方法。
let app = new Vue({
el: '#app',
data: {
},
methods: {
fn() {
console.log(this);
this.getName();
}
}
});
参考:https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.53
Branch: branch04commit description:a1.53(example01-2——调用vue的proptotype下扩展功能)
tag:a1.53
以上的扩展比较随性,Vue
推荐如果我们对其进行扩展,最好按照它的规范来,即为给Vue
写插件。
3. 插件
插件通常是用来给 vue
提供扩展功能的一种方式
- 给
Vue
添加属性和方法 - 给
Vue 实例
添加属性和方法 - 添加全局资源:指令、过滤器、组件等
- 添加配置选项
4. 安装插件
类似koa
中的户注册中间件,而这里插件其实就是函数,使用use
方法实际就是调用该函数。
通过全局方法 Vue.use()
使用插件。它需要在调用 new Vue()
启动应用之前完成。
Vue.use(插件);
如果插件是一个对象,必须提供 install
方法。
如果插件是一个函数,它会被作为 install
方法。
install
方法调用时,会将 Vue
作为参数传入。
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
5. 实例
axios
https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js
function http(_Vue, options) {
_Vue.prototype.$http = axios;
}
Vue.use(http);
// or
function http(_Vue, options) {
_Vue.prototype.$http = adaptor.http;
}
Vue.use(http, {
adaptor: axios});
new Vue({
el: '#app',
data: {
},
async created() {
// let rs = await axios({
// method: 'post',
// url: 'https://api.apiopen.top/musicRankings'
// });
// console.log(rs);
let rs = await this.$http({
method: 'post',
url: 'https://api.apiopen.top/musicRankings'
});
console.log(rs);
}
});
修改
prototype
会修改整个Vue
原型链
另外一种方式
function http(_Vue) {
_Vue.mixin({
beforeCreate() {
if ( this.$options.adaptor ) {
this.$http = this.$options.adaptor;
}
if ( this.$options.parent && this.$options.parent.$http ) {
this.$http = this.$options.parent.$http;
}
}
});
}
Vue.use(http);
new Vue({
el: '#app',
adaptor: axios,
components: {
'my-component': myComponent
}
})
6. example02
6.1 example02-1
为vue
写插件封装成一个js文件
vue
提供了一个use
方法,这个有点像之前我们所学的React-Redux
中间件一样。
插件其实就是我们写的一个函数,把函数传进use
方法中(相当于注册插件),它就会执行这个函数,我们在这个函数当中为其扩展功能就行,同时把Vue
当作参数传过去。
\js\me.js
// Vue.use 使用,会执行插件函数,同时把Vue当作参数传过去。
function me(_Vue) {
_Vue.prototype.getName = function() {
console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
}
}
插件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="fn">按钮</button>
</div>
<script src="./js/vue.js"></script>
<script src="./js/me.js"></script>
<script>
Vue.use( me );
let app = new Vue({
el: '#app',
data: {
},
methods: {
fn() {
console.log(this);
this.getName();
}
}
});
</script>
</body>
</html>
参考:https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.54
Branch: branch04commit description:a1.54(example02-1——注册插件)
tag:a1.54
6.2 example02-2
Vue.mixin
注入组件选项
mixin
接受一个对象,该对象会被注入到 vue
实例配置中
组件有一个生命周期是created
,mixin
中的对象也是一个组件配置,我们在其内创建一个created
生命周期,它也会注入到Vue
中,与Vue
的created
生命周期相合并,但并不是覆盖。
即把插件配置对象合并到组件的配置选项当中了。
注意不是覆盖,而是存在多个,而且在这里混合进去的选项是优于组件自己本身的生命周期(插件会先执行)。
因此可以在created
函数中做很多事情,比如在每个插件的created
中增加功能,其优先级比原组件高。
其实后面学到的路由就是利用这种机制进行注册的。
\js\me.js
// Vue.use 使用,会执行插件函数,同时把Vue当作参数传过去。
function me(_Vue) {
_Vue.prototype.getName = function() {
console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
}
// mixin 接受一个对象,该对象会被注入到 vue 实例配置中
Vue.mixin({
created() {
console.log('me-created');
}
});
}
插件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="fn">按钮</button>
</div>
<script src="./js/vue.js"></script>
<script src="./js/me.js"></script>
<script>
Vue.use( me );
let app = new Vue({
el: '#app',
data: {
},
created() {
console.log('created');
},
methods: {
fn() {
console.log(this);
this.getName();
}
}
});
</script>
</body>
</html>
参考:https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.55
Branch: branch04commit description:a1.55(example02-2——注入组件选项)
tag:a1.55
(后续待补充)