路由守卫面试题（路由守卫三个参数）

computed是计算属性，依赖其他属性值，并且computed的值有缓存，只有他所依赖的值发生改变，下一次获取computed的值才会重新计算

适应场景

当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，

设置中间状态。这些都是计算属性无法做到的。

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

在vue2中，v-for的优先级是高于v-if，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件，哪怕我们只渲染列表中一小部分元素，

也得在每次重渲染的时候遍历整个列表，这会比较浪费；另外需要注意的是在vue3中则完全相反，

v-if的优先级高于v-for，所以v-if执行时，它调用的变量还不存在，就会导致异常

vue-router 有 3 种路由模式：hash、history、abstract

其中，3 种路由模式的说明如下：

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；

history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；

abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据

Key 值的存在保证了唯一性，Vue 在执行时，会对节点进行检查，如果

没有 key 值，那么 vue 检查到这里有 dom 节点，就会对内容清空并赋

新值，如果有 key 值存在，那么会对新老节点进行对比，比较两者 key

是否相同，进行调换位置或删除操作

v-for：循环数组，对象，字符串，数字

v-on：绑定事件监听

v-bind：动态绑定一个或者多个属性

v-model：表单控件或者组件上创建双向绑定

v-if v-else v-else-if 条件渲染

v-show 根据表达式真假，切换元素的 display

v-html 更新元素的 innerhtml

v-text 更新元素的 textcontent

v-pre 跳过这个元素和子元素的编译过程

v-clock 这个指令保持在元素上知道关联实例结束编译

v-once 只渲染一次

概念：keep-alive 是 vue 的内置组件，当它动态包裹组件时，会缓存不

活动的组件实例，它自身不会渲染成一个 DOM 元素也不会出现在父组

件链中

作用：在组件切换过程中将状态保留在内存中，防止重复渲染 DOM，减

少加载时间以及性能消耗，提高用户体验。

生命周期函数：Activated 在 keep-alive 组件激活时调用，deactivated

在 keep-alive 组件停用时调用

componentWillMount 组件渲染之前调用

componentDidMount 在第一次渲染之后调用

componentWillReceiveProps 在组件接收到一个新的 props 时调用

shouldComponentUpdate 判断组件是否更新 html

componentWillupdate 组件即将更新 html 时调用

componentDidupdate 在组件完成更新后立即调用

componentWillUnmount 在组件移除之前调用