mixins

概述

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

组件选项：
数据data\props\computed\methods\watch、
DOM/el\template、生命周期钩子等

简单举例

// 定义 myMixin.js
export const myMixin = {
    data() {
        return {
            num: 1
        }
    },
    
    created() {
        this.sayHi()
    },
    
    methods: {
        sayHi() {
            console.log("Hi, from myMixin")
        },
        
        test1() {
            console.log("test1 from myMixin")
        },
        
        handleAsync1() {
            new Promise((resolve, reject) => {
              let a = 'async_1'
              setTimeout(() => {
                resolve(a)
              }, 500)
            }).then(res => {
              return res
            })
          },

          handleAsync2() {
            let res = new Promise((resolve, reject) => {
              let a = 'async_2'
              setTimeout(() => {
                resolve(a)
              }, 500)
            })
            return res
          },
    }
}

// 在需要的组件中引入并使用
<script>
    import {myMixin} from '@/assets/mixin.js'
    
    export default {
        mixins: [myMixin],
        
        created() {
            this.test1()
            this.test2()
        },
        
        mounted() {
          console.log("处理混入中的异步1==>", this.handleAsync1()) // undefined   
          this.handleAsync2().then(res => {
            console.log("处理混入中的异步2==>", res)    // async_2
          })
        },
        
        methods: {
            test1() {
                console.log('test1 from template')
            },
            test2() {
                console.log('test2 from template')
            }
        }
    }
</script>

小结

• 如果我们在组件1 和 组件2 中都使用了同一个混合对象（myMixin.js），在不同的组件上混合对象的方法和参数是不共享的，即在组件1 中对num++操作，不会影响组件2 中的num仍是值为1。

• 值为对象的选项，如methods、components等，选项会被合并，如果存在冲突，则组件会覆盖混入对象中的方法。
  值为函数的选型，如created、mounted等，则会被合并使用，且混合对象中的钩子函数会先被调用。

• 当混合里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们会取不到此返回值（如混入示例的方法handleAsync1），解决方法是不要返回结果而是直接返回异步函数（如混入中的方法handleAsync2）

与vuex的区别

• vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
• Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

与公共组件的区别

• 组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
• Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。
• 单纯组件引用：父组件 + 子组件 ==> 父组件+子组件
  mixins：父组件 + 子组件 ==> new父组件