对vue的mixin的理解,有什么应用场景?

简介: 对vue的mixin的理解,有什么应用场景?

ccaa5c0414fe49d38ab1cdaf2b6232df.png

mixin是什么

Mixin是面向对象程序设计语言中的类,提供了方法的实现。

其他类可以访问mixin类的方法而不必成为其子类

当一段代码非常相似的时候就可以抽离成一个mixin


mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如data、components、methods 、created、computed等等。只要将共用的功能以对象的方式传入 mixins选项中,当组件使ins对象时所有mixins对象的选项都将被混入该组件本身的选项中来,这样就可以提高代码的重用性,使你的代码保持干净和易于维护。

使用场景

当存在多个组件中的数据或者功能很相近时,就可以利用mixins将公共部分提取出来,通过 mixins封装的函数,组件调用他们是不会改变函数作用域外部的。

mixins和vuex的区别

vuex公共状态管理,在一个组件被引入后,如果该组件改变了vuex里面的数据状态,其他引入vuex数据的组件也会对应修改,所有的vue组件应用的都z是同一份vuex数据。(在js中,有点类似于浅拷贝)

vue引入mixins数据,mixins数据或方法,在每一个组件中都是独立的,互不干扰的,都属于vue组件自身。(在js中,有点类似于深度拷贝)

mixins和组件的区别

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

Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。

(装饰器模式)

mixin的使用

定义一个mixin名字为myMixins

export default {
   data () {
     return {
          num:1
      }
   },
   methods: {
      mymixin() {
          console.log(this.num);
      },
   }
}

在组件中使用

import {myMixins} from './myMixins';
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
  //使用mixin可以直接用,但是组件就得传值
    this.num++
  },
} 


相关文章
|
1天前
|
JavaScript
Vue中动态Class实战
Vue中动态Class实战
6 0
|
1天前
|
前端开发 JavaScript
Vue+Swiper实现轮播图效果
Vue+Swiper实现轮播图效果
5 1
|
1天前
|
JavaScript
在Vue中,如何保证事件监听器的注册和清除操作在正确的生命周期执行?
在Vue中,如何保证事件监听器的注册和清除操作在正确的生命周期执行?
10 2
|
1天前
|
开发框架 JavaScript 前端开发
vue首次加载白屏问题
vue首次加载白屏问题
6 0
|
1天前
|
JavaScript 前端开发 开发者
vue组件化开发,与渐进式框架讲解
vue组件化开发,与渐进式框架讲解
6 3
|
1天前
|
缓存 JavaScript 数据处理
什么是vue的计算属性
什么是vue的计算属性
6 2
|
2天前
|
JavaScript
Vue中的mixin和extend有什么区别?
Vue中的mixin和extend有什么区别?
10 0
|
2天前
|
JavaScript
Vue中的$nextTick方法的作用是什么?举例说明
Vue中的$nextTick方法的作用是什么?举例说明
10 1
|
2天前
|
JavaScript
在Vue中,如何实现生命周期钩子函数的多态?
在Vue中,如何实现生命周期钩子函数的多态?
6 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
972 0