2024年9月vue的钩子函数（Vue-Router路由钩子函数(导航守卫)）
⑴vue的钩子函数（Vue-Router路由钩子函数(导航守卫)
⑵Vue-Router路由钩子函数(导航守卫)
⑶——“导航”表示路由正在发生改变。路由钩子函数有三种：??????：全局钩子：beforeEach、afterEach、beforeResolve??????：单个路由里面的钩子：?beforeEnter??????:组件路由：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave无论访问哪一个路径，都会触发全局的钩子函数，位置是调用router的方法router.beforeEach()进入之前触发router.afterEach()进入之后触发⑴beforeEach（全局前置守卫使用router.beforeEach注册一个全局前置守卫每个守卫方法接收三个参数：①to:Route:即将要进入的目标路由对象（to是一个对象，是将要进入的路由对象，可以用to.path调用路由对象中的属性②from:Route:当前导航正要离开的路由③next:Function:这是一个必须需要调用的方法，执行效果依赖next方法的调用参数。next参数：??next():进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed(确认的)。??next(false):中断当前的导航。如果浏览器的URL改变了(可能是用户手动或者浏览器后退按钮)，那么URL地址会重置到from路由对应的地址。??next(’/’)或者next({path:’/’}):跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向next传递任意位置对象，且允许设置诸如replace:true、name:’home’之类的选项以及任何用在router-link的toprop或router.push中的选项。??next(error):(..+)如果传入next的参数是一个Error实例，则导航会被终止且该错误会被传递给router.onError()注册过的回调。ps~:确保要调用next方法，否则钩子就不会被resolved。().afterEach（全局后置钩子和守卫不同的是，这些钩子不会接受next函数也不会改变导航本身写在路由配置中，只有访问到这个路径，才能触发钩子函数写在组件中,访问路径，即将渲染组件的时候触发的beforeRouteEnter守卫不能访问this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过，你可以通过传一个回调给next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。注意~：beforeRouteEnter是支持给next传递回调的唯一守卫。对于beforeRouteUpdate和beforeRouteLeave来说，this已经可用了，所以不支持传递回调，因为没有必要了。这个离开守卫beforeRouteLeave()通常用来禁止用户在还未保存修改前突然离开。该导航可以通过next(false)来取消。.导航被触发。.在失活的组件里调用离开守卫。.调用全局的beforeEach守卫。.在重用的组件里调用beforeRouteUpdate守卫(.+)。.在路由配置里调用beforeEnter。.解析异步路由组件。.在被激活的组件里调用beforeRouteEnter。.调用全局的beforeResolve守卫(.+)。.导航被确认。.调用全局的afterEach钩子。.触发DOM更新。.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。
⑷前端Vue面试必过题优选(钩子函数)
⑸自定义指令是什么？以及自定义指令的使用场景???在Vue中，有很多内置指令，但是这些指令只能满足我们最基础的使用，当我们在实际项目中遇到了必须要对DOM进行操作的逻辑时，我们就用到了自定义指令②自定义指令的钩子函数????bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。????inserted：被绑定元素插入父节点时调用?????update：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。????ponentUpdated：指令所在组件的VNode及其子VNode全部更新后调用。????unbind：只调用一次，指令与元素解绑时调用。????在父组件给子组件传值的时候，给子组件加一个判断，如果数据没有请求到就不渲染当前组件???vue-router传参两种方式：params和query方法一：???query方式传参和接收参数?????传参：????接收参数：??????this.$route.query.id???传参是this.$router,接收参数是this.$route两者区别：???????$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法???????$route为当前router跳转对象，里面可以获取name、path、query、params等方法二：????params方式传参和接收参数???传参：接收参数:?this.$route.params.idquery和oarams的区别：????query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示??全局导航钩子：beforeEach、afterEach??组件内导航：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave??独享导航守卫：beforeEnter
⑹vue-router钩子函数（beforeEach、afterEach、beforeEnter
⑺全局的beforeEach：前置钩子函数三个参数：to：路由将要跳转的路劲信息，信息是包含在对象里边的from：路由跳转前的路由信息，也是一个对象的形式next：路由的控制参数，常用的有next（true和next（false决定要不要跳转使用场景：未登录去下单，跳转到登录页面.afterEach：后置钩子函数两个参数：没有nextto：去哪from：从哪里来使用场景：改变浏览器title（二单个路由独享的.beforeEnter有三个参数：to：路由将要跳转的路劲信息，信息是包含在对象里边的from：路由跳转前的路由信息，也是一个对象的形式next：路由的控制参数，常用的有next（true和next（false在路由配置文件（/src/router/index.js中写钩子函数（三组件级的.beforeRouteEnter?：?在路由进入前的钩子函数?不能获取组件实例?‘this’?这时组件this还没有被创建使用场景：进入这个路由前你要做什么初始化操作.beforeRouteUpdate?：?当前路由改变，改组件被复用时??可以访问组件?‘this’使用场景：对于一个带有动态路由参数的路径／box／：id?，在／box／b和／box／c?之间跳转的时候由于会渲染同样的组件Box，因此组件实例会被复用，这个钩子函数在这种情况下会被调用.beforeRouteLeave?：?离开路由前的钩子函数，可以访问组件实例‘this’?使用场景：清除定时器等等
⑻vue钩子函数执行顺序
⑼vue模板，钩子函数
⑽vue脚手架：在vue脚手架中有一个template模板：在模板里面只有一个子类，子类里面可以有其他的类script?脚本：style样式vue的语法：当使用{{}}的时候，里面只可以传入文本，如果传入标签也会被认为文本；v-html：可以传入标签，设置属性的时候，使用v-bind:id可以简写为?:id=’id’在html中的变量都需要在data里面进行定义在{{}}里面可以使用表达式v-if与v-else：如果if条件成立的话，就会显示if里面的内容，如果没有成立的话，就会显示else里面的内容，v-show?条件成立就显示内容，条件不成立，不会显示内容。他会修改display属性vue中的钩子函数：一个指令定义对象可以提供如下几个钩子函数(均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。update：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新ponentUpdated：指令所在组件的VNode及其子VNode全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。钩子函数参数指令钩子函数会被传入以下参数：el：指令所绑定的元素，可以用来直接操作DOM。binding：一个对象，包含以下属性：name：指令名，不包括?v-?前缀。value：指令的绑定值，例如：v-my-directive=“+“?中，绑定值为?。oldValue：指令绑定的前一个值，仅在?update?和?ponentUpdated?钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如?v-my-directive=“+“?中，表达式为?“+“。arg：传给指令的参数，可选。例如?v-my-directive:foo?中，参数为?“foo“。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar?中，修饰符对象为?{foo:true,bar:true}。vnode：Vue编译生成的虚拟节点。移步VNodeAPI来了解更多详情。oldVnode：上一个虚拟节点，仅在?update?和?ponentUpdated?钩子中可用。除了?el?之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的dataset来进行。使用vue计算属性:链接：来源：
⑾vue生命周期个钩子函数
⑿vue生命周期个钩子函数如下：
⒀组件通过newVue（创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载，无法访问到数据和真实的dom，一般不做操作。
⒁挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据，在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。
⒂接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染，在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数。
⒃般可以在这里做初始数据的获取下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情。
⒄当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事。
⒅当更新完成后，执行updated（据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom。
⒆经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等,组件的数据绑定、监听……去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以。
⒇Vue——生命周期和钩子函数的一些理解
⒈Vue生命周期简图所谓生命周期钩子函数（简称生命周期函数，指的是组件的创建、更新、销毁三个阶段所触发执行的函数。根据每个阶段触发的钩子函数，我们可以相应的做一些操作，如获取后端接口数据、监听事件、执行事件、执行定时器、移除事件、清理定时器等等。生命周期根据上面的三个阶段分为：实例化期/组件创建“生存期”/组件更新销毁期/组件销毁beforeCreate：在实例初始化之后，数据观测(dataobserver)和event/watcher事件配置之前被调用。created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测(dataobserver)，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，属性还不可见beforeMount：在挂载开始之前被调用：相关的render函数首次被调用。属性已经可见，但还是原来的DOM，并非是新创建的。mouted：挂载到实例上去之后调用该钩子。注意：mounted不会把所有的子组件也都一起被挂载。beforeUpdate：数据更新时，虚拟DOM变化之前调用，这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。updated：数据更新和虚拟DOM变化之后调用。当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或watcher取而代之。beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用。一般在这里移除事件监听器、定时器等，避免内存泄漏destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
⒉vue之路由传参，跳转，钩子函数
⒊路由传参的三种方式方式一：query的方式进行，通过添加？的方式传参App页面配置：childa页面配置：方式二：通过id的方式传参，用到paramsApp页面配置：childb页面配置：index.js配置：方式三：通过props：的方式进行id方式的传参，不需要用到paramsapp页面配置和上面id一样childb页面配置：index.js页面：二.路由的跳转.使用push的两种方式进行跳转指定页面.添加一级路由：（写一个按钮，然后写个方法，执行方法后进行路由的添加（写好要跳转的页面.添加二级路由：（写一个按钮，然后写个方法，执行方法后进行路由的添加（写好要跳转的页面三，路由的钩子函数（全局和局部在router的index.js里配置.全局路由守卫，每次路由跳转都会执行一遍router.beforeEach((to,from,next)=》{next()//这个必须写})to:表示要去的路由，from：表示之前的路由，next：必须要执行的函数，next表示跳转方法.监听全局路由离开时触发的钩子函数没有next（router.afterEach((to,from)=》{}).局部路由钩子函数局部的路由钩子进入路由的时候触发因为同一个路径参数不同或者是动态路由，不会触发beforeEnterbeforeEnter:(to,from,next)=》{next()}
⒋vue之路由钩子函数-路由守卫
⒌vuerouter.beforeEach（全局前置守卫beforeEach的钩子函数，它是一个全局的before钩子函数，（beforeeach意思是在每次每一个路由改变的时候都得执行一遍。它的三个参数：to:(Route路由对象)即将要进入的目标路由对象to对象下面的属性：pathparamsqueryhashfullPathmatchednamemeta（在matched下，但是本例可以直接用from:(Route路由对象)当前导航正要离开的路由next:(Function函数)一定要调用该方法来resolve这个钩子。调用方法：next(参数或者空)***必须调用next(无参数的时候):进行管道中的下一个钩子，如果走到最后一个钩子函数，那么导航的状态就是confirmed（确认的next(’/’)或者next({path:’/’}):跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。、vuerouter.afterEach（全局后置守卫router.beforeEach是页面加载之前，相反router.afterEach是页面加载之后你可以在路由配置上直接定义beforeEnter守卫：这些守卫与全局前置守卫的方法参数是一样的。(一)清除当前组件中的定时器当一个组件中有一个定时器时,在路由进行切换的时候,可使用beforeRouteLeave将定时器进行清楚,以免占用内存:(二)当页面中有未关闭的窗口,或未保存的内容时,阻止页面跳转如果页面内有重要的信息需要用户保存后才能进行跳转,或者有弹出框的情况.应该阻止用户跳转，结合vuex状态管理（dialogVisibility是否有保存(三)保存相关内容到Vuex中或Session中当用户需要关闭页面时,可以将公用的信息保存到session或Vuex中
⒍Vue生命周期及钩子函数
⒎其实生命周期就是指Vue实例创建的过程，从开始到销毁的过程。在这个过程中呢又分:开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列...在这个过程中呐，有一些方法（函数会被触发执行，也就是给了我们可以去编写逻辑的机会。下面附一张Vue生命周期图Vue生命周期一共有个钩子函数，图中一共有个钩子函数。在Vue实例被创建之后，Vue挂载元素阶段会有个钩子函数，它们是自动执行的且只执行一次，数据更新阶段有个钩子函数会被执行，销毁阶段有个钩子会被执行，下面我们来详细看一看这个钩子函数。在实例初始化之后，数据观测(dataobserver)和event/watcher事件配置之前被调用。访问不到数据在实例创建完成后被立即调用可以获取数据(常用作发送异步请求获取数据)在挂载开始之前被调用可以访问数据编译模板结束，虚拟dom已经存在可以拿到节点和数据?常用实例被挂载后调用.注意:mounted?不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在?mounted?内部使用Vue实例.$nextTick：在Vue实例上有一个方法，它会延迟执行，直到Dom加载完成.补充:ref表示节点this.$refs.ref的标识就可以拿到节点了数据更新时调用，发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。常用的监控数据的变化由于数据更改导致的虚拟DOM重新渲染和打补丁补充:watch是监控特定数据的变化，updated是监控组件里所有数据的变化实例销毁之前调用，在这一步，实例仍然完全可用。?常用于清理资源，防止内存的泄露实例销毁后调用。该钩子被调用后,对应Vue实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。?被keep-alive缓存的组件激活时调用。被keep-alive缓存的组件停用时调用。当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回?false?以阻止该错误继续向上传播。那么Vue的个声明周期函数就给大家简单介绍完毕了！你学会了嘛！！！【详情请参照】