vue 生命周期 钩子 路由

一、生命周期

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

**

二、叫生命周期钩子的函数

**
beforeCreate
created
beforeMount
mounted
(beforeUpdate
updated）
beforeDestroy
destroyed

<div id='app'>
    <div id='message'>{{message}}</div>
    <input type="button" value="修改message的值" @click='message="vue"'>
  </div>
  <script>
    var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        },
        beforeCreate(){
          alert(this.message+'我是beforeCreate')
          //在beforeCreate函数执行，data和methods中的数据还没有初始化，
          //所以当我们去查看此时message的数据时，一定时undefined
        },
        created(){
          alert(this.message+'我是created')
          //在created函数执行时，data和methods中的数据已经完成初始化，
          //如果要使用data中的数据或者是methods中的方法，created是最早的时候
        },
        beforeMount(){
          alert(document.getElementById('message').innerHTML+'我是beforeMount')
          //beforeMount函数在执行时，模板已经编译完成，但尚未挂载到页面上去，此时页面还是旧的
          //因此id为message下面的div里面的内容仍然是{{message}}
        },
        mounted(){
          alert(document.getElementById('message').innerHTML+'我是mounted')
          //mounted函数执行完成后，整个vue实例已经初始化完毕，组件脱离创建阶段
          //如果要操作dom上的节点，mounted时最早的时候
        },
        beforeUpdate(){
          alert(this.message+' 我是beforeUpdate '+document.getElementById('message').innerHTML)
          //当页面中的数据发生改变时，触发beforeUpdate函数
          //数据已经发生了改变，但页面还没有更新，还是旧的页面
        },
        updated(){
          alert(this.message+' 我是updated '+document.getElementById('message').innerHTML)
          //updated函数执行时，数据与页面均发生了改变，已经保持同步
        }
      })
  </script>

三、路由

路由这个概念最先是后端出现的。就是所谓的SSR(Server Side Render)，通过服务端渲染，直接返回页面。
其响应过程是这样的
1.浏览器发出请求
2.服务器监听到80端口（或443）有请求过来，并解析url路径
3.根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等）
4.浏览器根据数据包的Content-Type来决定如何解析数据
简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。

前端路由的出现要从 ajax 开始，随着历史的发展，单页应用出现了。单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。

前端路由的实现其实很简单。
本质上就是检测 url 的变化，截获 url 地址，然后解析来匹配路由规则。