文章目录
vue-route 有哪几种导航钩子？
请详细说明你对 Vue 生命周期的理解
为什么Vue中的v-if和v-for不建议一起用?
一、作用
二、优先级
三、注意事项
vue-route 有哪几种导航钩子？
有3种
第一种是全局导航钩子： router. beforeEach( to , from , next ). 作用是跳转前进行判断
拦截
第二种是组件内的钩子
第三种是单独路由独享组件
请详细说明你对 Vue 生命周期的理解
总共分为 阶段，分别为 before Create , created ,beforeMount ,mounted, before Update , updated, beforeDestroyed ,destroyed
beforeCreate ：
在实例初始化之后 ，数据观测者(data observer)和 event/watcher事件
配直之前调用
created ：
在实例创建完成后立即调在这一步， 实例已完成以下的 配直：数据观测者，属性和方法的运算, watch/event 事件回调 然而，挂载阶段还没开始，$el属性目前不可见
beforeMount
在挂载开始之前调用，相关的render函数首次调用。
mounted
el被新创建的 vm.$ el 替换，并且在挂载到实例上之后再调用该钩子,如果 root 实例挂载了一个文档内元素 当调用 mounted时vm.$ el 也在文档内
before Update ：
在数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前
updated ：
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
beforeDestroy
在实例销毁之前调用,在这一步，实例仍然完全可用
destroyed ：
在 Vue 实例销毁后调用 ,调用后， Vue.js 实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
当使用纽件的 keep-alive 功能时 增加以下两个周期
activated在keep-alive 纽件激活时调用；
deactvated在keep-alive 组件停用时调用
Vue 2.5 版本新增了一个周期钩子： ErrorCaptured 当捕获到一个来自子孙纽件的错
误时调用
为什么Vue中的v-if和v-for不建议一起用?
一、作用
1.v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染
2.v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名
3.在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化
二、优先级
v-if与v-for都是vue模板系统中的指令
在vue模板编译的时候，会将指令系统转化成可执行的render函数
在进行if判断的时候，v-for是比v-if先进行判断
三、注意事项
1.永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
2.如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环
3.如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项
