vue使用mixin缺点,vue3 mixins
本文主要介绍vue如何使用mixins优化组件来帮助你更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
目录
mixins实现hook函数的合并项目实践extend Summary vue提供了mixins API，可以让我们从组件中提取出可重用的函数，放入mixins中，然后将mixins引入组件中，这样可以让组件不再臃肿，提高代码的可重用性。
如何理解mixins？我们可以将mixin理解为一个数组，数组中有单个或多个mixin。mixins的本质是一个JS对象，可以拥有数据、created、方法等所有属性。在vue实例中，甚至嵌套混合，这是惊人的！
举个简单的例子：
div id=应用程序
h1{{ message }}/h1
/div
const myMixin={
data() {
返回{
消息：“这是mixin消息”
}
},
已创建(){
console.log(mixin已创建)
}
}
const vm=new Vue({
埃尔： #app ，
mixins: [myMixin]，
data() {
返回{
消息：“这是vue实例消息”
}
},
已创建(){
console.log(this.message)
//=根Vue实例
console . log(“vue实例已创建”)
//=创建了myMixin
//=创建的根Vue实例
}
})
mixins与Vue实例合并时，created等钩子函数会合并成一个数组，首先调用mixins的钩子。当数据和方法对象的键值冲突时，组件优先。
PS:如果不知道mixins的概念，可以去vue的官方文档看看vue mixins的基本概念和用法。
mixins 实现
那么mixins是如何实现的呢？vue实例化时会调用mergeOptions函数合并选项，函数声明在vue/src/core/util/options.js文件中。
导出函数合并选项(
父：对象，
子：对象，
vm？组件
):对象{
.
//If child.extends递归调用mergeOptions实现属性复制
const extendsFrom=child.extends
if (extendsFrom) {
parent=mergeOptions(父级，扩展源，虚拟机)
}
//If child.mixins递归调用mergeOptions实现属性复制
if (child.mixins) {
for(设i=0，l=child . mixins . length；I l；i ) {
parent=mergeOptions(parent，child.mixins[i]，vm)
}
}
//声明options空对象保存属性复制结果。
常量选项={}
让钥匙
//遍历父对象，调用mergeField复制属性。
对于(键入父项){
合并字段(关键字)
}
//遍历父对象，调用mergeField复制属性。
对于(键入子对象){
如果(！hasOwn(parent，key)) {
合并字段(关键字)
}
}
//属性复制的实现方法
函数合并字段(键){
//渗透赋值，默认值为defaultStrat
const strat=strats[key] default strat
options[key]=strat(父[key]，子[key]，vm，key)
}
退货选项
}
为了保持代码简洁，mergeOptions函数不重要的代码已经被删除。让我们慢慢来。
const extendsFrom=child.extends
if (extendsFrom) {
parent=mergeOptions(父级，扩展源，虚拟机)
}
首先，声明Extensions from变量保存child.extends。如果Extensions from为true，递归调用mergeOptions复制属性，并将合并结果保存到父变量。
if (child.mixins) {
for(设i=0，l=child . mixins . length；I l；i ) {
parent=mergeOptions(parent，child.mixins[i]，vm)
}
}
如果child.mixins为true，则循环mixins数组，递归调用mergeOptions来复制属性，并仍然将合并结果保存到父变量。
接下来是父子的属性赋值：
常量选项={}
让钥匙
对于(键入父项){
合并字段(关键字)
}
对于(键入子对象){
如果(！hasOwn(parent，key)) {
合并字段(关键字)
}
}
声明options空对象，用于保存属性复制的结果，也作为递归调用mergeOptions的返回值。
这里首先会调用为.在对父母进行循环，在循环中不断调用合并字段函数。
接着调用为.在对儿童进行循环，这里有点不太一样，会调用哈苏恩判断父母上是否有这个钥匙，如果没有再调用合并字段函数，这样避免了重复调用。
那么这个合并字段函数到底是用来做什么的呢？
函数合并字段（键){
//穿透赋值，默认为默认策略
const strat=strats[key] 默认策略
options[key]=strat(父[答案]，子[键]，虚拟机，键)
}
合并字段函数接收一个钥匙，首先会申明战略的变量，如果战略[键]为真，就将战略[键]赋值给战略。
const strats=配置。选项合并策略
.
optionmergerstrategies:object。创建(空)，
.
海峡早报其实就是Object.create(null)，Object.create用来创建一个新对象，战略默认是调用对象.创建(空)生成的空对象。
顺便说一句，vue也向外暴露了vue。配置。选择合并策略，可以实现自定义选项合并策略。
如果战略[键]为假，这里会用 做穿透赋值，将默认策略默认函数赋值给战略。
const默认strat=function(parent val:any，childVal: any): any {
return childVal===未定义？parentVal : childVal
}
默认策略函数返回一个三元表达式，如果childVal为未定义，返回parentVal，否则返回柴尔德瓦尔，这里主要以childVal优先，这也是为什么有组件混合扩展这样的优先级。
合并字段函数最后会将调用战略的的结果赋值给选项[键].
合并选项函数最后会合并所有选项、混合、扩展，并将选择对象返回，然后再去实例化vue。
钩子函数的合并
我们来看看钩子函数是怎么进行合并的。
函数合并钩子（
parentVal:数组函数，
childVal:函数?数组函数
):数组函数{
返回子值
？parentVal
？parentVal.concat(childVal)
:Array.isArray(childVal)
？childVal
:[childVal]
:parentVal
}
LIFECYCLE_HOOKS.forEach(hook={
合并钩
})
循环生命周期_挂钩数组，不断调用合并钩函数，将返回值赋值给斯特拉思[胡克].
导出常量生命周期_挂钩=[
创建前，
创建，
安装前，
安装，
更新前，
已更新，
销毁前，
已销毁，
激活，
停用，
"错误已捕获"
]
生命周期_挂钩就是申明的某视频剪辑软件所有的钩子函数字符串。
合并钩函数会返回3层嵌套的三元表达式。
返回子值
？parentVal
？parentVal.concat(childVal)
:Array.isArray(childVal)
？childVal
:[childVal]
:parentVal
第一层，如果childVal为真，返回第二层三元表达式，如果为假，返回parentVal。
第二层，如果parentVal为真，返回parentVal和childVal合并后的数组，如果parentVal为假，返回第三层三元表达式。
第三层，如果childVal是数组，返回柴尔德瓦尔，否则将childVal包装成数组返回。
新Vue({
已创建：[
函数(){
console.log(冲冲冲!)
},
函数(){
console.log(鸭鸭鸭!)
}
]
})
//=冲冲冲！
//=鸭鸭鸭！
项目实践
使用某视频剪辑软件的小伙伴们，当然也少不了在项目中使用元素-用户界面。比如使用桌子表格的时候，免不了申明表数据、总计、页面大小一些桌子表格、分页分页需要的参数。
我们可以将重复的数据、方法写在一个tableMixin中。
导出默认值{
data() {
返回{
总计：0,
页码：1,
页面大小：10,
表数据：[],
加载：假
}
},
已创建(){
this.searchData()
},
方法：{
//预申明，防止报错
searchData() {}，
handleSizeChange(size) {
this.pageSize=size
this.searchData()
},
handleCurrentChange(第页){
this.pageNo=page
this.searchData()
},
handleSearchData() {
this.pageNo=1
this.searchData()
}
}
}
当我们需要使用时直接引入即可：
从导入餐桌混音./表混合
导出默认值{
.
mixins: [tableMixin]，
方法：{
searchData() {
.
}
}
}
我们在组件内会重新申明搜索数据方法。类似这种方法对象形式的钥匙，如果键相同，组件内的键会覆盖tableMixin中的钥匙。
当然我们也可以在混入类中嵌套混合蛋白，申明axiosMixin:
从导入餐桌混音./表混合
导出默认值{
mixins: [tableMixin]，
方法：{
handleFetch(url) {
const { pageNo，pageSize }=this
this.loading=true
this.axios({
方法： post ，
url，
数据：{
.这个. params
佩吉诺，
页面大小
}
})。然后(({ data=[] })={
this.tableData=data
this.loading=false
})。接住(错误={
this.loading=false
})
}
}
}
引入axiosMixin:
从导入axiosMixin ./公理化
导出默认值{
.
mixins:[axios mix]，
已创建(){
this.handleFetch(/user/12345 )
}
}
在爱可信中，我们可以预先处理爱可信的成功、错误的后续调用，是不是少写了很多代码。
extend
顺便讲一下延伸，与混入类相似，只能传入一个选择对象，并且混入类的优先级比较高，会覆盖扩展同名键值。
//如果有子扩展递归调用合并选项实现属性拷贝
const extendsFrom=child.extends
if (extendsFrom) {
parent=mergeOptions(父级，扩展源，虚拟机)
}
//如果有child.mixins递归调用合并选项实现属性拷贝
if (child.mixins) {
对于(设i=0，l=孩子。mixins。长度；I l；i ) {
parent=mergeOptions(parent，child.mixins[i]，vm)
}
}
//如果有子扩展递归调用合并选项实现属性拷贝
const extendsFrom=child.extends
if (extendsFrom) {
parent=mergeOptions(父级，扩展源，虚拟机)
}
//如果有child.mixins递归调用合并选项实现属性拷贝
if (child.mixins) {
对于(设i=0，l=孩子。mixins。长度；I l；i ) {
parent=mergeOptions(parent，child.mixins[i]，vm)
}
}
在合并选项函数中，会先对延伸进行属性拷贝，然后再对混入类进行拷贝，在调用合并字段函数的时候会优先取儿童的钥匙。
虽然延伸的同名键会被混入类的覆盖，但是延伸是优先执行的。
总结
注意一下某视频剪辑软件中混入类的优先级，组件混合扩展。
我们暂且将混入类称作是组件模块化，灵活运用组件模块化，可以将组件内的重复代码提取出来，实现代码复用，也使我们的代码更加清晰，效率也大大提高。
当然，混合还有更加神奇的操作等你去探索。
以上就是某视频剪辑软件使用混入类优化组件的详细内容，更多关于某视频剪辑软件用混入类优化组件的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。