vue面试题

1. vue和react的相同点

• 都支持服务器渲染；

• 都有虚拟DOM、组件化开发，都通过props完成父子组件间的数据传递，都实现组件化规范；

• 数据驱动视图

• 都有支持的native方案，react的react native,vue的weex;【Weex 允许你使用 Vue 语法开发不仅仅可以运行在浏览器端，还能被用于开发 iOS 和 Android 上的原生应用的组件。React Native 能使你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。能同时跨多平台开发】

• 都有仓库（管理状态）：react有redux、vue有vuex

2. vue和react的区别：

• react只针对MVC框架的view层，而vue是一个完整的MVVM模式

• 虚拟DOM不一样

  • vue会通过跟踪依赖实现只对状态更新部分进行重新渲染

  • 而react会在状态有改变时，重新渲染每个组件，所以在react中会有shouldComponentUpdate生命周期函数

  vue-loader 提供了一些非常酷炫的特性：

  在每个 Vue 组件内支持其他的 Webpack 加载器，如用于<style>的 SASS 和用于<template> 的 Jade。

  把 <style> 和 <template> 内引用的静态资源作为模块依赖项对待，并用Webpack 加载器处理。

  对每个组件模拟有作用域的CSS。

  开发阶段支持组件的热加载。

• 数据绑定

  • vue实现了数据的双向绑定

  • 而react的数据流向是单向的

• 组件写法不一样

  • vue的写法是vue-loader的单文件组件格式

  • 而react的写法是JSX+行内样式

• state对象在react中只能通过setState改变状态；在vue中，state对象不是必需的，数据由data属性在vue对象中管理。

3. vue的原理：

• vue是一个构建数据驱动的web界面的渐进式框架，采用MVVM模式实现视图层与数据层的数据修改、更新监听。

• 其工作原理是vue在实例化的过程中会遍历data下的数据，通过Object.defineProperty()方法将它们设置为存储器属性（即具有getter、setter属性）。

4. vue的特点：

• 简洁：页面由HTML模板 + JSON数据 + Vue实例组成；

• 数据驱动：自动计算属性和追踪依赖的模板表达式；

• 组件化：用可复用、解耦的组件来构造页面；

• 轻量：代码量小，不依赖其他库；

• 快速：精确有效批量DOM跟新。

5.scss是什么

• scss是一款css预处理语言，可编写函数，定义变量，可嵌套。

6.为什么vue中的data必须是一个函数

• 对象是引用类型，在重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改。

• 使用返回对象的函数，由于每次返回的是一个新的对象，引用地址不同，就不会出现这个问题。

7.active-class是哪个组件的属性

• vue-router模块的router-link组件。

8.vue-router有哪几种导航钩子

• 全局导航钩子，可以用在路由跳转前做判断拦截

• 组件内钩子

• 路由独享钩子

9.vue-cli项目中src目录中每个文件夹和文件的用法

• assets：放静态资源

• component：放组件

• router：定义路由相关的配置

• app.vue：是一个应用主组件

• main.js：是入口文件

10.vue组件通讯

1. 父传子

• 父：自定义属性名+ 数据
• 子：props["父组件上的自定义属性名"]

2. 子传父

• 在父组件中注册子组件并在子组件标签上绑定自定义事件的监听

• 子：this.$emit("自定义事件名"，数据) + 子组件标签上绑定@自定义事件名="回调函数"

• 父：methods:{自定义事件(){}}

3. 事件总线 let bus = new Vue()

• 触发方: methos: { 函数 { bus.$emit("自定义事件名"，数据) } }
• 接收方：created(){ bus.$on("A发送过来的自定义事件名") }

11. vue路由传参

• 使用query方式传入的参数使用this.$route.query接收：

  • query传参可通过path和name方式跳转，页面刷新参数任然存在

• 使用params方法传入的参数使用this.$route.params接收：

  • params传参只能通过name方式跳转，页面刷新时params参数会丢失，除非作为动态路由

12. 计算属性和watch的区别

• computed属性是用来声明式地描述一个值依赖了其他值。

  • 当它依赖的实例属性发生改变时，会触发该属性重新计算（只有当视图使用了该计算属性）。

  • 这个功能非常强大，可以让你的代码更加声明式、数据驱动并且易于维护。

• 配置参数watch用来监听实例下的属性，当监听的值发生改变时会自动调用对应的方法。

• 而计算属性计算的是绑定在它上面的属性所依赖的属性，它不能计算在data中已定义过的变量。

13. vuex是什么？有哪几种属性？

• vuex是一个专门为vue.js程序开发的状态管理模式。

• 有五种属性：state、getter、mutation、action、module

14. vuex的state是什么？

• vuex就是一个store，store里面放了很多对象。其中state就是数据源存放地，对应于vue中的data。state里存放的数据是响应式的，vue从store中读取数据，当store中的数据发生改变时，依赖这些数据的组件也会发生改变。它通过mapState把全局的state和getter映射到当前组件的computed属性。

15. vuex的getter是什么？

• getter用来对state进行计算操作，它就是store的计算属性。getter的返回值会根据它的依赖被缓存起来，且只有当它依赖的值发生了改变才会被重新计算，getter可以用于监听state中的值的变化，返回计算后的结果。虽然在组件内也可以做计算属性，但是getter可以在多组件复用。它对应于vue对象中的computed。

16. vuex的mutation是什么？

• 更改vuex中store中的state的唯一方法是通过this.$store.commit提交mutation。

17. vuex的action是什么？

• action类似于mutation，不同的是action的是通过this.$store.dispatch提交mutation，而不是直接变更状态。
• action可以包含任何异步操作。

18. v-show和v-if的相同点和不同点：

• v-show指令是通过修改元素的display属性让其显示或隐藏。

• v-if是直接销毁和重建DOM达到让元素显示和隐藏的效果。

19. 如何让css只在当前组件中起作用

• 将当前组件的<style>设置为<style scoped>

20. <keep-alive />的作用是什么？

• <keep-alive />包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或者避免重新渲染。

21. v-on常用修饰符

• .native主要是给自定义组件添加原生事件

• .stop主要用于阻止事件冒泡 【e.stopPropagation()】

• .prevent主要用于阻止当前事件的默认行为

• .self主要用于设置当事件是从事件绑定的元素本身触发时才会触发回调

• .once表示绑定的事件是一次性的，仅被触发一次

22. v-for、key的作用：

• 当vue用v-for更新已经渲染过的元素列表时，默认采用“复用”原则。如果数据项的顺序被改变，vue不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

• 为了给vue一个提示，以便他能够跟踪每个节点，从而重新排序现有的元素，需要为每项提供一个唯一的key属性。key属性的类型只能是string或者number类型。

• 使用key，vue会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。

23. Promise对象是什么？

• Promise是异步编程的一种解决方案，它是一个容器，保存着未来某个时间点才会结束的事件的结果。

• Promise是一个对象，从它可以获取异步操作的消息。

• Promise提供统一的API，各种异步操作都可以用同样的方式进行处理。

• Promise对象是一个构造函数，用来生成Promise实例。

特点：

• 对象的状态不受外界影响。promise对象代表一个异步操作，有三种状态：pending（进行中）、fukfikked（已成功）和rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

• 一旦状态改变，就不会再变，任何时候都是可以得到这个结果。

缺点：

• 无法取消promise，一旦建立他就会立即执行，无法中途取消。

• 如果不设置回调函数，promise内部跑出的错误无法反映到外部。当pending的时候，无法知道进展到了哪一步。

24. axios的特点是什么？

• axios是一个基于promise的http库，支持promise的所有API；

• 它可以拦截请求和响应；

• 它可以转换请求数据和响应数据，并对响应回来的数据转换为json类型的数据；

• 它安全性更高，客户端支持防御CSRF（跨域请求伪造）

25. vue的路由模式以及实现方式？

hash模式

• 在浏览器中"#"及其后面的字符称为Hash，用window.location.hash读取；

• hash虽然在URL中，但不被包括在http请求中；只用来指导浏览器动作，对服务器安全无用，hash不会重加载页面。

history模式

• history采用h5新特性，且提供了两个新方式：pushState()，replaceState()可以对浏览器历史记录栈进行修改；

• popState事件监听状态变更。

26. vue中的ref是什么？

• ref用来给元素或者子组件注册引用信息。引用信息将会注册在父组件的$refs上。【如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例】

27. $route和 $router的区别？

• $route是“路由信息对象”，包括path、params、query、hash、fullpath、name等路由信息参数。

• $router是“路由实例对象”，包括路由的跳转方式、钩子函数等。

28. vue.js的两个核心是什么？

• 数据驱动、组件系统

29. vue如何兼容ie问题？

• babel-polyfill插件

30. 页面刷新vuex被清空的解决方法？

• sessionStorage存储到本地，定义beforeUnload事件，使得点击页面刷新时先将state数据保存到sessionStorage，然后才真正刷新页面

31. vue改变组件触发视图更新（如何设置响应式属性）？

• 初始化时写入data属性

• 调用方法：Vue.set(target, key, value)

• 以下方法的调用会更改原始数组：push()，pop()，shift()，unshift()，splice()，sort()，reverse()

32. DOM渲染在哪个周期中就完成了？

• mounted阶段。mounted不会承诺所有子组件都一起被挂载，使用vm.$nextTick可以实现整个视图已经渲染完毕。

33. 简述每个生命周期具体适合哪些操作？

• beforecreated：可以在这加个loading事件，在加载实例时触发；

• created：初始化完成时的事件写在这里，如结束loading、异步请求调用；

• mounted：挂在节点，获取DOM节点；

• updated：对数据统一处理；

• beforeDestory：可做确认停止事件。

34. 第一次加载会触发哪几个钩子？

• beforeCreate、created、beforeMount、mounted