vue day5+6

vue3
1) vue实例let app = Vue.createApp()let vm = app.mount('#app');
2) 生命周期钩子函数beforeCreatevue对象的实例化，数据劫持（数据具有响应式）createdvnode(虚拟节点)模板编译 template/el --抽象语法树ast--> render()beforeMountvm.$el 【render函数产生的dom节点node】mounted替换完成ajax() -> 微任务（宏任务）[8ajax] / dom更新beforeUpdateupdatedbeforeUnmountunmounted
3) 防抖
4) 组合式APIvuerouter vue官方提供的路由机制主要应用在单页面程序中，通过监听URL地址改变，动态加载组件的机制
1) 应用1. v2 + vueRouter31) 路由器创建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 + vueRouter41) 路由器插件的创建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/2vue生命周期无法重新执行1) 监听this.$route.params2. 路由守卫5) 路由守卫全局router.beforeEachrouter.afterEach组件独享routes:[{path:'/article',component:Article,beforeEnter:function(){}}]组件内部{beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave}6) 路由模式hash模式history模式