深入浅析Vue中mixin和extend的区别和使用场景


Posted in Javascript onAugust 01, 2019

Vue中有两个较为高级的静态方法mixin和extend,接下来我们来讨论下关于他们各自的原理和使用场景。

Mixin:

原理:

先来看看官网的介绍:

参数:{Object} mixin

用法:

混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。
   Vue.mixin({
    created: function () {
     var myOption = this.$options.myOption
     if (myOption) {
      console.log(myOption)
     }
    }
   })
   
   new Vue({
    myOption: 'hello!'
   })
   // => "hello!"

我们知道,Vue.mixin传递的这个参数对象,在初始化Vue实例的时候会merge到options上,下面是Vue源码中对mixin的操作。

// src\core\global-api\mixin.js
 export function initMixin (Vue: GlobalAPI) {
  Vue.mixin = function (mixin: Object) {
   this.options = mergeOptions(this.options, mixin)
   return this
  }
 }
// src\core\instance\index.js
 function Vue (options) {
   if (process.env.NODE_ENV !== 'production' &&
   !(this instanceof Vue)
   ) {
   warn('Vue is a constructor and should be called with the `new` keyword')
   }
   this._init(options)
 }
 
 initMixin(Vue)
 ...
 
 export default Vue

也就是说,mixin只是对我们在初始化Vue实例时传递的配置对象的一个扩展。

就像上面官网实例写的例子,我们在执行Vue.mixin方法时传递一个配置对象进去,对象里面有个created勾子函数,通过源码我们可以看到这个传递进来的对象最终会和我们在初始化实例也就是new Vue(options)时的这个options合并(通过上面源码中的mergeOptions方法),保存在option上。

使用场景:

当我们需要全局去注入一些methods,filter或者hooks时我们就可以使用mixin来做。 比如我们希望每一个Vue实例都有一个print方法,我们就可以这么做:

Vue.mixin({
    methods: {
      print() {
        console.log(`我是一个通过mixin注入的方法!`)
      }
    }
  })

或者我们想要去监听在什么阶段时什么组件被加载了,被卸载了等等,我们可以这么做:

Vue.mixin({
    mounted() {
      console.log(`${this.$route.name} component mounted!`)
    },
    destroyed() {
      console.log(`${this.$route.name} component destroyed!`)
    }
  })

如果我们并不想给每一个组件实例都混入这些配置options,而只是个别的组件,最好不要使用mixin,它可能会影响到我们组件的性能。

Extend:

原理:

先来看看官网的介绍:

参数:{Object} options

用法:

使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数。

data必须是函数是为了防止各个实例的数据混乱,闭包的应用。

<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
 template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
 data: function () {
  return {
   firstName: 'Walter',
   lastName: 'White',
   alias: 'Heisenberg'
  }
 }
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')

再来看看源码里面关于Vue.extend的实现:

Vue.extend = function (extendOptions: Object): Function {
  extendOptions = extendOptions || {}
  const Super = this
  const SuperId = Super.cid
  const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
  if (cachedCtors[SuperId]) {
   return cachedCtors[SuperId]
  }

  const name = extendOptions.name || Super.options.name
  if (process.env.NODE_ENV !== 'production' && name) {
   validateComponentName(name)
  }

  const Sub = function VueComponent (options) {
   this._init(options)
  }
  Sub.prototype = Object.create(Super.prototype)
  Sub.prototype.constructor = Sub
  Sub.cid = cid++
  Sub.options = mergeOptions(
   Super.options,
   extendOptions
  )
  Sub['super'] = Super

  // For props and computed properties, we define the proxy getters on
  // the Vue instances at extension time, on the extended prototype. This
  // avoids Object.defineProperty calls for each instance created.
  if (Sub.options.props) {
   initProps(Sub)
  }
  if (Sub.options.computed) {
   initComputed(Sub)
  }

  // allow further extension/mixin/plugin usage
  Sub.extend = Super.extend
  Sub.mixin = Super.mixin
  Sub.use = Super.use

  // create asset registers, so extended classes
  // can have their private assets too.
  ASSET_TYPES.forEach(function (type) {
   Sub[type] = Super[type]
  })
  // enable recursive self-lookup
  if (name) {
   Sub.options.components[name] = Sub
  }

  // keep a reference to the super options at extension time.
  // later at instantiation we can check if Super's options have
  // been updated.
  Sub.superOptions = Super.options
  Sub.extendOptions = extendOptions
  Sub.sealedOptions = extend({}, Sub.options)

  // cache constructor
  cachedCtors[SuperId] = Sub
  return Sub
 }
}

首先我们可以看到,extend方法返回的Sub其实是一个构造函数,而且继承自Vue,也就是说extend方法返回的是Vue的一个子类。

Sub.prototype = Object.create(Super.prototype)
  Sub.prototype.constructor = Sub

这两行代码其实就是实现Sub对Vue的继承,源码中有一行是

const Super = this

所以这里的Super指的就是Vue。

Sub.options = mergeOptions(
   Super.options,
   extendOptions
)

我们注意到在extend中也会对传进来的配置option和Vue原来的options做一个合并。

使用场景:

当我们不需要全局去混入一些配置,比如,我们想要获得一个component。我们可以使用Vue.component(),也可以使用Vue.extend()。

const ChildVue = Vue.extend({
  ...options
})

new ChildVue({
  ...options
})

注意extend得到的是一个Vue的子类,也就是构造函数。

区别:

mixin是对Vue类的options进行混入。所有Vue的实例对象都会具备混入进来的配置行为。

extend是产生一个继承自Vue类的子类,只会影响这个子类的实例对象,不会对Vue类本身以及Vue类的实例对象产生影响。

总结

以上所述是小编给大家介绍的Vue中mixin和extend的区别和使用场景,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 #Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 #Javascript
微信小程序组件传值图示过程详解
Jul 31 #Javascript
vue.js实现回到顶部动画效果
Jul 31 #Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 #Javascript
Vue实现回到顶部和底部动画效果
Jul 31 #Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 #Javascript
You might like
PHP访问数据库集群的方法小结
2016/03/14 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
React key值的作用和使用详解
2018/08/23 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
python进阶教程之模块(module)介绍
2014/08/30 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
python学生信息管理系统实现代码
2019/12/17 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
出国导师推荐信
2014/01/16 职场文书
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
优秀学生获奖感言
2014/02/15 职场文书
经营理念标语
2014/06/21 职场文书
教师四风问题整改措施
2014/09/25 职场文书
党的作风建设心得体会
2014/10/22 职场文书
2014年手术室工作总结
2014/11/26 职场文书
英语导游词
2015/02/13 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL