Vue 进阶系列丨Mixin 混入

最新推荐文章于 2024-10-03 09:02:12 发布

HFun TM

最新推荐文章于 2024-10-03 09:02:12 发布

阅读量377

点赞数 1

分类专栏： vue进阶系列文章标签： vue python java javascript 机器学习

本文链接：https://blog.csdn.net/HFunTeam/article/details/121200484

版权

vue进阶系列专栏收录该内容

20 篇文章 10 订阅

订阅专栏

Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

2013年7月28日，尤雨溪第一次在 GItHub 上为 Vue.js 提交代码；2015年10月26日，Vue.js 1.0.0版本发布；2016年10月1日，Vue.js 2.0发布。

最早的 Vue.js 只做视图层，没有路由，没有状态管理，也没有官方的构建工具，只有一个库，放到网页里就可以直接用了。

后来，Vue.js 慢慢开始加入了一些官方的辅助工具，比如路由（Router）、状态管理方案（Vuex）和构建工具（Vue-cli）等。此时，Vue.js 的定位是：The Progressive Framework。翻译成中文，就是渐进式框架。

Vue.js2.0 引入了很多特性，比如虚拟 DOM，支持 JSX 和 TypeScript，支持流式服务端渲染，提供了跨平台的能力等。Vue.js 在国内的用户有阿里巴巴、百度、腾讯、新浪、网易、滴滴出行、360、美团等等。

Vue 已是一名前端工程师必备的技能，现在就让我们开始深入学习 Vue.js 内部的核心技术原理吧！

什么是 mixin

mixin 是 Vue 提供的一种代码复用技术，也叫做混入。我们可以在 mixin 中定义组件中的所有选项，比如 data、methods 以及各种生命周期钩子。然后在我们的组件中引入已定义的 mixin，这时我们在 mixin 中定义的所有内容，就像灵魂附体一般和我们的组件融合了。通常用在抽离组件中重复内容的时候，减少代码冗余度。

怎么定义 mixin

定义 mixin 分为局部注册和全局注册两种，我们先来看局部注册。

局部注册

// a.js
export default {
    created(){
        console.log('mixin created')
    },
    data(){
        return {
            name:'mixin-name'
        }
    }
}


// App.vue
<template>
  <div class=''></div>
</template>
<script>
import a_mixin from './a.js'
export default {
  mixins:[a_mixin],
  mounted() {
    console.log('name',this.name)
  }
}
</script>


// mixin created
// name mixin-name

上方代码中，我们现在 a.js 中定义了一个普通对象，对象内部包含 created 钩子函数和 data 函数，然后在 App.vue 组件内部通过 mixins 选项，混入了a.js定义的内容。执行结果就是输出了mixin created 和 name mixin-name 。定义的 created 和 data 都混入了 App.vue。但是当 mixin 中定义的内容，和 App.vue重复了怎么办呢？

全局注册

通过 Vue 提供的 Vue.mixin() 函数，只需要我们在 main.js 中引入我们定义的mixin 文件，然后通过传入 Vue.mixin() 中即可。这时候，我们每一个组件都可以使用 mixin 中的内容了，且不需要 mixins 选项引入。

// a.js
export default {
    created(){
        console.log('mixin created')
    },
    data(){
        return {
            name:'mixin-name'
        }
    }
}




// main.js
import a_mixin from './a.js'
Vue.mixin(mixin)

mixin 和组件的重复项

对于 mixin 和组件之间的重复项，根据选项的不同，解决方案也不一样。

对象形式的选项，比如 data、methods、computed、components：如果没有重复项，会将 mixin 中的和 App.vue 中的进行合并，是并集的操作。如果存在重复项，那么最终会保留 App.vue 的数据。

// a.js
export default {
    created(){
        console.log('mixin created')
    },
    data(){
        return {
            name:'mixin-name'
        }
    }
}


// App.vue
<template>
  <div class=''></div>
</template>
<script>
import a_mixin from './a.js'
export default {
  data(){
    return {
      name:'app-name'
    }
  },
  mixins:[a_mixin],
  mounted() {
    console.log('name',this.name)
  }
}
</script>


// mixin created
// name app-name

函数形式的，比如生命周期钩子函数：对于 mixin 中定义的生命周期钩子函数和 App.vue 中的生命周期钩子函数都会被保留，并且优先执行mixin中的生命周期钩子。

// a.js
export default {
    created(){
        console.log('mixin created')
    },
    data(){
        return {
            name:'mixin-name'
        }
    }
}


// App.vue
<template>
  <div class=''></div>
</template>
<script>
import a_mixin from './a.js'
export default {
  data(){
    return {
      name:'app-name'
    }
  },
  mixins:[a_mixin],
  created(){
    console.log('app created') 
  }
}
</script>


// mixin created
// app created

组件间相互隔离

mixin 定义的变量，在各个组件之间是相互隔离的，在一个组件修改值，其他组件不会改变。

// a.js
export default {
    created(){
        console.log('mixin created')
    },
    data(){
        return {
            name:'mixin-name'
        }
    }
}
// App.vue
<template>
  <div class=''></div>
</template>
<script>
import a_mixin from './a.js'
export default {
  mixins:[a_mixin],
  mounted(){
    this.name = 'appName'
    console.log('app_name',this.name)  // appName
  }
}
</script>
// Home.vue
<template>
  <div class=''></div>
</template>
<script>
import a_mixin from './a.js'
export default {
  mixins:[a_mixin],
  mounted(){
    console.log('home_name',this.name)  // mixin_name
  }
}
</script>

与 Vuex 的区别