mixins的实用案例和常见问题

吐槽君 分类:javascript

文章目录

      • mixins介绍
      • mixins局部使用和使用同名钩子函数的执行顺序
          • 看源码:
          • 执行结果:
          • 结果分析
      • mixins函数覆盖问题
          • 看源码
          • 执行结果
          • 结果分析
      • mixins变量替换合并问题
          • 看源码
          • 执行结果
          • 结果分析
      • 全局引用mixin
          • 新建一个mixinjs
          • main.js注册
          • 组件直接使用
          • 执行结果
      • 写到后面

mixins介绍

官方链接

  • 说人话就是vue给我们提供了一种更加灵活的实现业务实现逻辑的方式。

mixins局部使用和使用同名钩子函数的执行顺序

看源码:
<template>
  <div class="hello">
    <input v-model="name" />
    <button @click="func_name()">点击</button>
  </div>
</template>

<script>
//验证调用先后顺序
var watchcount = {
  //验证调用的先后顺序
  updated() {
    console.info(this.count + "我是mixins的updated方法");
  }
};
export default {
  name: "HelloWorld",
  data() {
    return {
      count: 0,
      name: ""
    };
  },
  mixins: [watchcount],
  updated() {
    console.info(this.count + "我是updated的方法");
  },
  watch: {
    name: function(newval, oldval) {
      this.count++;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
input {
  width: 250px;
  height: 30px;
  outline: none;
  border-radius: 4px;
  border: 1px solid #000000;
}
button {
  width: 90px;
  height: 30px;
  outline: none;
  border-radius: 4px;
  color: #ffffff;
  border: none;
  background: burlywood;
}
button:hover {
  width: 90px;
  height: 30px;
  outline: none;
  border-radius: 4px;
  color: #000000;
  border: none;
  background: burlywood;
}
</style>
 
执行结果:

1我是mixins的updated方法
1我是updated的方法

结果分析

我们首先看到了mixins是怎么使用的,我们定义一个变量,直接将我们需要的逻辑实现,这里我监听了input里面的name的指,做了一个updated的操作,每次值的变化都会引起我们mixins和vuejs的变化,那么我们验证了第一个问题就是mixins的执行顺序的问题,当存在相同钩子函数的时候,mixins是优先执行的。

mixins函数覆盖问题

看源码
<template>
  <div class="hello">
    <input v-model="name" />
    <button @click="func_name()">点击</button>
  </div>
</template>

<script>
//验证调用先后顺序
var watchcount = {
  methods: {
    func_name() {
      console.info(this.count + "我是mixin里面的method的方法");
    }
  },
};
export default {
  name: "HelloWorld",
  data() {
    return {
      count: 0,
      name: "",
      message : '您好,我是来自原生vue内容'
    };
  },
  mixins: [watchcount],
  methods: {
    func_name() {
      console.info(this.count + "我是原生vue里面的method的方法");
    }
  },
  watch: {
    name: function(newval, oldval) {
      this.count++;
    }
  }
};
 
执行结果

0我是原生vue里面的method的方法

结果分析

由于上面的已经将样式什么的全部贴了上来,所以这个例子就不贴样式了,自己测试的时候自己加上就可以了,这里我们说一下现象,我们可以看到的就是当我们同时使用两个同名函数的时候呢,会出现一个问题就是我们的mixins里面的函数被覆盖掉了,这个是需要注意的点。

mixins变量替换合并问题

看源码
<template>
  <div class="hello">
    <input v-model="name" />
    <button @click="func_name()">点击</button>
  </div>
</template>

<script>
//验证同名合并性
var minxin_data = {
  data : function() {
    return {
      message : '您好,我是来自minxins',
      sex : "男"
    }
  }
}
export default {
  name: "HelloWorld",
  data() {
    return {
      count: 0,
      name: "",
      message : '您好,我是来自原生vue内容'
    };
  },
  mixins: [minxin_data],
  created() {
    console.info(this.$data)
  },
  watch: {
    name: function(newval, oldval) {
      this.count++;
    }
  }
};
</script>
 
执行结果

count: 0
name: “”
message: “您好,我是来自原生vue内容”
sex: “男”

结果分析

我们可以看到,上面我在mixins里直接定义了message和sex,我在下面的vue实例中也定义了一个message和name、count这几个,我们要验证的是同名的会怎么样,不同名的会怎么样,结果给我们的信息是同名的会被vue里面的覆盖掉,不同名的会被加到一个新的数组里面。

全局引用mixin

  • 上面我们说的全部都是局部引用一个mixins,下面说一下怎么全局引用这个模块
新建一个mixinjs
let mixin = {
    data() {
        return {

        }
    },
    methods: {
        func_name() {
            console.info("我是来自全局的mixin")
        }
    },
};
export default mixin;
 
main.js注册
import Vue from 'vue'
import App from './App'
import Mixin from './states/mixins' //路径不要写错
import router from './router'
Vue.mixin(Mixin) //注册使用
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
 
组件直接使用
<template>
  <div class="hello">
    <input v-model="name" />
    <button @click="func_name()">点击</button>
  </div>
</template>
 
执行结果

我是来自全局的mixin
结果分析:这里我直接运行的,是可以的,前提是我将局部的和vue里面的全部都注释掉了该函数,也就是说我初步测试的结论是全局的是不比局部的优先执行的,但是网上给我的信息是全局是优先执行的,所以这个问题有待考证。这里还要注意的一个点是全局使用的是mixin是没有s的。

写到后面

  • 写到这里mixin的使用和遇到的基本的问题就写完了,但是这里简单的说一下,我们在使用的时候尽量使用我们的局部的,全局的可能会污染一些我们公共的组件中的功能,所以谨慎使用,分发路由的时候使用全局的还是很方便的。感谢您的阅读,喜欢的可以关注一下,一起交流讨论,也可以加我的微信进群,下篇文章见!

回复

我来回复
  • 暂无回复内容