vue学习小结

1.vue.use()方法理解
vue使用第三方插件的时候都会用到vue.use()。比如vue.use(VueRouter)、vue.use(Vuex)、Vue.use(ElementUI);但是用axios的时候就不用vue.use(axios)而是直接使用。
原因是axios没有install
vue.use()源码：

export function toArray (list: any, start?: number): Array<any> {
  start = start || 0
  let i = list.length - start
  const ret: Array<any> = new Array(i)
  while (i--) {
    ret[i] = list[i + start]
  }
  return ret
}

import { toArray } from '../util/index'

export function initUse (Vue: GlobalAPI) {
/**
vue首先判断这个插件是否被注册过，不允许重复注册，接受的plugin参数只有Function和Object两种类型，对两种类型进行不同的处理。
*/

  Vue.use = function (plugin: Function | Object) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    //将传入的参数整理为数组
    const args = toArray(arguments, 1)
    //将vue对象添加在数组的起始位置，this指向vue对象
    args.unshift(this)
    //如果传入的plugin的install是一个方法，也就是传入了一个对象，对象中包括install方法，调用install方法并将整理好的数			组当成参数传入install方法
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}

2.vue的动态路由实现
3.keep-alive
vue的内置组件，当它包裹组件时，会缓存不活动的组件实例，而不是销毁他们。和transition相似，keep-alive是一个抽象组件，本身不会渲染dom元素，也不会出现在父组件中。
作用：在组件切换的过过程中将状态保留在内存里，防止dom重复渲染，减少加载时间及性能消耗
原理：
4.vue的mixin
当组件使用minin对象时，所有的mixin对象的选项都将混入该组件本身的选项。
1.选项合并：当组件和mixin对象同名选项是，会进行合并，当数据property发生冲突的时候，会以自身的组件数据优先。
2.同名钩子合并为一个数组mixin对象的钩子将在组件自身钩子之前调用。
3.全局mixin，可以为vue应用程序全局应用，也可以全局注册。
5.父子组件的所有传值方式
1.路由配置：使用children属性实现路由嵌套，嵌套的组件关系就是父子组件关系

{
      path: '/father',
      name: 'father',
      component: father,
      children: [
        {
          path: 'son',
          name: 'son',
          component: son
        }
      ] }

2.组件传值-父组件向子组件传值

{
      path: '/father',
      name: 'father',
      component: father,
      children: [
        {
          path: 'son',
          name: 'son',
          component: son
        }
      ] }

<template>
  <div>
    <h1>子组件</h1>
    <p>下面是父组件传过来的数据</p>
    <p>第一个数据：{{fData}}</p>
    <p>第二个数据：{{fMessage}}</p>
  </div>
</template>
  
<script>
export default {
  props: ['fData', 'fMessage'],
  data () {
    return {
  
    };
  }
}
</script>

3.组件传值-父组件把方法传递给子组件
第一步：父组件向子组件传递方法，使用事件绑定机制 v-on，自定义一个事件属性，传递给子组件

<template>
  <div>
    <h1>父组件</h1>
    <router-view @show="showFather"></router-view>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
 
    };
  },
  methods: {
    showFather (a, b) {
      console.log('触发了父组件的方法' + '======' + a + '======' + b);
    }
  }
}
</script>

第二步：在子组件中定义一个方法，在方法中，利用 $emit 触发 父组件传递过来的，挂载在当前实例上的事件，还可以传递参数
第三步：在子组件中调用定义的那个方法，就可以触发父组件传递过来的方法了
4.组件传值-子组件通过事件调用父组件传值

<template>
  <div>
    <h1>父组件</h1>
    <router-view @show="showFather"></router-view>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      fromSon1: '',
      fromSon2: ''
    };
  },
  methods: {
    showFather (a, b) {
      this.fromSon1 = a;
      this.fromSon2 = b;
      console.log('触发了父组件的方法' + '======' + a + '======' + b);
    }
  }
}
</script>

6.路由传参query和params的区别

路由配置{path:'/login',name:'Login',component:Login},

1.页面携带query参数跳转{path,name指定跳转到组件是都可以携带query参数}，相当于发送get请求，请求的参数在浏览器地址栏中。

this.$router.push({path:'/login',name:'Login',query:{id:this.id})

2.页面携带params参数跳转（携带params参数跳转时只能使用name限定），相当于发送了一次post请求，请求参数不会显示，并且刷新页面之后参数会消失

this.$router.push({name:'Login',params:{id:this.id}})

当把路由配置修改为{path:'/login/:id',name:'Login',component:Login}

并且再次发送请求，请求的数据不会随着页面刷新消失
7.vux小结
vuex是一个专门为vue.js开发状态管理器，通过vuex可以解决 组件之间的共享问题，后期方便管理和维护
有5个属性：
state、getter、mutations、actions、module
state：属性存放的状态，例如存放的数据
getters:类似于共享属性，可以通过this.$store.getters来获取state里面的属性
mutaions:唯一能够改变state的状态的方法，每个mutation都有事件类型和一个回调函数
action类似于mutation，但是不同的是，action提交的是mutation，而不是直接改变状态。action可以包括任何异步操作。
vuex将自己的state，mutation，action，getter分割成嵌套模块
9.angular和vue的区别
体积和性能：
相比较vue，angular显得比较臃肿，在渲染性能上，两者几乎没有差别。
开发效率：
各自都提供了脚手架工具，帮助从开发到构建打包整套过程，都可以编辑可复用的组件，减少工作量。
灵活性：vue相比较angular更加灵活，相比较于vue，angular开发对java和C使用者更友好，缺点就是体积大，灵活性差不能随意选择使用方式，学习曲线陡峭，热度不如vue
10.单点登录
实现多系统应用群的登录
实现sso技术：
一次登录与一次退出，想办法让各个server的公用一个session信息，让客户端在各个域名地下都能持有这个ID就好了。，只要server拿到同一个ID，得到对应用户的信息就好了，也就能校验ID。
11.router-view不同的路由用同一个组件的时候，默认情况下页面切换时不会触发vue的created和mounted，简单的在router-view上加一个唯一的key，来保证路由切换时都会重新渲染触发钩子。

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }