vue使用mixin!迷信？typescript中如何使用mixin？

前言废话：

当时看vue的时候没有那么深♂入的了解。前天在群里看到有人问mixin怎么使用。看了一下发现并不难……

这里呢我先带大家看看如何在vue里面使用mixin，当然知道怎么使用的，想看typescript版本怎么实现的可以往下拉。

什么是mixin？

官方介绍：混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。

个人解释：戈壁老王有一套房子(我们定义的mixin)，房砸里面有卧室有个厨房啥都有，他的儿子小明和大明(使用mixin的组件)。可以住可以使用房子里所有的东西，也可以对房砸从新装修。

怎么使用？

那么无图无代码言啥来着……

组件里面使用mixin：

<template>
  <div id="app">
    <p>{{smallMing | cook}}</p>
    <p>{{bigMing | watch}}</p>
  </div>
</template>
<script>
var house = {   // 我们戈壁老王的房子（我们定义的mixin）
  data() {
    return { 
      Kitchen: '厨房',
      Tv: '电视机',
    }
  },
  filters: {
    cook: function (name) {
      if (!name) return ''
      return name + "再用厨房做饭……";
    },
    watch: function (name) {
      return name + '看电视……';
    }
  },
  created: function() {
    setTimeout(function(){ console.log("what?"); }, 3000);
    console.log("???");
  },
  methods: {
    runing: function () {
      console.log( `${this.laoWang }跑步`)       // 不会被执行！！
    }
  }
}
export default {
  name: 'app',
  mixins: [house],
  data() {
    return { 
      smallMing: '小明',
      bigMing: '大明',
      laoWang: '老王',
    }
  },
  created: function() {
    console.log(this.Kitchen); // 厨房
    console.log(this.Tv);      // 电视机
    this.runing()              // 老王跑步呢，别打扰他。
  },
  methods: {
    runing() {   
      console.log( `${this.laoWang }跑步呢，别打扰他。`)
    }
  }
}
</script>

全局使用mixin

 在src下新建文件mixin/house.js
 然后写代码……
 export const house = {  
    ……
 }
 
 在main.js 中引入
 import { house } from "./mixin/house";
 Vue.mixin(house)
 
 然后你就可以欢乐的使用mixin了……

说两句

然后你会发现效果是一样的……全局的好处是不用到处引入了，可以写一些共用的方法。不然一个个引入真的好烦……

可以很直观的看到，组件里面可以使用mixin里定义的所有的方法变量，所以你可以进行各种骚操作.

重名的变量和方法会被组建的顶替掉

生命组件不会被顶替，而是跟组件中的方法同时执行

问答……

问：mixin里面可以使用vue组件所有的功能？
答: 应该把，官方应该不会骗我……
问：为啥mixin里面的runing 不会被执行，而是执行组件里面runing？
官网文档：数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。 值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。 Vue.extend() 也使用同样的策略进行合并。
问：什么时候使用，应用场景在哪里？
答：过滤器，公用方法，组件需要通过prop传递的固定值……代码是死的，思想是活的。具体怎么使用在于你的想法……
问：ä½œç”¨ï¼šå›½é™…æ ‡å‡† ISO 10646 å®šä¹‰äº†é€šç”¨
答：啥你说啥我看不懂……

vue-element-admin 也在使用mixin

看到这里相比大家也知道怎么使用了把?

在Typescript 中使用……

怎么使用Typescript 这里嘛我就不多叙述了。可以看我之前的一篇文章。

使用typescript+vue 编写电影信息小项目！

看到这张图的时候不是感觉大脑凌乱？别着急我给你慢慢道来……

MyOtherMixin.ts 文件

这里需要注意的是 filters 过滤器，我在GitHub找了一下。只看到这个写法……
老样子定义一些我们需要的代码。
import { Component, Mixins, Vue } from 'vue-property-decorator';  
@Component({
  filters: {
    watch(name: string) {
      return name + '看电视……';
    },
  },
})
export class MyOtherMixin extends Vue {
  private Kitchen = '厨房';
  private Tv = '电视机';
  private created() {
    this.runing();
  }
  private runing() {
    // tslint:disable-next-line:no-console
    console.log(this.laowang + '跑步');
  }
}

App.vue 文件
<template>
  <div id="app">
   {{ laowang | watch}}  // 过滤器使用
  </div>
</template>
<script lang="ts">
import { Component, Mixins, Vue } from 'vue-property-decorator';
import { MyOtherMixin } from './MyOtherMixin';
@Component
export class MyMixin extends Vue {
   private created() {
    console.log('what?');
    this.runing();
  }
}
@Component({
})
// 注意这里 我用了一个Mixins 方法其实对应js版本的vue是 mixinx: [MyMixin, MyOtherMixin],继承了俩个mixin。
export default class App extends Mixins(MyMixin, MyOtherMixin) { 
  private test = "test";
  private laowang = 'laowang';
  created() {
    console.log(this.test)
    console.log(this.Kitchen)
    console.log(this.Tv)
  }
}
</script>

全局使用
import { MyOtherMixin } from "./MyOtherMixin";
Vue.mixin(MyOtherMixin);

有几个比较严重的问题!

全局挂载和js版本一样。如果当前比如说MyMixin 没有runing 方法在生命组件中调用打包会报错。
全局挂载的MyOtherMixin 在方法里找不到App组件中的变量。
在ts里面使用vuex非常的蛋疼。
还有很多未知bug……等待大家发现。

所以写ts版的vue时不要在生命周期中使用其他组件的变量。最好使用js写vue，因为有很多你意想不到的问题……

最后：感谢阅读感谢支持！不要忘记点个赞留个回复！