<template>
    <div>
        <h1>{{ msg }}</h1>
        <h3>{{ name }}</h3>
        <h3>{{ age }}</h3>
        <button @click="printInfo">打印用户信息</button>
        <button @click="a()">a</button>
    </div>
</template>

<script>
// 混入不会造成破坏
// import {mix1} from '../mixin.js'
// import {mix2} from '../mixin.js'
// import {mix3} from '../mixin.js'
export default {
    name : "User",
    // 钩子函数不会被覆盖,会先执行mixin的方法,再执行钩子函数
    mounted(){
        console.log("User Mounted");
    },
    data(){
        return {
            msg : "用户信息",
            name : "张三",
            age : 20
        }
    },
    // mixins : [mix1,mix2,mix3],
    methods : {
        a(){
            console.log("Ua....")
        }
    }
}
</script>

<style>

</style>

export const mix1 = {
    methods : {
        printInfo(){
            console.log(this.name);
            console.log(this.age);
        }
    }
}

export const mix2 = {
    methods : {
        a(){
            console.log("Mix a....")
        }
    }
}

export const mix3 = {
    mounted(){
        console.log("mix Mounted");
    }
}

<template>
    <div>
        <h1>{{ msg }}</h1>
        <h3>{{ name }}</h3>
        <h3>{{ age }}</h3>
        <button @click="printInfo">打印用户信息</button>
        <button @click="a()">a</button>
    </div>
</template>

<script>
// import {mix1} from '../mixin.js';
// import {mix2} from '../mixin.js';
export default {
    name : "Vip",
    data(){
        return {
            msg : "会员信息",
            name : "李四",
            age : 20
        }
    },
    // mixins : [mix1,mix2],
    methods : {
        a(){
            console.log("Va....")
        }
    }
}
</script>

<style>

</style>

<template>
    <div>
        <Vip></Vip>
        <User></User>
    </div>
</template>

<script>
import Vip from './components/Vip.vue'
import User from './components/User.vue'
export default {
    components : {Vip,User},
    name : "App"
}
</script>

<style>

</style>

// 这句话就等同于我们写的<script src="vue.js">
// 这就是在引入vue
import Vue from 'vue';
// 然后下一步是导入我们的根组件
import App from './App.vue';
import {mix1} from './mixin.js';
import {mix2} from './mixin.js';
import {mix3} from './mixin.js';

//全局混入
Vue.mixin(mix1);
Vue.mixin(mix2);
Vue.mixin(mix3);

// 这是关闭生产提示信息
Vue.config.productionTip = false

// 创建VUE实例对象VM
new Vue({
  // 删除render函数就会导致报错
  // 因为没有可用的模板翻译器
  // 使用完整的vue.js或使用render函数才能解决这个问题
  // 为什么采用模板编译器的Vue.js放到脚手架呢?
  // 目的是减小体积,VUE.js包括两类,核心和模板编译器
  // 模板编译器可能占用vue.js体积的三分之一
  // 将来打包的时候,模板编译器没有存在的必要了
  // 体积大就会影响速度
  // render函数被自动调用,且会自动传过来一个参数
  // 这个参数是一个函数,createElement是一个函数
  // 这个函数可以用来创建元素
  // 用这个来创建元素就可以省掉我们的vue模板编译器了
  // render(createElement)
  // {
  //   return createElement(App);
  // }
  // 简写就是这个箭头函数
  render: h => h(App)
}).$mount('#app');
// 这里用的是$mount的方式绑定和el的方式是一样的