Vue 混入 Mixins_Vue 入门教程-慕课网

此间少年_ · 更新于 2020-12-04

Vue动态组件 & keep-alive

Vue 自定义指令

1. 前言

本节介绍混入 (mixin) 的使用方法。包括什么是 mixin，如何定义 mixin，mixin 重名属性的合并策略，全局 mixin 的使用。其中，了解和掌握 mixin 重名属性的合并策略非常重要，属性合并问题会在 mixin 的使用中经常出现。在学完本小节之后，同学们可以尝试总结出属性的合并的规则策略，这有助于加深印象，在日后的使用中也能得心应手。

2. 慕课解释

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被 “混合” 进入该组件本身的选项。 – 官方定义

我们在日常开发中经常遇到多个页面或者功能模块有相同代码逻辑的情况，同学们在遇到此类情况的时候肯定会想：如果这段代码能够复用就好了！。那什么方法可以帮助我们实现复用呢？答案就是：Mixin！ Mixin 帮助我们抽离公共代码逻辑。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被 “混合” 进入该组件本身的选项。

3. 使用 mixin

接下来我一起看看如何定义和使用一个 mixin。

对于 mixin 的使用可以分为两部分：

定义 mixin
混入 mixin

3.1 定义一个 mixin

mixin 本质上就是一个 Object 对象，它和 vue 实例上的属性一致，包含 data、methods、computed、watch、生命周期函数等等：

var myMixin = {
  data(){
    return {
      //...
    }
  },
  created() {
     //...
  },
  methods: {
    //...
  },
  computed() {
    // ...
  }
}

3.2 混入 mixin

想要混入定义好的 mixin，只需要通过组件的 mixins 属性传入想要混入的 mixin 数组即可：

var vm = new Vue({
  el: '#app',
  mixins:[myMixin]
})

代码解释：
上述代码中，我们定义了一个 Vue 实例，并在实例上混入 myMixin。

接下来我们看一个简单的示例：

实例演示

预览复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    我是：{{name}}， 年龄：{{year}}
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  // 定义 mixin
  var myMixin = {
    data(){
      return {
        name: '句号'
      }
    },
    created: function () {
      this.mixinFun()
    },
    methods: {
      mixinFun: function () {
        console.log('mixin function')
      }
    }
  };
  var vm = new Vue({
    el: '#app',
    // 使用mixin
    mixins:[myMixin],
    data() {
    	return {
        year: '18'
      }
    }
  })
</script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
JS 代码第 3-17 行，定义了一个混入对象 myMixin，并定义了数据 data、钩子函数 created、方法 mixinFun。
JS 代码第 20 行，通过组件实例上的 mixins 属性引入 myMixin。

运行程序可以看到，在 myMixin 中定义的数据 name 渲染到页面上。同时打开控制台可以看到 ‘mixin function’ 被打印出来，说明 created 钩子函数被执行。

4. 选项合并

我们在定义 mixin 时会出现属性名重复的情况，例如：

var myMixin = {
  data() {
    return {
      name: 'Imooc'
    }
  },
  create() {
    console.log('Imooc')
  }
}

var vm = new Vue({
  data() {
    return {
      name: '句号'
    }
  },
  create() {
    console.log('句号')
  }
})

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行 “合并”。这些重复项的合并有固定的规则，接下来我们从三个方面来详细讲解选项合并的规则。

4.1 data 的合并

数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。详细的合并规则如下：

首先判断 mixin 中的数据类型和组件实例对象上的数据类型是否相同；
如果不同，组件实例上的数据将覆盖 mixin 上的数据；
如果相同，判断是否为 Object 的数据格式；
如果不是 Object 的数据格式，组件实例上的数据将覆盖 mixin 上的数据；
如果是 Object 的数据格式，从第一步开始循环判断 Object 的每一个属性。
具体示例：

实例演示

预览复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var myMixin = {
    data(){
      return {
        isOpen: false,
        date: '2020-02-02',
        desc: {
          title: 'Mixins 基础教程',
          desc: '本教程将讲解如何使用 mixins',
          author: {
            name: '慕课网',
            location: '北京'
          }
        }
      }
    }
  };
  var vm = new Vue({
    el: '#app',
    mixins:[myMixin],
    data() {
    	return {
        isOpen: true,
        date: new Date().toLocaleString(),
        desc: {
          author: {
            name: 'Imooc',
            age: '20'
          }
        }
      }
    },
    created() {
      console.log(this.data)
    }
  })
</script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
JS 代码第 3-15 行，定义了一个混入对象 myMixin，并定义了数据 data。
JS 代码第 18 行，通过组件实例上的 mixins 属性引入 myMixin。
JS 代码第 19-30 行，定义了组件实例上的数据 data。
根据之前我们学习的合并规则，得到的最终数据 data 格式如下：

data() {
  return {
    isOpen: true,
    date: new Date().toLocaleString(),
    desc: {
      author: {
        name: 'Imooc',
        age: '20',
        location: '北京'
      }
    }
  }
}

4.2 钩子的合并

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。也就是说，如果我们在 mixin 和组件中都定义了钩子函数 created，那么 mixin 和组件中的函数都会被执行。需要注意的是：mixin 中的钩子函数将在组件的钩子函数之前执行。
具体示例：

实例演示

预览复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    mixin 示例
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var myMixin = {
    created() {
      alert('mixin created 先执行')
    }
  };
  var vm = new Vue({
    el: '#app',
    mixins:[myMixin],
    created() {
      alert('组件 created 后执行')
    }
  })
</script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
JS 代码第 3-7 行，定义了一个混入对象 myMixin，并定义了钩子函数 created。
JS 代码第 10 行，混入定义的 myMixin。
JS 代码第 11-13 行，在组件内部定义了钩子函数 created。
所以，最终的运行结果是：
mixin created 执行
组件 created 执行

4.3 值为对象的选项合并

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

示例：

实例演示

预览复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    mixin 示例
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  var myMixin = {
    methods: {
      sayName() {
        console.log('我是慕课网')
      },
      sayHello() {
        console.log('hello 大家好')
      }
    }
  };
  var vm = new Vue({
    el: '#app',
    mixins:[myMixin],
    methods: {
      sayName() {
        console.log('我是句号')
      },
      sayYear() {
        console.log('我的年龄是：18')
      }
    }
  })
  vm.sayName() // ---> 我是句号
  vm.sayHello() // ---> hello 大家好
  vm.sayYear() // ---> 我的年龄是：18
</script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
JS 代码第 3-12 行，定义了一个混入对象 myMixin，并定义了两个方法。
JS 代码第 15 行，混入定义的 myMixin。
JS 代码第 16-23 行，在组件内部定义了两个方法。
由于值为对象的选项合并取组件对象的键值对。所以，最终的 methods 对象是：

methods: {
  sayName() {
    console.log('我是句号')
  },
  sayYear() {
    console.log('我的年龄是：18')
  },
  sayHello() {
    console.log('hello 大家好')
  }
}

5. 全局混入

混入也可以进行全局注册。使用时需要格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。通过 Vue.mixin ({…}) 可以注册全局混入：

Vue.mixin({
  data: {
    name: "Imooc"
  }
})

具体示例：

实例演示

预览复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    mixin 全局混入 示例
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.mixin({
    created() {
      console.log('全局mixin created')
    },
    methods: {
      sayHello() {
        console.log('hello 大家好')
      }
    }
  })

  var vm = new Vue({
    el: '#app'
  })
  vm.sayHello()
</script>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

代码解释：
JS 代码第 3-12 行，定义了一个全局混入对象，并定义了钩子函数 created 和 sayHello 方法。
JS 代码第 14-16 行，创建了 Vue 实例。

因为全局混入会在之后创建的每一个 Vue 实例上混入，所以，控制台会输出以下数据：
全局 mixin created
hello 大家好

6. 小结

本节，我们带大家学习了混入 mixin 在 vue 项目中的运用。主要知识点有以下几点：

Mixin 的定义和使用方法。
Mixin 选项的合并策略。
全局 Mixin 的注册和使用。

Vue动态组件 & keep-alive

Vue 自定义指令

我要提出意见反馈

热搜

最近搜索 清空

我的购物车

已加入门课程

购物车里空空如也

Vue 入门教程

前端开发

JavaScript

JavaScript 入门教程

TypeScript 入门教程

Vue 入门教程

Ajax 入门教程

ES6-10 入门教程

Yarn 入门教程

ECharts 入门教程

HTML & CSS

CSS3 入门教程

雪碧图入门教程

移动端布局教程

Html5 入门教程

Sass 入门教程

HTML 入门教程

canvas 入门教程

uni-app 入门教程

服务端相关

服务器

Nginx 入门教程

HTTP 入门教程

Docker 入门教程

Shell 入门教程

Linux 入门教程

开发工具

Gradle 入门教程

Vim 编辑器教程

RESTful 规范教程

Dreamweaver 教程

Markdown 入门教程

Maven 入门教程

Eclipse 编辑器教程

GitHub 入门教程

Android Studio 编辑器教程

PyCharm 编辑器教程

Sublime Text 使用教程

Postman 教程

Git入门教程

热门服务端语言

C 语言入门教程

Go 入门教程

Kotlin 教程

Ruby 入门教程

ThinkPHP 入门教程

Java

基础应用

Java 入门教程

Android 入门教程

算法入门教程

数据结构入门教程

Lambda 表达式教程

Java 并发原理入门教程

设计模式入门教程

Java并发工具

JVM 入门教程

RabbitMQ 入门教程

网络编程入门教程

后端通用面试教程

框架应用

Spring Boot 入门教程

Spring 入门教程

Hibernate 入门教程

MyBatis 入门教程

Spring MVC 入门教程

Swagger 入门教程

Zookeeper 入门教程

Netty 教程

Spring Security

微服务

Spring Cloud Hystrix

Python

基础应用

Python 入门语法教程

最近搜索清空

4.2 钩子的合并