Vue 面试题

P6Vue 面试题
前言

Vue框架
是一个致力打造构建用户界面的渐进式框架。

---

提示：以下是本篇文章正文内容，下面案例可供参考

A类

A1. let 和var 的区别

相同点：
  作用都是定义变量关键字

区别点 :
   作用域只限制与当前代码块{} -------------- var 的作用域则是函数体function(){}
   使用let声明变量的作用于不会提升 ----- 而var会自动提升
   在相同的作用于下不能有相同发的变量，否则会报错 ----- 而var中则可以出现相同变量名，且不会报错，for循环提现父子作用域

A2. 解构赋值是什么

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destrycturing）
  解构赋值，左右结构必须一样，使用左边定义的值，快速的去除数据中对应的数据值，而且定义和赋值必须放到一起，不然的话就会报错，取不出来数据值，而且左边也必须是一个js存在数据结构不然的话也会报错，解构赋值的主要作用还是 快速的让我们在数据中榨取我们想要的数据

A3. 基本数据类型和引用数据类型的区别

ECMAScript 变量包含两种不同类型的值：基本数据类型、引用数据类型

  基本数据类型：指的是简单数据段 // Undefined、Null、Boolean、Number 和 String
  引用数据类型：指的是那些可能有多个值定义的对象 // Array、Object、Function 等

A4. 子组件如何传值给夫组件

  具体实现：子组件通过绑定事件触发函数，在其中设置 this.$emit(‘要派发的自定义事件’,要传递的值),
   $emit 中有两个参数 一是要派发的自定义事件，第二个参数是要传递的值

A5. v-if 和 v-show 的区别及使用场景

  当一个元素会被频繁的显示和隐藏时，使用v-show
  当元素在响应式网页的操作过程中，根据不同用户的需求，可能永远不会被显示或隐藏时，则使用v-if

A6. v-cloak 有什么作用？

  v-cloak 能够解决插值表达式闪烁的问题，需要在style中设置样式 [v-cloak]{display:none}

A7. 组件之间的通讯分几种 分别是什么？

第一种：夫传字：
  主要通过 props 来实现的 具体实现：父组件通过 import 引入子组件，并注册，在子组件标签上添加要传递的属性，子组件通过 props 接收，接收有两种形式 一是通过数组形式[‘要接收的属性’]， 二是通过对象形式 { } 来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收

第二种：子传夫
  主要通过 $ emit 来实现 具体实现： 子组件通过绑定事件触发函数，在其中设置 this. $ emit(‘要派发的自定义事件’,
要传递的值)， $ emit 中有两个参数 一是 要派发的自定义事件，第二个参数是要传递的值
第三种：兄弟之间传值
  方式一：通过 event bus 实现 具体实现：创建一个空的 vue 并暴露出去，这个作为公共的 bus ，即当两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的 bus ，在组件A中通过bus.$emit(‘自定义事件名’，要发送的值) 发送数据，在组件B中 通过bus. $on(‘自定义事件名’,function(){ 即为要接受的值 }) 接收数据

  方式二：通过 vuex 实现 具体实现：vuex 是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括 state，actions，mutations，getters 和 modules 5 个要素，主要流程：组件通过 dispatch 到 actions，actions 是异步操作，再actions 中通过commit 到 mutations，mutations 再通过逻辑操作改变 state，从而同步到组件，更新其数据状态

A8. Vue-router 共有几种模式 默认是哪种？

  对于 Vue 这类渐进式前端开发框架，为了构建 SPA(单页面应用)，需要引入前端路由系统这也就是 Vue-router 存在的意义。前端路由的核心，就在于——改变试图的同时不会向后端发出请求。为了达到这个目的，浏览器提供了以下两种支持：

1. hash —— 即地址栏 URL 中的#符号（此 hash 不是密码学里的散列运算）比如这个 URL:http://www.abc/#/hello, hash 的值为#/hello。 它的特点在于：hash 虽然出现 URL 中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
2. history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）

A9. Vuex是什么

具体表现：
  vuex 是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括 state,actions,mutations,getters 和 modules 5个要素， 主要流程：组件通过dispatch到actions，actions是异步操作，再actions 中通过commit到mutations，mutations再通过逻辑操作改变state，从而同步到组件，更新其数据状态

A10. Vue.js 的两个核心是什么

  数据驱动 组件系统

A11. Vue如何自定义过滤器

  过滤器：生活中有很多例子， 净水机 空气净化器
  过滤器的作用：实现数据的筛选、过滤、格式化
  局部的 filters 全局的 Vue.filter
   语法： {{表达式 | 过滤器}}
注意：过滤器需要设置返回值

filters:{
	//myInput 是通过管道传来的数据
	//arg1 在调用过滤器时在圆括号中第一个参数
	//arg2 在调用过滤器时在圆括号中第二个参数
	myCurrency:function(myInput,arg1,arg2){
		return //处理后的数据
	}

}

A12. Vue如何新增自定义指令

  全局指令 使用Vue.directive() 来全局注册指令
  局部指令 也可以注册局部指令，组件或Vue构造函数中接收一个directives 的选项
钩子函数 指令定义函数提供了几个钩子函数（可选）
bind 只调用一次， 指令第一次绑定到父元素时调用，用这个钩子函数可以定义一个 在绑定时执行一次的初始化动作
inserted 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document中）
update 所在组件的 VNode更新时调用，但是可能发生在其孩子的VNode 更新之前，指令的值可能发生了改变也可能没有 但是可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated 所在组件的VNode及孩子的VNode 全部更新时调用
unbind 只调用一次 指令与元素解绑时调用 。 钩子函数参数 钩子函数被赋予了以下参数
el 指令所绑定的元素 ， 可以用来直接操作DOM
binding 一个对象，包含以下属性：name：指令名，不包括 v- 前缀 value ：指令的绑定值， 例如 v-my-directive=“1+1”,value 的值是 2 . oldValue:指令绑定的前一个值，仅在 update 和componentUpdated 钩子中可用。无论值是否改变都可以用。 expression：绑定的字符串形式。 例如 v-my-directive=‘1+1’，expression 的值是"1+1"，arg：传给指令的参数。例如 v-my-directive:foo.arg的值是"foo"。modafiers:一个包含修饰符的对象。例如：v-my-directive.foo,bar，修饰符对象 modifiers 的值是{foo:true,bar:true}

A13. 路由对象route 和 router 的 区别

   route 路由信息对象
   router 路由实例

A14. params和query 的区别

  query 传参：通过在 router-link 或 this.$ router.push() 传递 url 地址并且拼接?问号传递参数 例如： router-link to="/goods?id=1001",然后在接受的页面通过 this.$ router.qurey.id 来接收 优点：通用性比较好，刷新数据不会丢失
  params 传参：通过在router-link 或this.$ router.push() 传递 url 地址并且 拼接的参数也用 / 来表示 例如：router-link to="/goods/1001"，并且在路由页面通过 router=[{path:’/goods/:id’}] 配置，最后在接受的页面通过 this. $ route.params.id 来接收 优点：传递数据量在，优雅 缺点：刷新数据不会丢失

A15. axios 常用的请求方式有哪些

   axios.get
   axios.post
   axios.all
   axios.put
   axios.delete

A16. $nextTick的作用

   Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新
   $nextTick 是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用 $ nextTick,则可以在回调中获取更新后的DOM

A17. Vue路由的跳转方式有几种

1. < router-link to=“需要跳转到页面的路径” >
2. this. $ router.push() 跳转到指定的url，并在history中添加记录，点击回退返回上一页面
3. this.$ router.replace() 跳转到指定的url,但是history中不会添加记录，点击回退到上上个页面
4. this.$ touter.go(n) 向前或者后跳转n个页面， n可以是正数也可以是负数

B类

B1. 什么是Vue的计算属性

   在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采用计算属性的方式

B2. set数据结构有哪些常用的属性和方法

   size: 返回Set实例的成员总数
   add(value): 添加某个值，返回Set 结构本身
   delete(value): 删除某个值，返回一个布尔值，表示删除是否成功
   has(value): 返回一个布尔值，表示该值是否为Set的成员
   clear(value):清除所有成员，没有返回值

B3. 箭头函数和function区别或新增了那些特性

   写法不同
   this 的 指向不同
   箭头函数不可以当构造函数
   变量提升

B4.Promise 常用方式有哪些及作用是什么

   Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法

1. 主要用于异步计算
2. 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3. 可以在对象中间传递和操作 promisr，帮助我们处理队列
      resolve 作用是，将Promise 对象的状态从“未完成”变为“成功”（即从pending变为resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
      reject 作用是，将Promise 对象的状态从“未完成”变为“失败”（即从pending变为rejected），
   在异步操作失败时调用，并将异步操作爆出的错误，作为参数传递出去。

B5. vue 中 key 的作用

   key 值：用于管理可复用的元素。因为Vue会尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。这么做使Vue变得非常快，但是这样也不会总是符合实际需求。2.2.0+ 的版本里，当在组件中使用v-for 时，key是必须的

B6. Vue中双向绑定是如何实现的

   vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过’Object.defineProperty()‘ 来劫持各个属性的’setter‘，’getter‘,在数据变动时发布消息给订阅者，触发相应的监听回调

B7. keep-alive 的使用

1. 在 vue项目中，难免会有列表页面或者搜索结果列表页面，点击某个结果时候之后，返回回来时，如果不对结果页面进行缓存，那么返回列表页面的时候会回到初始状态，但是我们想要的结果是返回时这个页面还是之前搜索的结果列表，这时候就需要用到 vue 的 keep-alive 技术了
2. 在 router-view 上使用可以缓存该路由组件
3. 有两个参数 include - 字符串或正则表达式，只有匹配的组件会被缓存 exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

B8. Props 验证类型都有哪些

  String
  Number
  Boolean
  Function
  Object
  Array
  Symbol

B9. created 和mounted 的区别

   created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成试图
   mounted：在模板渲染成html后调用，通常是初始化页面完成后，在对hmtl的dom节点进行一些需要的操作

B10. assets 和static的区别

assets中的文件会经过webpack打包，重新编译，推荐在assets存放 js 等需要打包编译的文件
static 中的文件，不会打包编译。static中的文件只是复制一遍
static 中建议放一些外部第三方文件，自己的放assets里，别人的放static中（图片推荐放在static里）

B11. vuex 中如何异步修改数据

首先，概括下 vuex 基本使用流程为：在action中分发异步请求，在异步回调中提交mutation，在mutation中修改state，使用getters对state的值进行计算封装

B12. 简述拦截器是什么，共有几个拦截点，分别时什么？

  在数据发送之前或相应之后处理
   请求拦截器 相应拦截器

B13. vue的双向绑定原理

  Object.defineProperty() 来劫持各个属性的 setter / getter
   在数据变动时发布消息给订阅者，触发相应的监听回调

B14. 路由的守卫有几种

1. 全局路由守卫 所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查 全局路由守卫有两个：一个是全局前置守卫，一个是屈居后置守卫
   router.beforEach((to,from,next)=>{
   console.log(to) ------ 到那个页面去
   consloe.log(from) ----- 从哪个页面来
   next() ----- 一个回调函数
   })
   router.afterEach(to,from)={
   }
   next(): 回调函数参数配置 next(false): 中断当前的导航。 如果浏览器的 URL 改变了（可能是用户手动 或者浏览器后退按钮），那么URL地址会重置到 from 路由对应的地址 next(’/’) 或者 next({path:’/’}):跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace：true、name：‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项
2. 组件路由守卫 // 跟methods:{} 等同级别书写，组件路由守卫是写在每个单独的 vue 文件里面的路由守卫
   beforeRouteEnter(to,from,next){
   // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过 vm 来访问组件实例
   next(vm=>{})
   }
   beforeRouteUpdate(to,from,next){
   //同一页面，刷新不同数据时调用
   }
   beforeRouteLeave(to,from,next){
   // 离开当前路由页面时调用
   }
3. 路由独享守卫 路由独享守卫是在路由页面单独给路由配置的一个守卫
   exprot default new VueRouter({
   routers:[
   {
   path:’/’,
   name:‘home’,
   component:‘Home’,
   beforeEnter:(to,from,next)=>{
   // …
   }
   }
   ]
   }]

B15. 如何让css只在当前vue组建起作用

   在style标签中写入scoped即可 例如：’’

B16. vue常用的修饰符

   .stop：等同于Javascript中的event.stopPropagation(),防止事件冒泡
   .prevent: 等同于Javascript中的event.preventDefault(),防止执行预设的行为（如果事件可取消，则取消事件，而不停止事件的进一步传播）
   .capture: 与事件冒泡的方向相反，事件捕获由外到内
   .self: 只触发自己范围内的事件，不包含子元素
   .once: 只会触发一次
   .up: 向上键
   .down: 向下键
   .left: 向左键
   .right: 向右键

B17. 怎么定义 vue-router 的动态路由？ 怎么获取传过来的值

   在 router 的目录下的 index.js 文件中，对 path 属性加上 /:id,
   使用 router 对象的 params.id 获取

C类

C1. 路由钩子函数共有几种？分别是什么？参数to,from,next 分别是什么意思？

   全局钩子
   某个路由的钩子
   组件内钩子
   to.router 即将进入的路由对象
   from：当前导航即将离开的路由
   next:function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed (确认的)； 否则为false ，终止导航

C2. Element ui 完整引入步骤及按需引入步骤是什么？

完整引入
在 main.js 中加入以下内容：
import ElementUI from “element-ui”
import “element-ui/lib/theme-chalk/index.css”
Vue.use(ElementUI)
以上代码添加完成了 Element 的引入。 需要注意的是，样式文件的是，样式文件需要单独引入

按需引入（需要配置环境）
借助 babel-plugin-component, 我们可以只引入需要的组件，以达到减小项目体积的目的
首先，安装 babel-plugin-component:
cnpm install babel-plugin-component -D
然后，将.babel 修改为：
{
‘presets’:[[‘es2015’,{“modules”:‘false’}]],
‘plugins’:[
‘component’,
{
‘libraryName’:‘element-ui’,
‘styleLibraryName’:‘theme-chalk’
}
]
]
}
接下来，如果你只希望引入部分组件，在 main.js 中写入创建好的
elementUi.js
elementUi.js 中：
import Vue from ‘vue’
import {Button,Select} from ‘element-ui’
Vue.use(Button)
Vue.use(Select)

C3. 介绍Vuex 的核心概念及作用？

   state 数据源载体
   getters 用于改变state 的值，派生出多个数据源
   mutation 唯一可以改变state的状态，也就是数据的属性值
   actions 提交的是mutation，用commit 提交 而不是直接变更状态，可以包含任意异步出操作
   modules 拆分成多个模块

C4. Vue 与Angular以及React 的区别

React采用特殊的JSX语法