# vue 汇总

let obj = {
    age:'12',
    data:{
        name:'3333333'
    }
}
function observer(obj){
    if(typeof obj === 'object'){
        for(let key in obj){
            defineReactive(obj,key,obj[key])
        }
    }
}
function defineReactive(obj,key,value){
    // 如果value 是一个对象  则递归
    observer(value)
    Object.defineProperty(obj,key,{
        get(){
            console.log('get')
            return value
        },
        set(item){
            // 如果传入的值 是一个对象,也要拦截下
            observer(item)
            console.log('1数据更新了',item)
            value = item
        }
    })
}
observer(obj)

  obj.data= {
      s:"123"
  }

  obj.arr = [1,2,3,4] 
  let arr = ['push','pop','shift','unshfit'] //dengdeng
  for (let i=0;i<arr.length;i++){
      let method = arr[i]
      let oldPush = Array.prototype[method]
      Array.prototype[method] = function(item){
          console.log('2数据更新了');
          oldPush.call(this,item)
      }
  }
  obj.arr[1] = '123'
  obj.arr.push(5) //如不改写,不会触发数据更新 

  //:key解析 
  <div v-if="flag">
    <span>测试1</span>
    <input type="text" :key='1' />
  </div>
  <div v-else>
    <span>测试2</span>
    <input type="text" :key='2' />
  </div>

  //如果不加key 那么flag 值变化的时候 input不会更新
  //加key 在diff 比较的时候 以便区别,用来区分元素
  //一般不用index作为key

  // 如果fn不传值 方法里面默认参数就是e, 如果传值 fn($event,a) $event也是e 固定写法 a就是别的参数 
  <input type="text" @input="fn" class="ss">

  //输入的数值 只要3个
  <input type="text" v-model='msg' v-split.xx='msg' />
    Vue.directive('split',function(el,bindings,vnode){
      let ctx = vnode.context;//获取上下文
      ctx[bindings.expression] = el.value.slice(0,3) 
    }
  })

  <input type="text"  v-split.xx='msg' />
  //下面增加了v-model='msg'
  Vue.directive('split',{
    bind(el,bindings,vnode){
      //el 当前dom bindings申明指令的参数 vnode.context上下文
      let ctx = vnode.context;
      el.addEventListener('input',(e)=>{
        let val = e.target.value.slice(0,3);//输入框中的内容 
        ctx[bindings.expression] = val //将输入的值复制给当前的msg
        el.value = val
      })
      el.value = ctx[bindings.expression].slice(0,3)
    }
  })

  // 获取焦点
  Vue.directive('focus',{
    bind(el){
      Vue.nextTick(()=>{
        el.focus();
      })
    }
  })

{{name | capitalize(1)}}
Vue.filter('capitalize',(value,val)=>{
    console.log('canshu',value,val)
    return value
})

// class 绑定 对象时 isRed为ture class才为red 数组时 可以显示多个
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

 watch:{
  //全写
  firstMsg:{
      handler(){
          console.log('firstMsg 变化了')
      },
      immediate:true,//绑定的时候 立即执行(默认不会)
  },
  //简写
  lastMsg(){
      console.log('lastMsg 变化了')
  }
  },

//全选 用computed做
<input type="checkbox" v-model='checkAll'>
<input type="checkbox" v-for='(check,index) in checks' :key='index' v-model='check.value' >
computed:{
// Object.defineProperty来实现

// 全写 computed的set方法在 checkbox 能用到
// 当checkbox 被点击的时候 触发set()
checkAll:{
    get (){
        return this.checks.every(item => item.value)
    },
    set(val){
        this.checks.forEach(item =>{ item.value = val });
    }
}
},

module.exports = {
  runtimeCompiler:true
}

// 多个的话 后面接数组
render:h=>h('h1',{
  class:{a:1},
  style:{color:'red'},
  on:{click(){alret(1)}},
  attrs:{a:1}
},'word')
// 也可以直接接收一个组件或对象 是组件他会将组件解析成对象 App是一个组件
render:h=>h(App)
//  jsx语法 内部自动调用h 名字还只能传递h 尽量不要写箭头函数
render:function(h){
  console.log(h)
  // say方法要提前写好
  return <h1 
    on-click={()=>this.say()}
    class = 'a'
    style={{color:'red'}}
    >点我啊</h1>
}

export default  {
    functional: true, // 函数式组件 只有render方法不能写template , 设置了他 context才能获取到上下文
    render(h,context){
      // 获取组件内的值  context.slots().default
      console.log(context.slots().default)
      // 获取传递过来的属性 context.props
      return <div>{context.slots().default}</div>
    }
}

  beforeCreate(){
      //初始化自己的生命周期 获取children 和 parent,并且绑定自己的事件
      //不能操作属性和方法
      console.log(this,this.$data)
  },
  created(){
    // 可以获取数据和调用方法
    // 没有this.$el 不能获取真实dom
      console.log(this.$data,this.data)
  },
  beforeMount(){
      //第一次调用 函数渲染之前
      //会检测template数据,有的话会把template渲染成一个 render函数
      console.log('挂载前')
  },
  // template和 render 同时存在的时候 以render数据为准
  //template会调用render函数 render里面创建一个虚拟dom  最后将虚拟dom渲染成真实的dom
  render(createElement){
    // createElement就是一个虚拟dom
    return createElement('div',{
      attr:{
        id:123
        },
      on:{
        click(){
          console.log('111')
        }
      }
      },'hello')
  }
  mounted(){
      //获取真是的dom this.$el
      console.log('挂载后')
  },
  beforeUpdate(){
      console.log('更新前')
  },
  updated(){//一般不要操作数据 可能会导致死循环
      console.log('更新后')
  },
  beforeDestroy(){
      //当前实例还可以用,这儿一般清除定时器 
      // 移除绑定的方法事件
      console.log('销毁前')
  },
  destroyed(){
      // 实例上的方法 监听都被移除掉
      console.log('销毁后')
  },
  //触发 销毁 第一种路由切换 第二种 vm.$destroy()
  // 销毁 只是针对响应式的数据 绑定的方法事件

// 全局组件 在任何组件中可以直接使用 而且不需要引入 
// 
Vue.component('my-button',{
  data(){
    return{

    }
  }
  template:`<button>点击</button>`
})
let vm = new Vue({el:'#app'})
// 不能写但标签  有bug 而且不符合w3c规范 
<div>
  <my-button></my-button>
</div>

  props:{
    msg:{
        type:Number,
        default:123
    },
    arr:{
        type:Array,
        // 数组或者对象 必须写成函数返回的形式
        default:()=>([1,3])
    },
    a:{
        type:Number,
        validator(val){
            //属性校验器,val就是传递过来的值 
            //true说明正常 false说明传值不满足
            return true
        }
    }
  },

//子组件 methods
change(){
  this.$parent.cut(this._uid)
}
//父组件 methods
cut(id){
  this.$children.forEach(child => {
    if(child._uid == id){
      //  可以确定是哪一个子组件
      //  对child做处理
    }
  })
}

  //和data 同级
  // 申明
  provide:{
      m1:'根组件提供'
  },
  // 获取
  inject:['m1']

  // 声明
  <div ref="my">dom</div>
  //获取
  this.$refs.my // 当前dom

  // 循环
  <div v-for='item in 3'>
      <div ref='my'>12</div>
  </div>
  this.$refs.my //[div, div, div]

  //组件上添加ref
  <Item ref="my"></Item>
  this.$refs.my //就是当前组件的实例 可以调取里面的方法

// <div @click="btn">点击</div>
// <transition>  
//   <!-- 第一步 添加animated类 -->
//     <div class="show animated" v-show="isShow">
//     </div>
// </transition>

  // data(){
  //     return {
  //       isShow : true
  //     }
  //   },
  // methods:{
  //   btn(){
  //     this.isShow = !this.isShow
  //   }
  // }

//   .show{
//   border: 1px solid red;
//   background: red;
//   width: 100px;
//   height: 100px;
// }
// /* .v-enter {
//   opacity: 0;
// } */
// .v-enter-active{
//   animation: bounceIn 1s ease-in
// }
// .v-leave-active{
//   animation: bounceOut 1s ease-in
// }

  // 全局安装脚手架
  cnpm  i @vue/cli -g
  // 零配置 写测试用
  // 创建 .vue文件直接运行
  // 运行vue serve 文件名字/或者不写
  cnpm i @vue/cli-service-global -g

  // 生成项目
  vue create my-project

let path = require('path')
// 默认环境变量 NODE_ENV production development
module.exports = {
  //根据环境 设置请求路径
  publicPath:process.env.NODE_ENV === 'production' ? 'http://www.zf.com':'/',
  //打包的资源 集中放到一个独立文件
  assetsDir:'asserts',
  // 输出的目录 默认dist
  outputDir:'./my-dist',
  // 加这个才能使用template(一般都是render)  一般不使用体积会变大 设置false
  runtimeCompiler:true,
  // 打包 不在使用SourceMap 减少体积
  productionSourceMap:false,
  chainWebpack:config=>{
    //  可以获取到webpack的配置 在增加一些自己的功能
    //  配置目录别名 别名叫@   以后引用的@ 就直接代表src目录
    config.resolve.alias.set('@',path.resolve(__dirname,'src'))
  },
  // configureWebpack:{//会自动合并
  //   pluhins:[],
  //   module:{}
  // },
  devServer:{
    //开发 服务时 使用
    proxy:{
      '/api/getUser':{
        target:'http://localhost:3000',
        pathRewrite:{
          //vue中 请求 /api/getUser会找到这儿
          //下面配置 /api不会出现在真是请求路径中
          '/api':''
        }
      }
    }
  },
  // vue add style-resources-loader 会自动注入进来
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        path.resolve(__dirname,'src/assets/common.scss')
      ]
    }
  }
}

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import routes from './routes'
  // 第三方插件引入后 要使用Vue.use() 

  Vue.use(VueRouter);// 注册了两个全局组件 router-link router-view
  // 会在每个组件上定义两个属性 $router $route this.$router this.$route

  export default new VueRouter({
    mode:'hash', //默认会出现一个#
    routes
  })

import Home from '_v/Home.vue'
import Profile from '_v/Profile.vue'
import User from '_v/User.vue'
// 默认加载首页 其他的组件 在点击时懒加载
// 可能会有白屏
export default = [
  {
    path:'/home',
    name:'home',
    component:{
      default:Home,
      name:Profile,
      version:User
    }
  },
  {
    path:'/login',
    name:'login',
    // import返回的是一个 promise
    component:()=>import('_v/Login.vue')
    // component 其他的组件 在点击时懒加载
  },
  {
    path:'/profile',
    name:'profile',
    component:()=>import('_v/Profile.vue'),
  },
  {
    path:'/user',
    name:'user',
    component:()=>import('_v/User.vue'),
    meta:{ needLogin:true },//路由元信息
    children:[
      {
        path:'',
        component:()=>import('_v/userAdd.vue'),
      },
      {
        // 儿子路径默认不能j加/ 
        path:'add',
        name:'userAdd',
        component:()=>import('_v/userAdd.vue'),
      }
    ]
  },
]

//修改配置别名
chainWebpack:config=>{
  config.resolve.alias.set('_v',path.resolve(__dirname,'src/components'))
}

  /*
  1、导航被触发。
  2、在失活的组件里调用离开守卫。
  3、调用全局的 beforeEach 守卫。
  4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5、在路由配置里调用 beforeEnter。
  6、解析异步路由组件。
  7、在被激活的组件里调用 beforeRouteEnter。
  8、调用全局的 beforeResolve 守卫 (2.5+)。
  9、导航被确认。
  10、调用全局的 afterEach 钩子。
  11、触发 DOM 更新。
  12、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

  import Vue from 'vue';
  import vuex from 'vuex';

  import actions from './actions'
  import mutations from './mutations'
  import state from './state'
  import getters from './getters'

  import user from './modules/user'

  Vue.use(vuex)
  // 只要页面中注入了store 每个实例上都会存在一个属性 $store
  export default new vuex.Store({
    strict:process.env.NODE_ENV != 'production',// 校验更改状态的合法性
    actions,
    mutations,
    state,
    getters,
    modules:{
      user
    }
  })
  // this.$store.state.lesson
  // this.$store.state.user.userName

  // state
  export default {
    lesson:'测试课程',
    className:'1-1'
  }
  // getters
  export default {
    getNewName(state){
      return '高级'+state.lesson
    }
  }
  // mutations 和 store/modules/user.js类似
  export default {
    
  }
  // actions
  export default {
    
  }

export default {
  namespaced: true, //启动 独立的命名空间
  state: {
    userName: 'userName'
  },
  getters: {

  },
  mutations: {
    // 第一个参数永远是state
    change_userName(state,payload) {
      // alert(1)
      state.userName = payload
      console.log(state,payload)
    }
  },
  actions: {
    change_userNameAction({commit},payload){
        setTimeout(()=>{
          commit('change_userName',payload)
          //在action中可以多次触发mutations
        },1000)
    }
  }
}

  // 只要页面中注入了store 每个实例上都会存在一个属性 $store
  import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
  computed:{
    // 默认的
    ...mapState(['lesson','className']),
    // user 是子模块的名字
    ...mapState('user',['userName']),
    //第二个参数是对象 当前直接 获取 u 
    // ...mapState('user',{u:(state)=>state.userName})
    ...mapGetters(['getNewName'])
  },
  methods: {
    ...mapMutations('user',['change_userName']),
    ...mapActions('user',['change_userNameAction']),
    btn(){
      this['change_userName']('sg')
      this['change_userNameAction']('sgt')
      // this.$store.commit('user/change_userName','jwt')
      // this.$store.dispatch('user/change_userName','jwt')
    }
  },

let express = require('express')
let app = express()
//jwt jsonwebtoken的库
// jwt.sign 加密 jwt.verify解密
let jwt = require('jsonwebtoken')

var bodyParser = require('body-parser');//解析,用req.body获取post参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

let whitList = ['http://localhost:8080']
app.use((req,res,next)=>{
    let origin = req.headers.origin
     if(whitList.includes(origin)){
        res.setHeader('Access-Control-Allow-Origin',origin)
        res.setHeader('Access-Control-Allow-Headers','name,xx,Authorization,Content-Type')
        res.setHeader('Access-Control-Allow-Methods','PUT')
        res.setHeader('Access-Control-Allow-Credentials',true)
        res.setHeader('Access-Control-Expose-Headers','name,ss,xx')
        res.setHeader('Access-Control-Max-Age',10)
        if(req.method === 'options'){
            res.end()
        }
    }
    next()
})

app.get('/user',(req,res)=>{
  setTimeout(()=>{
    res.json({name:1})
  },2500)
})
const secret = 'cf'
app.post('/login',(req,res)=>{
  let {username} = req.body
  if(username === 'admin'){
    res.json({
      code:0,
      username:'admin',
      //加密 发送给前端
      token:jwt.sign({username:'admin'},secret,{
        expiresIn:5
      })
    })
  }else{
    res.json({
      code:1,
      data:'用户名不存在'
    })
  }
})

app.get('/validate',(req,res)=>{
  let token = req.headers.authorization;
  //解密 获取token
  jwt.verify(token,secret,(err,decode)=>{
    if(err){
      return res.json({
        code:1,
        data:'token失效了'
      })
    }else{
      // 只要用户路由刷新 token就延时 20秒  
      res.json({
        username:decode.username,
        code:0,
        token:jwt.sign({username:'admin'},secret,{
          expiresIn:20
        })
      })
    }
  })
})

app.listen(3000,()=>{
    console.log('listen start')
})

  import axios from 'axios';
  import store from '../store'
  import {getLocal} from './local'
  // 当第一次请求 显示loding 剩下的时候就不调用了
  // 当都请求完毕后 隐藏loading
  class AjaxRequest{
    constructor(){
      //  请求路径 根据开发和生产区分
      this.baseURL = process.env.NODE_ENV == 'production'?'/':'http://localhost:3000';
      //  超时
      this.timeout = 3000;
      this.queue = {};//存放每次的请求 处理loading
    }
    merge(options){
      return {...options,baseURL:this.baseURL,timeout:this.timeout}
    }
    setInterceptor(instance,url){
      // 每次请求时 都会加一个loading效果 
      // 更改请求头
      instance.interceptors.request.use(config=>{
        // 加请求头 getLocal从本地存储获取token
        config.headers.Authorization=getLocal('token');
        if(Object.keys(this.queue).length === 0){
          store.commit('showLoading')
        }
        this.queue[url] = url
        return config
      })
      instance.interceptors.response.use(res=>{
        delete this.queue[url]; // 每次请求成功后 都删除队列里的路径
        if(Object.keys(this.queue).length === 0){
          store.commit('hideLoading')
        }
        return res.data
      })
    }
    request(options){
      // 返回axios实例
      let instance = axios.create(config);
      // 对请求和拦截做处理
      this.setInterceptor(instance,options.url)
      // 将所有的参数合并
      let config = this.merge(options);
      return instance(config)
    }
  }
export default new AjaxRequest

import axios from '../libs/ajaxRequest';

export const getUser = () => {
  return axios.request({
    url:'/user',
    method:'get'
  })
};

export const login = (username) => {
  return axios.request({
    url:'/login',
    method:'post',
    data:{
      username
    }
  })
}

export const validate = () => {
  return axios.request({
    url:'/validate',
    method:'get',
  })
}

export const setLocal = (key,value)=>{
  if(typeof value == 'object'){
    value = JSON.stringify(value);
  }
  localStorage.setItem(key,value)
}

export const getLocal = (key)=>{
 return localStorage.getItem(key)
}

import {login,validate} from '../api/user'
import {setLocal} from '../libs/local'
export default {
  namespaced: true, //启动 独立的命名空间
  state: {
    isShowLoading:false,
    username:'',
  },
  getters: {

  },
  mutations: {
    // 第一个参数永远是state
    showLoading(state){
      state.isShowLoading = true
    },
    hideLoading(state){
      state.isShowLoading = false
    },
    setUser(state,username){
      state.username = username;
    }
  },
  actions: {
    // 登录获取token
    async toLogin({commit},username){
      let rs = await login(username);
      if(rs.code === 0){
        //成功登录
        commit('setUser',rs.username)
        //将token保存到client 每次请求带上, 服务端校验token 如果token不正确 或者过期 没登录
        setLocal('token',rs.token)
      }else{
        return Promise.reject(rs.data)
      }
    },
    //查看 token是否有效
    async validate({commit}){
      let rs = await validate();
      if(rs.code === 0){
        commit('setUser',rs.username)
        setLocal('token',rs.token)
      }
      return rs.code === 0;//返回用户是否失效
    }
  }
}

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '_v/Home.vue'
import App from './App'

Vue.use(VueRouter);
export default new VueRouter({
  mode:'hash', //默认会出现一个#
  routes:[
    {
      path:'/',
      name:'App',
      component:App
    },
    {
      path:'/login',
      name:'login',
      // import返回的是一个promise
      component:()=>import('_v/Login.vue')
    },
    {
      path:'/profile',
      name:'profile',
      component:()=>import('_v/Profile.vue'),
    },
    {
      path:'/user',
      name:'user',
      component:()=>import('_v/User.vue'),
      meta:{ needLogin:true },//路由元信息
      children:[
        {
          path:'',
          component:()=>import('_v/userAdd.vue'),//$route.matched
        },
        {
          // 儿子路径默认不能j加/ 
          path:'add',
          name:'userAdd',
          component:()=>import('_v/userAdd.vue'),
        }
      ]
    },
  ]
})

import Vue from 'vue'
import App from './App.vue'

import store from './store/index'
import router from './router'

Vue.config.productionTip = false

router.beforeEach(async (to,from,next)=>{
  // 根据router 配置的meta是否需要登录 在查看是否有效
  let flag = to.matched.some(match=>{
    return match.meta && match.meta.needLogin
  })

  if(flag){ //需要登录
    let rs =  await store.dispatch('validate')//根据rs返回的数据 查看tikon是否有效
    if(rs){
      //如果用户已经登录 并且访问 的还是登录页面
      next();
    }else{
      next('/login');//没有登录 去登录页面 
    }
  }else{ //不需要登录
    next();
  }
  next()
})

new Vue({
  render: h => h(App),
  store,
  router
}).$mount('#app')

<span v-if="$store.state.isShowLoading"> 加载中 </span>
<router-view></router-view>

<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

输入 => <p>Walter White aka Heisenberg</p>

let Vue;
class Store{ // state getters mutations actions
  constructor(options){
    let state = options.state // {count:100}
    this.getters = {}
    this.mutations = {}
    this.actions = {}
    // vue核心就借用了vue的实例 因为vue的实例数据变化 会刷新视图
    this._vm = new Vue({
      data:{
        state
      }
    });
    if(options.getters){
      let getters = options.getters;// {newCount:fn}
      forEach(getters,(getterName,getterFn)=>{
        Object.defineProperty(this.getters,getterName,{
          get:()=>{
            return getterFn(state)
          }
        })
      });
      let mutations = options.mutations
      forEach(mutations,(mutationName,mutationFn)=>{
        // this.mutations.change = ()=>{ change(state) }
        this.mutations[mutationName] = ()=>{
          mutationFn.call(this,state)
        }
      })
      let actions = options.actions
      forEach(actions,(actionName,actionFn)=>{
        // this.mutations.change = ()=>{ change(state) }
        this.actions[actionName] = ()=>{
          actionFn.call(this,this)
        }
      })
    }
    let {commit,dispatch} = this;
    this.commit = (type) => {
      commit.call(this,type)
    }
    this.dispatch = (type) => {
      dispatch.call(this,type)
    }
  }
  get state(){
    return this._vm.state
  }
  commit(type){
    this.mutations[type]()
  }
  dispatch(type){
    this.actions[type]()
  }
}
function forEach(obj,callback){
  Object.keys(obj).forEach(item=>callback(item,obj[item]))
}


let install = (_Vue) =>{
  Vue = _Vue;// 保留vue的构造函数
  // mixin 全局混入 只要组件(main也是组件)生成 beforeCreate就会执行一次
  // beforeCreate  里面的this就是获取当前组件
  Vue.mixin({ //混合
    beforeCreate() {
      // console.log(' beforeCreate 12',this.$options)
      // 我需要把跟组件中 store实例 给每个组件都增加一个$store的属性
      // 是否是跟组件
      if(this.$options && this.$options.store){
        console.log('1',this.$options.store)
        this.$store = this.$options.store
      }else{ // 子组件 store 深度优先 父->子->孙
        console.log('this.$store',this.$options.data)
        this.$store = this.$parent && this.$parent.$store
      }
    },

  })
}
export default {
  Store,
  install
}

class ModuleCollection{
  constructor(options){// vuex [a,b]
    this.register([],options);
  };
  register(path,rawModule){
    // path 是个空数组 rawModule就是一个对象
    let newModule = {
      _raw:rawModule,// 对象 当前 有state getters 那个对象
      _children:{}, // 表示 他包含的模块
      state:rawModule.state //他自己模块的状态
    }
    if(path.length == 0){
      this.root = newModule; // 根
    }else{
      let parent = path.slice(0,-1).reduce((root,current)=>{
        return root._children[current];
      },this.root)
      // path[path.length-1] 取数组的最后一项
      parent._children[path[path.length-1]] = newModule
    }
    if(rawModule.modules){ // 有子模块
      forEach(rawModule.modules,(childName,module)=>{
        this.register(path.concat(childName),module)
      })
    }
  }
}

class Store{ // state getters mutations actions
  constructor(options){
    let state = options.state // {count:100}
    this.getters = {}
    this.mutations = {}
    this.actions = {}
    // vue核心就借用了vue的实例 因为vue的实例数据变化 会刷新视图
    this._vm = new Vue({
      data:{
        state
      }
    });

    // 把模块之间的关系 进行整理 自己根据用户传入的参数维护了一个对象
    // root._children => a._children => b
    this.modules = new ModuleCollection(options);
    // 无论是子模块 还是孙子 所有的mutation 都是根上的
    。。。。。。。。。。。。。。。。。。。。。。。
  }

const getYearMonthDay = (date) => {
    let year = date.getFullYear()
    let month = date.getMonth()+1
    let day = date.getDate()
    return {year,month,day}
}
const getDate = (year,month,day)=>{
  return new Date(year,month-1,day)
}
export {
  getYearMonthDay,
  getDate
}

import Message from './components/Message'
let info = {a:1,b:2}
Vue.use(Message)
new Vue({
  router,
  store,
  info,
  // template:`<div>123</div>`,
  render: h => h(App)
}).$mount('#app')

import Vue from 'vue';
import MessageComponent from './Message.vue'
// 获取当前组件的实例
let getInstance = ()=>{
  let vm = new Vue({
    render:h=>h(MessageComponent)
  }).$mount(''); //会在内存中进行挂载
  document.body.appendChild(vm.$el);

  // 获取他的儿子,就一个儿子
  let component = vm.$children[0]
  return {
    add(options){
      component.add(options)
    }
  }
  // vm
}
// 单例模式
let instance;
let getInst = ()=>{ //返回一个唯一的实例
  instance = instance || getInstance()
  return instance
}
const Message = {
  info(options){
    getInst().add(options)
  },
  warn(){

  },
  success(){

  },
  error(){

  }
}
export {
  Message
}
let _Vue;
export default{
  install(Vue,options){
    // options 代表的是use的第二个参数
    if(!_Vue){
      // 防止用户多次use
      _Vue = Vue
      let $message = {}
      Object.keys(Message).forEach(type=>{
        $message[type] = Message[type];
      })
      Vue.prototype.$message = $message
    }
    Vue.mixin({
      beforeCreate() {//所有组件都增加了这个方法
        if(this.$options.info){
          this._info = this.$options.info
        }else{
          this._info = this.$parent && this.$parent._info
        }
      },
    })
  }
}

1、被观察者供维护观察者的一系列方法
2、观察者提供更新接口
3、观察者把自己注册到被观察者里
4、在被观察者发生变化时候，调用观察者的更新方法

1、有发布者  调度中心 订阅者
2、订阅者把自己想订阅的事件 注册到调度中心
3、当该事件触发的时候,发布者发布该事件到调度中心,由调度中心统一调度订阅者注册到调度中心的代码处理

class Agent{
  constructor(){
    this._events = {}
  }
  // on
  subscribe(type,listener){
    let listeners = this._events[type]
    if(listeners){
      listeners.push(listener)
    }else{
      this._events[type] = [listener]
    }
  }
  // emit 
  publish(type){
    let listeners = this._events[type]
    let args = Array.prototype.slice.call(arguments,1)
    if(listeners){
      listeners.forEach(listener=>listener(...args))
    }
  }
}
// 房东
class LandLord{
  constructor(name){
    this.name = name
  }
  // 向外出租
  lend(agent,area,money){
    agent.publish('house',area,money)
  }
}
// 租客
class Tenant{
  constructor(name){
    this.name = name
  }
  rent(agent){
    agent.subscribe('house',(area,money)=>{
      console.log(`${this.name}看到中介的新房源${area},${money}`)
    })
  }
}

let agent = new Agent();
let t1 = new Tenant('张三');
let t2 = new Tenant('李四');
t1.rent (agent)
t2.rent (agent)
let landLord = new LandLord();
landLord.lend(agent,60,400)