对于VUE中几个知识点的理解

关于路由守卫

路由守卫，又称之为路由拦截器， 很常见的一种情况，假设一个商城，在你没有登录之前，你是登录不进去购物车的，如果强行用各种手段想要打开购物车的页面，那么你最终都会被送到登录的界面上，这个程序会将你拒之门外。
守卫又分为全局守卫和局部守卫，全局守卫是写在路由定义文件里面，每当路由切换就会执行

// 进入页面之前执行
router.beforeEach((to, from, next) => {
  // ...
  })
// 进入页面之后执行
router.afterEach((to, from) => {
  // ...
  })

可以看到，这里有第三个参数。
to:显示出路由将要跳转的信息，信息是包含在对象里面的
from:路由跳转前的路径信息，表明了“我”来自于哪里
next:路由的控制参数，常用的有next(true)和next(false)

局部守卫写在vue组件里面，只对当前组件生效，和vue生命周期函数写法一样

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

关于VUE的生命周期

其实最早的时候听到这个生命周期，感觉挺好玩，从出现到没的一个过程是吧。但是VUE的生命周期从无到有的这个过程，特别有意思。他经历了很多过程。用一张图可以表示这个过程。

关于生命周期的函数，又称作“钩子函数”，这个名字相当奇怪，为什么是“钩子”，通过查询我找到了相关的答案，钩子函数是windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息，事件进行过滤，访问在正常情况下无法访问的信息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。

简单来说，就是把那些本来无法正常看到的信息用工具给勾出来了，这里的工具指的就是钩子函数。

在VUE2.0的版本中有10个钩子函数

生命周期钩子	说明
beforeCreate	在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created	实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted	el 被新创建的 vm.$el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el 也在文档内。
beforeUpdate	数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
activated	keep-alive 组件激活时调用。
deactivated	keep-alive 组件停用时调用。
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

除了beforeCreate和created钩子之外，其他钩子均在服务器端渲染期间不被调用

VUE组件之间的传参

很多人感觉这个是比较难的，其实就分步骤来记的话也并不难，父子组件之间的传参和人与人之间的通信是一样的，人与人之间还需要掏出手机，拨号然后等待相应。其实在代码的世界里也是一样的道理

一、父组件向子组件传递数据

这里我们可以使用props向子组件传输数据
我们模拟一下现场

<template>
	<header class="header">
	<div id="logo">{{logo}}</div>
	<ul class="nav">
		<li v-for="nav in navs">{{nav.li}}</li>
	</ul>
	</header>
</template>

这是 header.vue 的 HTML 部分，logo 是在 data 中定义的变量。
如果需要从父组件获取 logo 的值，就需要使用 props: [‘logo’]

<script>
	export default{
		name:'headerDiv',
		data(){
			return{
				navs:[
					{li:'主页'},
					{li:'日志'},
					{li:'说说'},
					{li:'相册'},
				]
			}
		},
		props:['logo']
	}
</script>

在 props 中添加了元素之后，就不需要在 data 中再添加变量了

在父组件部分中：

<template>
	<div id="app">
		<HeaderDiv :logo="logoMsg"></HeaderDiv>
	</div>
</template>

在调用组件的时候，我们是用v-bind或者上面这种的简写方法将 logo 的值绑定为 App.vue 中定义的变量 logoMsg

import HeaderDiv from './components/header'
	export default {
		name:'app',
		data() {
			return {
				logo:'WiseWrong'
			};
		},
		components:{
			HeaderDiv
		}
	}

然后就能将App.vue中 logoMsg 的值传给 header.vue 了：

二、子组件向父组件传递数据

子组件部分：

<template>
	<seation>
		<lable>
			<span>用户名：</span>
			<input v-model="username" @change="setUser" />
		</lable>
	</seation>
</template>

这是 login.vue 的 HTML 部分，当的值发生变化的时候，将 username 传递给 App.vue
首先声明一个了方法 setUser，用 change 事件来调用 setUser

export default {
		name:'login',
		data() {
			return {
				username:''
			};
		},
		methods:{
			setUser:function(){
				this.$emit('transferUser',this.username)
			}
		}
	}

在 setUser 中，使用了 $emit 来遍历 transferUser 事件，并返回 this.username
其中 transferUser 是一个自定义的事件，功能类似于一个中转，this.username 将通过这个事件传递给父组件
父组件部分：

<template>
	<div id="app">
		<LoginDiv @transgerUser="getUser"></LoginDiv>
		<p>用户名为：{{user}}</p>
	</div>
</template>

在父组件 App.vue 中，声明了一个方法 getUser，用 transferUser 事件调用 getUser 方法，获取到从子组件传递过来的参数 username

export default {
		name:'app',
		data() {
			return {
				user:''
			};
		},
		methods:{
			getUser(msg){
				this.user = msg
			}
		},
		components:{
			LoginDiv
		}
	}

三、子组件向子组件传参

Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。

getUser 方法中的参数 msg 就是从子组件传递过来的参数 username