vue面试题汇总

vue

1.vue优点

• 操作虚拟dom,节省页面性能。

• 数据视图相分离。视图可以独立于数据变化和修改，当数据变化的时候视图也可以不变。

• 便于维护。
  2.vue响应式原理
  vue的响应式
  3.单向数据流和双向数据流
  单向数据流：数据流动方向可以跟踪，流动单一。缺点是写起来不太方便。要使视图发生变更就必须创建各种action来维护对应的state。
  双向数据流：数据和视图双绑定。但是由于各种数据相互依赖相互绑定，导致数据问题的源头难以被跟踪到，子组件修改父组件，兄弟组件互相修改有有违设计原则。
  4.双向数据绑定实现原理
  vue2.0利用Object.defineProperty，采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
  5.vue的diff算法
  详解vue的diff算法
  6.vue常见指令以及用法

• v-pre:跳过编译，直接显示。

• v-cloak:与display:none结合，防止初始化页面闪动问题。

• v-html:类似于innerHTML,插入html结构。

• v-text:插入文本。

• v-on:给元素绑定事件，可缩写为@

• v-bind:动态绑定一个或过个属性，缩写:

• v-model:双向数据绑定

• v-if:条件渲染

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

• v-once:只渲染编译一次。

7.v-if与v-show区别
v-if:相当于将元素从结构中删除，v-show相当于给元素设置了display:none属性，
8.v-for如何与v-if一起使用
当v-for与v-if都处于同一个节点时，v-for的优先级要大于v-if，也就是说v-if将分别在循环中的每次迭代上运行，这样会影响性能，因此，解决办法有：①用计算属性返回一个新的值。②将v-if加到父元素上。
9.为什么要使用key以及key为什么不能用index
使用key是为了给节点做一个唯一标识，为了更高效的更新虚拟dom.使用index会造成当index改变时，渲染的视图结构也会改变,会重新渲染，影响了性能。
10.v-on修饰符以及用法

• .stop:阻止事件冒泡
• .prevent:阻止默认事件
• .capture:阻止事件捕获
• .self:只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .once:只触发一次。
• native:监听组件根元素的原生事件。
  11.$nextTick的使用
  修改数据之后立即使用它，可以拿到修改之后的数据。
  12.单页面应用和多页面应用
  单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
  多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新
  单页面的优点：
  用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。
  单页面缺点：
  不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。
  13.vue生命周期以及钩子函数
  
  14.第一次页面加载会触发哪几个钩子
  beforeCreate,created,beforeMount,mounted
  15.created和mounted的区别
  created：数据和方法初始化完毕。
  mounted:模板以及编译成了html结构，页面以及初始化完毕。
  16.计算属性和method、侦听器的区别
  计算属性VS方法：
  计算属性可以基于响应式依赖进行缓存，只有在相关响应式依赖发生改变时他们才会重新求值。
  methods方法:每次渲染都会调用函数。
  计算属性VS侦听器：
  当一个数据影响多个数据时用侦听器，多个数据影响一个数据时用计算属性。涉及到异步处理的时候用侦听器。
  17.组件通信
  父传子：prop,$attrs,$parent,provide&&inject
  子传父：$emit,$listeners,$children,$refs
  兄弟：eventBus事件总线
  18.vue更新数组时触发视图更新的方法
  要用数组变异方法：push()；pop()；shift()；unshift()；splice()； sort()；reverse()
  19.params和query的区别
  用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。
  url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
  注意点：query刷新不会丢失query里面的数据
  params刷新 会 丢失 params里面的数据。
  20.vue初始化页面闪动问题
  使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。
  首先：在css里加上

[v-cloak] {
	display: none;
}

如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"
21.Vue2中注册在router-link上事件无效解决方法
使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。
22.vue组件中data为什么必须是一个函数
这是由js特性决定的,data是在构造器的原型链上被创建的，如果data是一个函数，这样每次复用一次组件，就会给每一个组件创建一个私有的数据空间，组件内改变数据不会影响其他组件对数据的使用。如果是对象形式，就使得所有组件共享了一份data，一个组件内的数据改变就会影响其他组件对该数据的使用。
23.的作用是什么
使被包含的组件保留状态，避免重新渲染。
24.MVVM框架
MVVM即model-view-viewmodel,在 MVVM 中，视图(view)是通过数据驱动的，数据一旦改变就会相应的刷新对应的视图(view)，视图(view)如果改变，也会改变对应的数据。这种方式就可以在业务处理中只关心数据的流转，而无需直接和页面打交道。ViewModel 只关心数据和业务的处理，不关心 View 如何处理数据，在这种情况下，View 和 Model 都可以独立出来，任何一方改变了也不一定需要改变另一方，并且可以将一些可复用的逻辑放在一个 ViewModel 中，让多个 View复用这个 ViewModel。
25.渐进式框架的理解
主张最少；可以根据不同的需求选择不同的层级；
26.$route和$router的区别
$router是VueRouter的实例，$route为当前router跳转对象。
27.如何让CSS只在当前组件中起作用
在style标签内加上scoped
28.构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么

• vue.js：vue-cli工程的核心，主要特点是 双向数据绑定 和 组件系统。
• vue-router：vue官方推荐使用的路由框架。
• vuex：专为 Vue.js 应用项目开发的状态管理器，主要用于维护vue组件间共用的一些 变量 和 方法。
• axios（ 或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http请求，基于 Promise 设计。
• 创建一个emit.js文件，用于vue事件机制的管理。
• webpack：模块加载和vue-cli工程打包器。
  29.在Vue中使用插件的步骤
• 采用ES6的import ... from ...语法或CommonJS的require()方法引入插件
• 使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })

vue路由

1.vue-router的两种模式

• hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
• history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

2.怎么定义 vue-router 的动态路由? 怎么获取传过来的值
在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id。即this.$route.params.id
3.vue-router实现路由懒加载（ 动态加载路由 ）
答:三种方式
第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。

{
  path: '/home',
  name: 'home',
  component: resolve => require(['@/components/home'],resolve)
}

第二种：路由懒加载(使用import)。

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。 把组件按组分块
const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')

第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
  path: '/index',
  name: 'Index',
  component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}, {
  path: '/about',
  name: 'about',
  component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')
}

4.vue路由导航守卫

• 全局前置守卫：router.beforeEach
• 全局解析守卫：router.beforeResolve在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
• 全局后置钩子：router.afterEach不会接受 next 函数也不会改变导航本身。
• 路由独享守卫：beforeEnter。
• 组件内的守卫：beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave
  注意：beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
  不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

vuex

1.vuex是什么（建议说的详细一些,结合五种属性说，此处简写）
vuex是一个状态管理器，是为了解决组件间复杂数据的通信。
2.vuex有哪几种属性
有五种，分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中
如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。直接在methods里请求。
如果被其他地方复用，请将请求放入action里，方便复用。
4.mutations和actions的区别
Action 提交的是 mutation，而不是直接变更状态。Action可以包含任意一部操作。

整理仅用于复习，如有错误，欢迎指正~