vue中Mixins 与 Hoc
什么是mixins
在官方文档中
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
// 定义一个混入对象
var myMixin = {created: function () {this.hello()},methods: {hello: function () {console.log('hello from mixin!')}}
}// 定义一个使用混入对象的组件
var Component = Vue.extend({mixins: [myMixin]
})var component = new Component() // => "hello from mixin!"
选项合并
当组件和混入对象有相同的选项时,它们将会被混合;
如果混合的数据对象与组件数据冲突的时候,组件数据优先;
如果是钩子混合,混合的钩子优选;
具体可以查看官方文档
什么是HOC
HOC 就是高阶组件(Higher-order component)
HOC经常出现于react,但是在vue中也可以被用到;但是vue中由于设计思想与react不同,所以使用mixins对于效率的提升大于使用hoc。
react中的hoc
先看一个react的demo
function WithConsole (WrappedComponent) {return class extends React.Component {componentDidMount () {console.log('with console: componentDidMount')}render () {return <WrappedComponent {...this.props}/>}}
}
在这个代码中WithConsole就是一个高阶组件;它的特点是什么呢:
1:高阶组件是一个function函数,可以看出它不会修改原来的组件,使用return去返回一个组件然后再渲染被包装的组件WrappedComponent。
2:高阶组件只接受数据props,不关心数据来源。等其他特点
vue中的hoc
先来看一个vue的基本组件
<template><div><span @click="handleClick">props: {{test}}</span></div>
</template><script>
export default {name: 'BaseComponent',props: {test: Number},methods: {handleClick () {this.$emit('customize-click')}}
}
</script>//使用组件
<base-component @customize-click="handleCustClick" :test="100" />
然后如果我们需要在这个组件挂载的时候都console一段话,可以使用mixins
export default consoleMixin {mounted () {console.log('I have already mounted')}
}
然后混入其中
export default{...mixins: [consoleMixin]...
}
如果使用高阶组件怎么完成同样的功能呢;在高阶组件中接受一个组件作为参数,返回一个新组件;在这里就要了解到什么是组件,在此之前要了解在vue中什么是组件,根据vue的源码,vue的组件在创建之后被引入的时候是一个JSON对象,但是当这个对象注册(components)之后,Vue会以该对象创建一个构造函数,在此之前import导入的时候,是一个对象 。 所以vue中高阶组件就是接受一个对象,返回成一个新的对象。
export default function WithConsole (WrappedComponent) {return {template: '<wrapped v-on="$listeners" v-bind="$attrs"/>',components: {wrapped: WrappedComponent},mounted () {console.log('I have already mounted')}}
}
WithConsole就是一个高阶组件,接受WrappedComponent组件作为参数;返回一个新的组件;我们将WrappedComponent注册为wrapped组件,在template渲染。但是这个组件有很多的不完全功能,比如接受不到props和事件,无法插入slot,还需要再改进。太麻烦了,就不多写了,vue上使用hoc远没有mixins来的方便,这里只是了解下这个思想。
Vue和React
看起来vue里面高阶组件比较麻烦,这是由于两者的设计思想和目标不同,在react中写组件像写js函数,而vue更像先把函数封装之后,直接作用于html上面,这样有利也有弊,高度封装丢失了一定的灵活性,但是写起来更加轻松。
vue中Mixins 与 Hoc相关推荐
- vue中mixins的使用方法和注意地方
一.什么是Mixins? mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如dat ...
- vue 中 mixins 的使用
本文同步发布在:vue 中 mixins 的使用 mixins(混入)就是定义了一部分公共的方法.计算属性或者钩子函数等 vue 组件中的可复用功能,然后混合进各个组件中使用.下面我们具体来看看怎么使 ...
- 【Vue】Vue中mixins的使用方法及实际项目应用详解
文章目录 (1)mixin基础 (2)mixin特点 1.选项合并 2.方法和参数在各组件中不共享 (3)mixin与vuex的区别 (4)mixin与公共组件的区别 (5)项目实践 (6)总结 (1 ...
- vue中mixins的使用方法
参考官网以及网上的一些资料,最基本的用法 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项 ...
- Element组件引发的Vue中mixins使用,写出高复用组件
我们都知道 Vue 采用的是一种组件化开发模式,组件在 Vue 中一个非常重要的核心概念.每个组件都是一个完整的实例,组件的创建,组件间的通讯,组件如何更好的复用,以及整个的生命周期的钩子.所以你会发 ...
- vue中mixins的理解
我的理解是能不用就不用,除非一个js文件在多个vue页面需要使用再用例如: test.js export default {//必须导出data() {return {reqName: '23'}}, ...
- Vue中mixins
一.什么是Mixins mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins 是一个 js 对象,它可以包含我们组件中 script 项中的任意功能选项, ...
- vue中的mixins怎么用?
mixins基础概况 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使 ...
- 如何在Vue 中管理 Mixins(搞懂这两点就足够了)
转载地址:https://segmentfault.com/a/1190000021772893 当我们的Vue项目功能越来越多时,如果有类似的组件,可能会发现自己一次又一次地复制和粘贴相同的数据.方 ...
最新文章
- C#中的Liststring泛型类示例
- 深入理解javascript原型和闭包(15)——闭包
- 枚举算法称硬币C语言,【算法系列之枚举】称硬币
- 2-06 使用网络存储SAN和NAS
- Linux下安装与使用本地的perl模块
- cvs数据格式 gps_全站仪和GPS数据格式的转化方法
- 天之痕java 郡王府_轩辕剑3外传天之痕图文攻略【含支线任务】
- 圣剑传说 玛娜传奇(Legend of Mana)(LOM)全武器取得方法
- 成功解决IPython.core.display.HTML object
- python炒股代码_python简单代码_趣炒股网页版
- 向量大小和归一化(vector magnitude normalization)、向量范数(vector norm)、标量/向量/矩阵/张量
- Telnet - 访问8080端口并发送数据
- CentOS7 初次安装记录(三)配置PHP和MYSQL
- 悼念512汶川大地震遇难同胞——来生一起走(dfs+打表)
- python3 列表生成式,字典生成式,generator列表生成器的应用
- Android隐藏导航栏按键,Android如何控制导航栏单个按键的显隐状态
- linux之小技巧netstat
- soc(三) 电源管理
- 风云4A卫星行列号和经纬度查找表文件下载及解析
- Tesseract-OCR 中文识别(附上源码)
热门文章
- 面试题: 数据库:delete和trancate删除表记录的区别
- 总能找到女人可夸之处
- 《Malloc 源码解读》
- matlab已知曲线方程怎么求曲率和挠率,空间曲线的曲率、挠率和Frenet公式
- Android如何实现点击一次返回键返回桌面而不是退出应用?
- PC端网页在手机端全屏展示改造
- 教育行业需要了解的大数据,武汉数道云科技浅析:Hadoop大数据平台如何搭建?...
- C# 利用Aforge调用本机摄像头完成拍照,录像
- nvdiffrec在Windows上的配置及使用
- 高德逆地理编码接口返回数据格式不统一以及百度逆地理编码接口返回数据解析失败的踩坑记录