vue里extend、mixins、extends的区别
1.extend
Vue.extend使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
// Vue.extend
// 创建构造器
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')
2.mixins
mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项,他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例:如果你的混入包含一个钩子而创建组件本身也有一个,两个函数将被调用。
Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。
// mixins示例
var mixin = {
created: function () { console.log(1) }
}
var vm = new Vue({
created: function () { console.log(2) },
mixins: [mixin]
})
// => 1
// => 2
mixins要点
- data混入组件数据优先
- 钩子函数将混合为一个数组,混入对象的钩子将在组件自身钩子之前调用
- 值为对象的选项,例如 methods, components 和 directives,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。
- 以上合并策略可以通过
Vue.config.optionMergeStrategies
修改
3.extends
允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。这和 mixins 类似。
// extends示例
var CompA = { ... }
// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
extends: CompA,
...
}
4.总结:
- extend用于创建vue实例
- mixins可以混入多个mixin,extends只能继承一个
- mixins类似于面向切面的编程(AOP),extends类似于面向对象的编程
- 优先级Vue.extend>extends>mixins
vue里extend、mixins、extends的区别的更多相关文章
- vue中extend/component/mixins/extends的区别
vue中extend/component/mixins/extends的区别 教你写一个vue toast弹窗组件 Vue.extend构造器的延伸
- vue里面的Mixins(混合)
Mixins一般有两种用途:1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染.2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用. ...
- React/Vue里的key到底有什么用?看完这篇你就知道了!(附demo代码)
网上有很多博客讲到,React.Vue里的key,与 Virtual DOM 及 DOM diff 有关, 可以用来唯一标识DOM节点,提高diff效率,云云. 这大致是对的,但是,大多讲得语焉不详, ...
- js里的发布订阅模式及vue里的事件订阅实现
发布订阅模式(观察者模式) 发布订阅模式的定义:它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布订阅模式在JS中最常见的就是DOM的事件绑定与触发 ...
- 了解vue里的Runtime Only和Runtime+Compiler
转自:了解vue里的Runtime Only和Runtime+Compiler 扩展文章:Vue 2.0如何仅使用Runtime-only Build构建项目? 可以看到有两种版本: Runtime ...
- vue通过extend动态创建全局组件(插件)学习小记
测试环境:nodejs+webpack,例子是看文章的,注释为自己的理解 创建一个toast.vue文件: <template> <div class="wrap" ...
- vue里在自定义的组件上定义的事件
事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...
- vue里的渲染以及computed的好处
如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面 但是大量函数的重新没有必要的执行会导致性能的下降, 此时如果把没有必要再 ...
- vue中assets和static的区别
Vue中assets和static的区别 再一次框架定型中,与同事在静态资源的存放上有了一些分歧,后来经过查阅总结如下: 相同点: assets和static两个都是存放静态资源文件.项目中所需要 ...
随机推荐
- Linux 的计划任务
Linux操作系统定时任务系统 Cron 入门 cron是一个linux下的定时执行工具,可以在无需人工干预的情况下运行作业.由于Cron 是Linux的内置服务,但它不自动起来,可以用以下的方法启动 ...
- quartz开发环境搭建
进来项目中用到了quartz作为调度框架,在搭建框架的时候添加了一个调度模块,现将代码分享出来,给有需要的朋友参考.这个任务调度可以作为一个单独的模块去开发,所以并不会改变原有的架构,话不多说,直接上 ...
- mysql中FIND_IN_SET函数的使用
有种需求,A和B是父子关系,B和C是父子关系,C与D亦是父子关系,以此类推,无限级 现在需要查询到某一级(包括本级)下面所有的,就需要用到FIND_IN_SET函数 select * from tab ...
- 使用python来搞定redis的订阅功能
好久没写博客了. 最近公司开了新项目,我负责的内容之一是系统的后端.具体项目内容我就不介绍了,但是用到的技术有些还是很有趣的,值得记录一下.今天介绍的就是其中一个:利用redis的pubsub订阅 ...
- 4-1 R语言函数 lapply
#lapply函数 #可以循环处理列表中的每一个元素 #lapply(参数):lapply(列表,函数/函数名,其他参数) #总是返回一个列表 #sapply:简化结果 #结果列表元素长度均为1,返回 ...
- Python学习之路 (三)爬虫(二)
通用爬虫和聚焦爬虫 根据使用场景,网络爬虫可分为 通用爬虫 和 聚焦爬虫 两种. 通用爬虫 通用网络爬虫 是 捜索引擎抓取系统(Baidu.Google.Yahoo等)的重要组成部分.主要目的是将互联 ...
- 范数 L1 L2
在线性代数,函数分析等数学分支中,范数(Norm)是一个函数,是赋予某个向量空间(或矩阵)中的每个向量以长度或大小的函数.对于零向量,令其长度为零.直观的说,向量或矩阵的范数越大,则我们可以说这个向量 ...
- 使用jquery操作元素的css样式(获取、修改等等)
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- 用ansible2.5在Centos7.2上部署OpenShift3.9(转)
1.环境: 主机名 ip 角色 master 10.2.1.198 master node1 10.2.1.174 no ...
- 删除iptables nat 规则
删除FORWARD 规则: iptables -nL FORWARD --line-numberiptables -D FORWARD 1 删除一条nat 规则 删除SNAT规则 iptables ...