vue 面试题（一）

基础篇

• css 只在当前组件器作用
• v-if 和 v-show 区别
• $route 和 $router 的区别
• vue.js的两个核心是什么
• vue 常用的指令
• vue常用的修饰符
• v-on可以绑定多个方法吗
• vue 中的 key 值的作用
• 什么是 vue 计算属性
• vue等单页面应用及其优缺点
• 怎么定义 vue-router 的动态的路由？怎么获取传过来的值
• watch 和 computed 差异
• 组件中 data 为什么是函数

扩展篇

• 对于MVVM的理解
• VUE 生命周期的几个阶段
• 什么是VUE生命周期
• 第一次页面加载会触发那几个钩子
• DOM渲染在 那个周期中就已经完成
• vue 实现数据双向绑定的原理
• vue组件组件间的参数的传递
• vue的路由的实现 hash 模式 和 history 模式
• vuex 是什么 怎么用 那种功能场景使用
• 对keep-alive的理解
• 虚拟DOM 的优点
• vue的watch的深度使用
• vuex 中 mutation 和action的区别
• vue-router 中的导航守卫有哪些
• 简述vue diff算法原理

常见面试题

css 只在当前组件起作用
在 style 标签中写入 scoped 即可

v-if 和 v-show 区别
v-show ：添加 dispaly block 或者 none
v-if : 按条件渲染 v-if 是完整的销毁和重新创建

$route 和 $router 的区别

route 是路由信息对象 包括 path hash query fullPath matched name 等路由信息参数 而$router 是路由实例 对象包括了路由的跳转方法 钩子函数

VUE声明周期几个阶段

beforeCreate （创建前）在数据观测和初始化事件还未开始
create （创建后）完成数据的观测 属性和方法的运算 初始化事件 $el属性还没有显示出来

beforeMount （载入前）在挂载开始之前被调用 相关的render 函数首次被调用 实例已完成一下配置 编译模板 把data 里的数据和模板生成 HTML 注意此时还没有挂载 html 到页面上

mounted （载入后） 在 el 被新创建的vm.$el 替换 并挂载在实例上去之后调用实例已完成已下配置 用上面编译好的HTML内容替换el 属性指向的DOM对象 完成模板中的HTML渲染到HTML页面中 此过程中进行ajax交互

beforeUpdate (更新前) 在数据更新之前调用 发生在虚拟DOM重新渲染和打补丁之前 可以在该钩子中进一步的更改状态 不会触发附加的重新渲染过程

updated (更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用 调用时 组件DOM已经更新 所以可以执行依赖于DOM的操作 然而在大多数情况下 应该避免在此期间更改状态 因为这个可能会导致更新无限循环 该钩子在服务器渲染起价不被调用

beforeDestroy (销毁前) 在实例销毁之前调用 实例完全可用

destroy （销毁后）在实例销毁之后调用 调用后 所有的事件监听器会被移除所有的子实例也会被销毁 该钩子在服务器端渲染期间不被调用

对 keep-alive 的理解
keep-alive 是 vue 内置的一个组件 可以使被包含的组件保留的状态 或避免重新渲染
在 vue2.1.0 版本之后 keep-alive 新加入了两个属性 include（包含组件的缓存）与 exclude （排除的组件不缓存 优先级大于include）