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 相关文章推荐
JavaScript QueryString解析类代码
Jan 17 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
微信小程序入门之绘制时钟
Oct 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
用Zend Encode编写开发PHP程序
2010/02/21 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
详解python中的 is 操作符
2017/12/26 Python
python读取和保存图片5种方法对比
2018/09/12 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
python实现图书借阅系统
2019/02/20 Python
Django中modelform组件实例用法总结
2020/02/10 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
三月学雷锋月活动总结
2014/04/28 职场文书
好听的队名和口号
2014/06/09 职场文书
关于诚信的活动方案
2014/08/18 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
为Java项目添加Redis缓存的方法
2021/05/18 Redis
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js