mixins和组件的区别实践

56 阅读2分钟

在项目中发现别人使用mixins,混入的方式去写代码,所以去查文档看了下应用场景及和组件的区别以下是我学习成果及分享

mixins定义

定义的话就用官方的吧。mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中,当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来,这样就可以提高代码的重用性,使你的代码保持干净和易于维护。

什么时候使用它呢

当我们开发时存在多个组件中的数据或者功能非常相近,举个例子,比说我这边遇见的不同页面调用同一个接口,通过该接口获取的数据去做一些操作,这种就可以使用混入的方式,当然如果有展示或者其他需求的话使用组件也是可以的,

组件和混入的区别

组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据props来传值,但本质上两者是相对独立的。

Mixins: 则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。在不同组件去获取mixins中的比变量都是初始值,修改该值不会改变在其他组件中获取的初始值,互不影响

vuex: 用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。

Mixins: 可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。

Mixins使用

在项目中创建mixins文件夹,创建js文件