Vue生命周期

Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有的功能的实现都是围绕其生命周期进行的在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能

VUE生命周期的八个阶段

beforeCreate：会在实例初始化完成，porps解析之后，data（）和computed等选项处理之前立即调用此时不能获得DOM节点。
created：在这个阶段vue实例已经创建，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而、此时挂载阶段还未开始、因此$el属性仍不可用。仍然不能获取DOM元素。
beforeMount：在组件内容被渲染到页面之前自动执行的函数、组件已经完成了其响应式状态的设置、但还没有创建DOM节点。
mounted：在组件被渲染之后自动执行的函数。一般我们的异步请求都写在这里。在这个阶段、数据和DOM都被渲染出来。
beformUpdate：数据变化是后自动执行的函数，此时变化后的数据还未渲染到页面之上。
updated：数据变化之后自动执行的函数、此时变化后的数据已经渲染到页面之上。
beforeUnmount:当Vue应用被销毁时、自动执行的函数。
unmounted:当Vue应用被销毁后、且dom完全销毁之后、自动执行的函数

vuex

基本概念：state、getters、action、mutation 用于vue组件：dispatch、commit、mapState、mapGetters、mapActions、mapMutations

Actions里面可以做异步操作、整合多个mutation操作。mutation最小的原子操作，最后更新至state数据同步。

vue-router使用

基本：路由模式（hash、H5 history）

hash值得变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面通过监听hashchange事件可以知道hash发生了那些变化，然后根据hash变化来实现更新页面部分内容的操作

history模式的实现，主要是HTML5标准发布的两个API，pushState和replaceState，这两个API可以在改变URL 但是不会发送请求。这样就可以监听URL变化来实现更新页面部分内容操作

刷新页面时，hash模式可以正常加载到hash值对应的页面，而history没有处理的话，会返回404，一般需要后端将所有页面都配置重定向到首页路由。在兼容性上，hash可以支持低版本浏览器和IE

路由配置（动态路由、懒加载）

//动态路由
const router = new VueRouter（{
  routes:[
    {path:'/user/:id',component:User}
  ]
}）

//懒加载
{
  path:'/',
  conponent:()=>import(
     './../components/url'
  )
}

动态路由主要通过两个函数实现

reouter.addRoute()
router.removeRoute()

动态路由遇见的一些问题

如果需要等待新的路由显示，可以使用 await router.replace()
如果你决定在导航守卫内部添加或删除路由,不应该调用 router.replace().而是通过返回新的位置来触发重定向

router.beforeEach(to => {
  if (!hasNecessaryRoute(to)) {
    router.addRoute(generateRoute(to))
    // 触发重定向
    return to.fullPath
  }
})

Vue Router 提供了两个功能来查看现有的路由

router.hasRoute()：检查路由是否存在。 router.getRoutes()：获取一个包含所有路由记录的数组。

Vue生命周期、vuex和vue-router

Vue生命周期

vuex

vue-router使用