vue day5+6

vue3
1) vue实例
  let app = Vue.createApp()
  let vm = app.mount('#app');
2) 生命周期钩子函数
  beforeCreate
    vue对象的实例化，数据劫持（数据具有响应式）
  created
    vnode(虚拟节点)
    模板编译 template/el --抽象语法树ast--> render()
  beforeMount
    vm.$el 【render函数产生的dom节点node】
  mounted
    替换完成
    ajax() -> 微任务（宏任务）
    [8ajax] / dom更新
  beforeUpdate
  updated
  beforeUnmount
  unmounted
3) 防抖
4) 组合式API

vuerouter vue官方提供的路由机制
  主要应用在单页面程序中，通过监听URL地址改变，动态加载组件的机制
1) 应用
  1. v2 + vueRouter3
    1) 路由器创建
      let router = new VueRouter({
        mode:'hash',
        routes:[{
          path:'/article',
          component:Article
        }]
      })
    2) 路由器注入
      作为Vue根组件的选项
      new Vue({
        el:'#app',
        router
      })
    3) 应用
      <router-link></router-link>
      <router-view></router-view>
  2. v3 + vueRouter4
    1) 路由器插件的创建
      let router = VueRouter.createRouter({
        history: VueRouter.createWebHashHistory(),
        routes:[]
      })
    2) 路由器插件的安装
      let app = Vue.createApp();
      app.use(router)
      app.mount('#app')
    3) 应用
      <router-link></router-link>
      <router-view></router-view>
2) 动态参数
  let router = VueRouter.createRouter({
    routes:[{
      path:'/articleDetails/:id/'
    }]
  })
  this.$router.push('/articleDetails/1')
3) 嵌套路由


4) 编程导航
  1. 跳转
    this.$router.push({ path:'路由path', query:{} })
    目的组件
    this.$route.query来获取参数

    this.$router.push({ name:'路由name', query:{},params:{}})
    目的组件
    this.$route.params来获取参数，如果在目的组件中进行页面刷新，params就会消息： 缓存

  2. 加载问题
    /article -> /articleDetails/1 -> /article -> /articleDetails/2
      重新加载

    /article -> /articleDetails/1 -> /articleDetails/2
      vue生命周期无法重新执行
    1) 监听
      this.$route.params
    2. 路由守卫

5) 路由守卫
  全局
    router.beforeEach
    router.afterEach
  组件独享
    routes:[{
      path:'/article',
      component:Article,
      beforeEnter:function(){}

    }]
  组件内部
    {
      beforeRouteEnter
      beforeRouteUpdate
      beforeRouteLeave
    }

6) 路由模式
  hash模式
  history模式