一个小白的vue理解

一、vue的声明周期

几个主要的钩子函数：

1.beforeCreate  -->创建前

数据观测和初始化事件还未开始

2.created --> 创建后

3.beforeMouted -->载入前

相关的render函数首次被调用，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来

3.mouted --> 加载后

用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

4.beforeUpdate -->更新前

在数据更新之前调用

5.updated -->更新后

注意：应该避免在此期间更改状态，因为这可能会导致更新无限循环。

6.beforeDestory -->实例销毁前

此时实例还可以使用。

7.destoryed -->实例销毁后

所有的事件监听器会被移除，所有的子实例也会被销毁。

Vue实例从创建到销毁的过程就是Vue的声明周期，共分为上面8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。但是第一次加载只会触发beforeCreate，cretaed，beforeMount，mounted。其中DOM渲染是在mounted中就已经完成了。

二、vue组件的参数传递

1.父组件和子组件传值

父组件传给子组件：子组件通过props方法接受数据

子组件传给父组件：$emit 方法传递参数。

2.非父子组件间的数据传递，兄弟组件传值。

eventBus,就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。

三、vue的路由实现：hash模式和history模式

hash模式：在浏览器中符号"#",#以及#后面的字符称之为hash，用window.location.hash读取；

特点：hash苏安然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState(),replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

四、vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach 主要由三个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子，执行效果依赖next方法的调用参数。可以控制网页的跳转。

五、对keep-alive的了解

keep-alive是Vue内置的一个组件，可以被包含的组件保留状态，或避免重新渲染。

参数解释：

include-字符串或正则表达式，只有名称匹配的组件会被缓存。

exclude-字符串或正则表达式，任何名称匹配的组件都不会被缓存。