Vue如何使用混合Mixins和插件开发详解


Posted in Javascript onFebruary 05, 2020
官网:混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。
个人:混入就是用来对vue组件中的公共部分,包括数据对象、钩子函数、方法等所有选项,进行提取封装,以达到代码的复用,混合用处挺大的,然我们来看看实际用法。

基础用法

// 这是在main.js根文件中使用,在组中使用也是一样
import Vue from 'vue';
var mixin = {
  data() {
    return {
      name: 'www.vipbic.com',
      author: '羊先生'
    }
  },
  created: function() {
    console.log('Website:' + this.name)
  },
  methods: {
    foo: function() {
      console.log('作者:' + this.author)
    },
    conflicting: function() {
      console.log('from mixin')
    }
  }
}

new Vue({
  mixins: [mixin],
  render: h => h(App),
  created() {
    let option = this.$options.doNotInit
    console.log('option:', );
    this.foo()
  }
}).$mount('#app')

// 在组建中使用
<template><div></div></template>
<script>
var mixin = {
  data() {
    return {
      name: 'www.vipbic.com',
      author: '羊先生'
    }
  },
  created: function() {
    console.log('Website:' + this.name)
  },
  methods: {
    foo: function() {
      console.log('作者:' + this.author)
    }
  }
}
export default {
  mixins: [mixin],
  created(){
    this.foo()
  }
}
</script>

效果如下,都一样,可以看出混合mixins中的created高于组件created执行优先级

Vue如何使用混合Mixins和插件开发详解

全局注册

main.js中直接注册

import Vue from 'vue';
var mixin = {
  data() {
    return {
      name: 'www.vipbic.com',
      author: '羊先生'
    }
  },
  created: function() {
    console.log('Website:' + this.name)
  },
  methods: {
    foo: function() {
      console.log('作者:' + this.author)
    }
  }
}

Vue.mixin(mixin)
new Vue({
  render: h => h(App)
}).$mount('#app')

效果如下,我们先不调用,看看控制台是否有打印结果,可以发现我们并未调用,就打印了两次,按照大家常规考虑可能会想到执行一次,是正常的,即初始化一次,但却执行了两次

Vue如何使用混合Mixins和插件开发详解

如何解决执行两次

我在网上看到都是这么做的,都说是从官网上看到的,但是我在官网上并没有看到,不过的确能解决问题

var mixin = {
  data() {
    return {
      name: 'www.vipbic.com',
      author: '羊先生'
    }
  },
  created: function() {
    let option = this.$options.doNotInit;
    console.log(option) // 第一次执行 true 第二次为 undefined
    if (!option) {
    // 可以放置一些你的逻辑,比如一开始就要调用的方法
      console.log('Website:' + this.name)
    }
  },
  methods: {
    foo: function() {
      console.log('作者:' + this.author)
    },
  }
}

Vue.mixin(mixin);
new Vue({
  doNotInit: true, // 添加一个状态
  render: h => h(App),
}).$mount('#app')

效果如下

Vue如何使用混合Mixins和插件开发详解

如何调用

刚上面解释了如何解决调用两次的问题

// main.js
import Vue from 'vue';
var mixin = {
  data() {
    return {
      name: 'www.vipbic.com',
      author: '羊先生'
    }
  },
  created: function() {
    let option = this.$options.doNotInit;
    if (!option) {
      console.log('Website:' + this.name)
    }
  },
  methods: {
    foo: function() {
      console.log('作者:' + this.author)
    },
  }
}

Vue.mixin(mixin);
new Vue({
  doNotInit: true,
  render: h => h(App),
}).$mount('#app')

// 在组件中调用
<script>
export default {
  created(){
    this.foo()
  },
}
</script>

Vue如何使用混合Mixins和插件开发详解

模块化注册

新建单独的mixin.js文件

import Vue from 'vue';
var mixin = {
  data() {
    return {
      name: 'www.vipbic.com',
      author: '羊先生'
    }
  },
  created: function() {
    let option = this.$options.doNotInit;
    if (!option) {
      console.log('Website:' + this.name)
    }
  },
  methods: {
    foo: function() {
      console.log('作者:' + this.author)
    },
    conflicting: function() {
      console.log('from mixin')
    }
  }
}
export default {
  install(Vue) {
    Vue.mixin(mixin)
  }
}
// 在main.js通过use注册
Vue.use(myMixin);
new Vue({
  doNotInit: true,
  render: h => h(App),
}).$mount('#app')
// 在组件中调用
<script>
export default {
  created(){
    this.foo()
  },
}
</script>

效果与main.js注册方式一样

Vue如何使用混合Mixins和插件开发详解

开发插件

上面提到use,也讲解一下use相关的知识,而且在开发中也常常看到如Vue.use(VueRouter),Vue.js 在插件开发过程中需要注意是有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象,
插件通常会为Vue添加全局功能。插件的范围没有限制——一般有下面几种:

1、添加全局方法或者属性,如: vue-element]
2、添加全局资源:指令/过滤器/过渡等,如 vue-touch
3、通过全局 mixin方法添加一些组件选项,如: vuex
4、添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
5、一个库,提供自己的 API,同时提供上面提到的一个或多个功能,如 vue-router

let MyPlugin = {}
MyPlugin.install = function (Vue, options) {
 // 1. 添加全局方法或属性
  Vue.prototype.$myMethod = function (options) {
  // 逻辑...
 }

 // 2. 添加全局资源指令
 Vue.directive('my-directive', {
  bind (el, binding, vnode, oldVnode) {
   // 逻辑...
  }
 })

 // 3. 注入组件,也就上面提到的混入,vue非常灵活就看你如何去挖掘它
 Vue.mixin({
  created: function () {
   // 逻辑...
  }
 })
}

添加全局方法或属性

import Vue from 'vue';
//根据install函数规定,第一个传入Vue的实例,第二个参数是一个可选的选项对象,也就是可以传递参数
MyPlugin.install = function(Vue, options) {
  console.log(options) // 打印参数
  Vue.prototype.myName = options.name
  Vue.prototype.myAuthor = function() {
    return options.author
  }
}
Vue.use(MyPlugin, {
  name: 'www.vipbic.com' // 传递参数
  author: '羊先生'
});

new Vue({
  render: h => h(App),
}).$mount('#app')

在组件中调用

<script>
export default {
  created(){
    console.log(this.myName)
    console.log(this.myAuthor())
  },
}
</script>

效果如下

Vue如何使用混合Mixins和插件开发详解

添加全局资源

// 通过vue指令的方式添加 指令可以全局添加还可以在组件中添加
import Vue from 'vue';
let MyPlugin = {}
MyPlugin.install = function(Vue, options) {
  Vue.directive("hello", {
    bind: function(el, bingind, vnode) {
      console.log(options)
      el.style["color"] = bingind.value;
      console.log("1-bind");
    },
    inserted: function() {
      console.log("2-insert");
    },
    update: function() {
      console.log("3-update");
    },
    componentUpdated: function() {
      console.log('4 - componentUpdated');
    },
    unbind: function() {
      console.log('5 - unbind');
    }
  })
}
// 传递参数
Vue.use(MyPlugin, {
  name: 'www.vipbic.com',
  author: '羊先生'
});
new Vue({
  render: h => h(App),
}).$mount('#app')

在组中使用

<template>
  <div>
  <span v-hello="color3">{{message}}</span>
    <button @click="add"> 点击开始加1</button>
    <button @click="jiebang">解绑</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      message:10,
      color3:"red"
    }
  },
  methods:{
    add(){
      this.message++;
    },
    jiebang(){
      this.$destroy(); // 解绑 
    }
  },
}
</script>
<style lang="less" scoped>

</style>

页面效果

Vue如何使用混合Mixins和插件开发详解

分析结果,在分析结果前,我们先来看一下Vue.directive的api,来自官网的解释

el:指令所绑定的元素,可以用来直接操作DOM
binding:一个对象,包含以下属性

  • name:指令名,不包含v-前缀
  • value:指令的绑定值,例如:上面例子中的值就是 red
  • oldValue:指令绑定的前一个值,仅在 update 和componentUpdated 钩子中可用。无论值是否改变都可用
  • expression:字符串形式的指令表达式

arg:传给指令的参数,可选。
modifiers:一个包含修饰符的对象

自定义指令有5个生命周期(也叫作钩子函数)分别是:

bind, inserted, update, componentUpdate, unbind

// 也就是在对应上面的例子中的
bind 只调用一次,指令第一次绑定到元素时候调用,用这个钩子可以定义一个绑定时执行一次的初始化动作。

inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用,不必存在document中)

update: 被绑定与元素所在模板更新时调用,而且无论绑定值是否有变化,通过比较更新前后的绑定值,忽略不必要的模板更新

componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用

unbind: 只调用一次,指令月元素解绑的时候调用图片黄色框的地方,是在组件使用了v-hello指令后所初始化的数据,并且也打印了接受参数,在点击解绑后,在点击开始加1则无效

注入组件

let MyPlugin = {}
MyPlugin.install = function(Vue, options) {
  Vue.mixin({
    data() {
      return {
        name: options.name
      }
    },
    methods: {
      getUser() {
        return options.author
      }
    }
  })
}
Vue.use(MyPlugin, {
  name: 'www.vipbic.com',
  author: '羊先生'
})
new Vue({
  render: h => h(App),
}).$mount('#app')

在组件中使用

export default {
  data(){
    return {
       
    }
  },
  created(){
   //这里name和getUser来自全局注入的
    console.log(this.name)
    console.log(this.getUser())
  }
}

效果

Vue如何使用混合Mixins和插件开发详解

Vue.use 会自动阻止注册相同插件多次,届时只会注册一次该插件

参考文章

web前端开发-混合
Vue.directive指令

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取单选框或复选框值及操作
Dec 18 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
js监听html页面的上下滚动事件方法
Sep 11 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
js canvas实现五子棋小游戏
Jan 22 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 #Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 #Javascript
小程序如何写动态标签的实现方法
Feb 05 #Javascript
vue如何实现动态加载脚本
Feb 05 #Javascript
vue实现图片懒加载的方法分析
Feb 05 #Javascript
Vue组件基础用法详解
Feb 05 #Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 #Javascript
You might like
初级的用php写的采集程序
2007/03/16 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
Python numpy数组转置与轴变换
2019/11/15 Python
python字典的值可以修改吗
2020/06/29 Python
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
暑假实习求职信范文
2013/09/22 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
大二学年个人总结
2015/03/03 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
Python进度条的使用
2021/05/17 Python