vue extend和mixin的区别_vue中mixin与extend区别,2024非科班生的前端面试之路

34 阅读3分钟

js基础

1)对js的理解? 2)请说出以下代码输出的值? 3)把以下代码,改写成依次输出0-9 4)如何区分数组对象,普通对象,函数对象 5)面向对象、面向过程 6)面向对象的三大基本特性 7)XML和JSON的区别? 8)Web Worker 和webSocket? 9)Javascript垃圾回收方法? 10)new操作符具体干了什么呢? 11)js延迟加载的方式有哪些? 12)WEB应用从服务器主动推送Data到客户端有那些方式?

js基础.PNG

前16.PNG

开源分享:docs.qq.com/doc/DSmRnRG…

在这里插入图片描述
在这里插入图片描述
提到extend 总是感觉有些熟悉,都是可以共用一些方法和属性这不就是mixin混入吗?其实两者还是有较大差别的,可以类比后端语言的继承和多态,extend类似继承,而mixin类似多态。

vue extend 

vue.extend 返回的是一个 拓展实例构造器 也就是一个预设了部分选项的vue实例构造器。

www.cnblogs.com/xzybk/p/127…
部分理解由此篇博客产出

使用extend之前首先先和混入mixin比较一下

mixin混入源码操作:

import { mergeOptions } from '../util/index'

export function initMixin (Vue: GlobalAPI) {
  Vue.mixin = function (mixin: Object) {
    this.options = mergeOptions(this.options, mixin)
    return this
  }
}

mixin方法知识在初始化实例的时候传递配置对象的一个拓展
利用mergeOptions方法合并options

extend源码部分:
在这里插入图片描述

在这里插入图片描述
最后返回的Sub其实是一个构造函数,而且继承自Vue,也就是说extend方法返回的是Vue的一个子类。

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

web浏览器中的javascript

window对象

  • 计时器

  • 浏览器定位和导航

  • 浏览历史

  • 浏览器和屏幕信息

  • 对话框

  • 错误处理

  • 作为window对象属性的文档元素