首页 > 其他分享 >Vue 组件代码优化: 公共配置抽离成 Mixin 混合( 附超详细使用教程 )

Vue 组件代码优化: 公共配置抽离成 Mixin 混合( 附超详细使用教程 )

时间:2022-10-05 23:03:18浏览次数:47  
标签:Vue 附超 混合 代码优化 mixin 组件 import js

前言

有过开发经验的同学都知道,为使代码层次结构清晰分明,对于一些通用或常用的方法,都会将其抽象成公共方法或配置供使用者调用。

例如:在做 Python 自动化测试过程中,经常需要连接数据库,进行增、删、改、查的操作。

​add.py​​文件是给数据库添加数据的

​update.py​​文件是更新数据库数据的

​delete.py​​文件是删除某个条件下的数据库数据的

后期可能在 ​​add.py​​ 文件中增加本次添加的数据进行删除的操作,这种情况下你觉得把数据库配置及操作代码写在哪合适呢?

1.add.py,update.py,delete.py 每个文件里各写一套数据库的配置与操作

2.单独写一个public.py文件,将数据库的配置及操作提取出来,哪个文件要用则引入即可使用

如果是我肯定选择第 2 种方式,既不需要重复写相同代码,同时也让整个代码框架看起来更清晰,消除了不必要的冗余。

​Vue​​ 多组件之间也会有使用相同配置或方法的场景,这时也可以选择第 2 种方法。

将公共的配置信息或方法抽离到 mixin 混合中,哪个 ​Vue​ 组件想要使用引入即可。

Mixin 使用场景

:::: column
::: column-left

Home.vue组件

Vue 组件代码优化: 公共配置抽离成 Mixin 混合( 附超详细使用教程 )_数据库

:::
::: column-right

City.vue组件

Vue 组件代码优化: 公共配置抽离成 Mixin 混合( 附超详细使用教程 )_Vue.js_02


:::

::::

由上图红框标注对比可知,两个组件都使用到 ​​methods 中的 showAlert 方法​​​,此时就可以将该方法抽离到 ​​mixin.js​​文件中

然后在 ​​Home.vue​​​,​​City.vue​​​组件中分别​​局部引入​​​或直接在​​main.js​​​中​​全局引入​​即可使用。

代码实战

定义混合

创建一个​​mixin.js​​文件,内容如下:

//定义一个名字为:mixin 的混合并暴露出来,这个混合的名字 mixin 可以自定义,非固定值 mixin。
export const mixin = {
methods: {
showAlert(){
alert(this.name)
}
}
}

使用混合

1. 局部混合

::: block-1

使用语法

1.​​import {mixin.js文件中暴露的名字} from 'mixin.js所在路径'​

例如本示例代码中的使用实例为:

​import {mixin} from '../mixin'​

2.​​mixins:[mixin]​

​mixins​​​为固定关键字,不可修改,数组中的​​mixin​​​为 ​​import​​​ 中花括号​​{}​​里的值

3.在组件内部使用​​import​​关键字引入的称为:局部混合

​City.vue组件内容​

<template> <div> <h2 @click="showAlert">城市名称:{{name}}</h2> </div> </template> <script> //引入一个混合,名字是:mixin import {mixin} from '../mixin' export default { name:'City', data(){ return { name: '北京' } }, //使用关键字mixins来使用混合mixin,此时mixin.js里的方法showAlert就可以在该组件内使用了 mixins:[mixin] } </script>

:::

2. 全局混合
::: block-1

使用语法

1.在​​main.js​​​文件中引入定义好的混合​​mixin​​,其内容如下:

​main.js文件内容​

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import {mixin} from "./mixin"
//关闭Vue的生产提示
Vue.config.productionTip = false
//引入该mixin混合后所有的Vue实例与Vuecomponent实例上都会有mixin这个混合
Vue.mixin(mixin)

//创建vm
new Vue({
el:'#app',
render: h => h(App)
})

2.在​​main.js​​​文件中使用​​import​​关键字引入,引入这个步骤全局与局部混合是一样的

区别在于全局混合需要在引入后使用关键字​​Vue.mixin(mixin)​​进行注册

3.在所管理下的任意一个组件或​​Vue实例对象​​​需要使用​​mixin.js​​​里定义的混合​​mixin​​​下的方法,都可以直接不必再使用关键字​​import​​引入即可直接使用

​City.vue组件内容​

<template> <div> <!--showAlert方法定义在混合mixin中,因为混合是全局配置,所以此文件不必引入即可使用--> <h2 @click="showAlert">城市名称:{{name}}</h2> </div> </template> <script> export default { name:'City', data(){ return { name: '北京' } } } </script>

:::

Mixin 适用范围

  1. ​methods​​中的公共方法,使用方法示例如上
  2. 各组件中需要共享的​​data​​数据
  3. 生命周期钩子函数,例如​​mounted​​挂载等函数

小结

  1. ​mixin​​​功能:可以把多个组件共用的配置提取成一个混合对象, ​​mixin.js​​文件中可以定义多个混合。
  2. 当​​mixin​​混合定义了​​data​​中的数据,且组件自身也有相同的​​data​​数据,最终是以组件自身的​​data​​数据为准。只有当组件自身未定义的数据才会使用​​mixin​​混合中定义的​​data​​数据。
  3. 生命周期函数,例如​​mounted​​与​​data​​是不一样的,如果​​mixin​​混合中定义​​mounted​​函数,且组件自身也定义了​​mounted​​函数,最终是两处​​mounted​​函数的代码都会被执行。
  4. 使用方式:
    第1步: 定义混合
    第2步: 使用混合
 (1).全局混入: 
import {xxx} from 'yyyyy'
Vue.mixin(xxx)

(2).局部混入:
import {xxx} from 'yyyyy'
mixins:['xxx']


标签:Vue,附超,混合,代码优化,mixin,组件,import,js
From: https://blog.51cto.com/u_14204796/5733034

相关文章