前端 VUE 面试题

• React 和 Vue的区别

• vuex 同步请求和异步请求

• Watch侦听器，computed计算属性

• computed和method区别
  methods调用几次则方法执行几次，而computed只执行一次。computed存在缓存机制。

• vue组件 class组件和函数式组件

• 高阶组件
  高阶组件其实就是一个高阶函数, 即返回一个组件函数的函数

• vue组件传值

• 父传子：父组件通过属性的方式向子组件传值，子组件通过 props 来接收

• 子传父：子组件绑定一个事件，并给这个事件定义一个函数，通过 this.$emit() 来触发

• 跨组件传值：通过 $emit 和 props 结合的方式， Vuex，EventBus

• 路由实现的原理

  扫描二维码关注公众号，回复： 12662214 查看本文章

• a标签和router-link的区别

• 路由守卫

• 指令 v-show 和 v-if区别
  v-if按照条件是否渲染，v-show是display的block或none；

• v-model.lazy
  v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步。
  v-model是双向绑定的，所以当改变input框中的值的时候，span中的内容随之改变而改变。
  .lazy是 取代input监听change事件
  当添加.lazy修饰符之后，改变input框中的内容并不会使得span中的内容发生变化，此时当输入框失去焦点后触发change事件.控制台中输出相应内容。
  加上.lazy后相当于 双向数据绑定不起作用了

• v-on:click v-on:click.stop
  正常的点击事件为 v-on:click；@click事件添加stop，阻断事件，暂停事件。

• element UI使用table
  table表格组件使用

• 上家公司用过什么技术

• vue技术栈

• vuex 流程

• state 属性
  state 属性，负责状态管理，类似于vue中的data，用于初始化数据；

• vue实例中如何调用vuex中的数据
  先在 目录下建立一个 store 文件夹，并且在下面建立一个 store.js 文件；
  先引入 Vue 和 Vuex 并且别忘了 Vue.use(Vuex);
  获取vuex中的数据：
  通过 this.$store.state.count 可以拿到 state里面的 count
  改变 count 的值，应该怎么做呢？ 这时候就可以用到 mutations

• vue生命周期

• 单页面项目和多页面区别
  多页面页面，多个html，切换简单，浏览器自身实现页面切换。单页面一个html，所有的视图和逻辑仅用一个页面完成。

• vue实例都有哪些属性
  $slots用来访问被插槽分发的内容集合；$props当前组件接收到的props对象，对实例props对象的访问；

• Watch侦听器，computed计算属性

• key的作用
  当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

• vue.js的两个核心是什么？
  答：数据驱动、组件系统

• 数据驱动视图的实现原理
  数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom

• data函数? 对象?

• 一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

• el的作用

• 就是表明我们要将当前vue组件生成的实例插入到页面的哪个元素中，el属性的值可以是css选择器的字符串，或者直接就是对应的元素对象。并且只能在使用new生成实例时才能配置el属性，而我们在组件中只是export一个配置对象，如果设置了el则会报错。

• __proto__

• __proto__是用来读取或设置当前对象的prototype对象的

• 原型及原型链

• vue的生命周期

• 挂载阶段触发的生命周期
  挂载后mounted：挂载元素完成，获取dom节点，真实的Dom挂载完毕

• 虚拟dom
  在这种情况下：使用框架的过程中是否会频繁引起大面积的DOM操作，虚拟DOM的出现也是为了减弱频繁的大面积重绘引发的性能问题！

• $router和$route

• $rotuter和router-link跳转区别

• router-link和传统a链接的区别

• 动态路由

• 装饰器

• 双向数据绑定的原理

• 导航守卫

• 如何模拟promise
  Promise对象解决回调地狱层层嵌套的问题。

• 技术栈

• 单点登录

• 单点登录和统一登录的区别

• cookie和token区别

• h5新特性
  h5新增了，sessionStorage、localStorage
  h5新增表单特性

• es6新特性
  ES6新增了两个声明变量的关键字：let和const。数据类型：symbol。箭头函数

• Symbol常用方法与特点
  唯一性

• es6转换成es5
  Babel转换成es5

• 状态码及常见状态码

• vue项目打包后白屏解决办法
  路径问题
  在config文件夹中找到index.js打开,把build下的assetsPublicPath: '/'改成assetsPublicPath: './'。dev下的不用改

• 压缩代码优点
  减少文件加载体积，如html压缩，js压缩；
  加快js执行速度 比如常见的无限滚动的页面，可以使用js先渲染一个屏幕范围内的东西；
  提供一些友好的交互，比如提供一些假的滚动条；
  使用本地存储处理静态文件。

• 垃圾收集机制

• 节流防抖

• 回流（Reflow）与重绘（Repaint）
  重绘不一定导致回流，回流一定会导致重绘

• axios

• vue中几种类型的插槽(slot)

• 默认插槽，具名插槽，作用域插槽