|
1.vue.user()方法理解
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.use = function (plugin: Function | Object) {
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
const args = toArray(arguments, 1)
args.unshift(this)
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。
|