vue:extend和mixin的区别

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

vue extend

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

https://www.cnblogs.com/xzybk/p/12786680.html
部分理解由此篇博客产出

使用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构造器，创建一个子类，参数是一个包含组件选择项的对象。

区别

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

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

vue:extend和mixin的区别相关推荐

vue.extend与vue.component的区别和联系
一味的闷头开发,却对基础概念缺乏理解,是个大坑... 查阅官网后现对自己的理解记录一下,用于日后复习巩固 Vue.extend({}) 简述:使用vue.extend返回一个子类构造函数,也就是预设部 ...
[vue] vue和angular有什么区别呢？
[vue] vue和angular有什么区别呢? Vue.js - 多样化的 JavaScript 框架作为一个跨平台的,高度进步的框架,Vue 成为了许多需要创建单页应用程序的开发人员的首选.在用 ...
什么是Mixin？带你了解Vue中的Mixin混入
什么是Mixin?本篇文章带大家了解一下Vue中的Mixin混入,介绍Mixin和Vuex的区别,Mixin的使用方法,希望对大家有所帮助! Vue框架现在基本上已经占据了前端的半壁江山,Vue的数据 ...
关于vue.extend的理解应用
一.基本概念 Vue.extend( options ) 使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象. 一般,我们会用 Vue.extend 接收一个 ...
【Python】list 之 extend 和 append 的区别
示例 a = [1, 2, '3', '1'] a.extend([1, 2]) print(a) a.append([1, 2]) print(a) 输出结果 [1, 2, '3', '1', 1, ...
Vue.extend
Vue.extend 1.传递的参数 Vue.extend({Object}),传递的是一个对象,这个对象包含template等,其实就是传递一个包含组件选项的对象. 他是属于Vue的全局API,用来 ...
Vue利用Vue.extend()实现自定义弹出框
运用场景:如果想实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它,这时候Vue.extend + vm.$mount 组合就派上用场了. 简单介绍: Vue.ex ...
Js 控件编写继承：extend、mixin和plugin（一）
Js 继承:extend.mixin和plugin(一) 简介: 我们编写前端控件时,需要给控件建立一个体系,面向对象是一个很合适的方式,但是JS本身对面向对象的一些概念支持偏弱,特别是继承的特性方面 ...
vue.extend的问题
问题场景使用Vue.extend时 <template><div><div id="mount-point"></div>< ...

vue:extend和mixin的区别

区别

vue:extend和mixin的区别相关推荐

最新文章

热门文章