vue混入

混入mixin用来分发 Vue 组件中的可复用功能。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

一个混入对象可以包含任意组件选项。（组件里有的混入对象也可以写，比如生命周期、钩子函数等。）

数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。（goudan、cuihua混入对象中均有msg，以组件里的msg优先展示。）

同名钩子函数将合并为一个数组，因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。多个混入对象时按照顺序执行钩子函数。

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

多个混入时，取后一个混入的同名内容。（goudan、cuihua都有test和run方法，因为goudan在后面，所以取goudan的test和run方法。）

ps：以上说明官网有，可自行查看。混入 — Vue.js

    <div id="app"></div>
    <script>
        // 定义一个混入对象
        let cuihua = {
            data(){
                return{
                    msg:"cuihua"
                }
            },
            methods: {
                test() {
                    console.log('cuihua-test')
                },
                run() {
                    console.log('cuihua-run')
                }
            },
            created() {
                console.log('调用cuihua混入对象的钩子函数')
            }
        }
        // 定义另一个混入对象
        let goudan = {
            data(){
                return{
                    msg:"goudan"
                }
            },
            methods: {
                test() {
                    console.log('goudan-test')
                },
                run() {
                    console.log('goudan-run')
                }
            },
            created() {
                console.log('调用goudan混入对象的钩子函数')
            }
        }
        
        let People = Vue.extend({
            mixins: [cuihua, goudan],
            template: `<div>
                    <p>{{msg}}</p>
                    <button @click="play">play</button>
                    <button @click="run">run</button>
                    <button @click="test">test</button>  
                </div>`,
            data() {
                return {
                    msg: '像风一样自由' 
                }
            },
            methods: {
                play() {
                    console.log('zj-play')
                }
            },
            created() {
                console.log('调用自身的钩子函数')
            }
        })

        new People().$mount("#app")
    </script>