2019前端Vue面试题（Vue篇）（上）

2019前端面试题（Vue篇）（上）

近几年Vue的发展尤为迅速，在中小型的项目上应用广泛，而且也是我们在经历面试时的高频问题，所以我们要怎么去很好的回答这些Vue的面试题呢？
话不多说，直接看！

1. 说一下Vue最大的特点是什么 或者Vue的核心是什么？
   答：Vue的主要特点我觉得是组件化，第二个就是数据驱动，
   组件化呢就是可以将页面和页面之间的需要复用的元素都看做成组件，这样我们在写页面的过程就相当于写组件，然后页面就是这些组件“拼接”起来的组件库。
   数据驱动就是只需要我们关注数据层，只要它的数据变化，就会引起它的视图层变化，它会自动更新，至于如何操作dom，完全就交由vue自己去完成了，我们只需要关注数据的变化即可。

2. 说一下Vue的基本常用指令有哪些吧

   1.v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
   2.v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat),需 要注意从vue2开始取消了$index
   3.v-show 显示内容 （同angular中的ng-show）
   4.v-hide 隐藏内容（同angular中的ng-hide）
   5.v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
   6.v-else-if 必须和v-if连用
   7.v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
   8.v-bind 动态绑定 作用： 及时对页面的数据进行更改
   9.v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
   10.v-text 解析文本
   11.v-html 解析html标签
   12.v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’
   13.v-once 进入页面时 只渲染一次 不在进行渲染
   14.v-cloak 防止闪烁
   15.v-pre 把标签内部的元素原位输出

3. Vue常用的修饰符
   v-on指令常用修饰符：
   .stop - 调用event.stopPropagatation()，禁止事件冒泡
   .prevent - 调用 event.preventDefault()，阻止事件默认行为。
   .capture - 添加事件侦听器时使用 capture 模式。
   .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
   .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
   .native - 监听组件根元素的原生事件。
   .once - 只触发一次回调。
   .left - (2.2.0) 只当点击鼠标左键时触发。
   .right - (2.2.0) 只当点击鼠标右键时触发。
   .middle - (2.2.0) 只当点击鼠标中键时触发。
   .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
   注意： 如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用`·.native修饰符了，如：

<el-input
  v-model="inputName"
  placeholder="搜索你的文件"
  @keyup.enter.native="searchFile(params)"
  >
</el-input>

v-bind 指令常用修饰符：
.prop - 被用于绑定 DOM 属性 (property)。(差别在哪里？)
.camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
v-model 指令常用修饰符：
.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为数字
.trim - 输入首尾空格过滤

4. Vue 组件中 data 为什么必须是函数？
   因为一个组件是可以共享的，但他们的data是私有的，所以每个组件都要return一个新的data对象，返回一个唯一的对象，不要和其他组件共用一个对象。

5. v-if和v-show的区别？
   v-if和v-show都可以显示和隐藏一个元素，但有本质区别
   v-if是惰性的，只是值为false就不会加载对应元素，为true才动态加载对应元素
   v-show:是无论为true和为false都会加载对应html代码，但为false时用display:none隐藏不在页面显示，但为true时页面上用display:block显示其效果
   适用场景：切换频繁的场合用v-show,切换不频繁的场合用v-if

6.说一下vue自定义指令如何实现的和适用场景？
vue除有了v-for,v-if等自带vue指令外,但不能满足所有的开发需求，有时需要自定义指令，自定义指令创建有全局自定义指令和局部自定义指令
全局自定义指令：Vue.directive(‘指令名’,{ inserted(el) { } })
局部自定义指令：directives:{ }
7.vue过滤器做什么的(vue1.x和vue2.x这块的区别)
vue过滤器主要用于对渲染出来的数据进行格式化处理。例如：后台返回的数据性别用0和1表示，但渲染到页面上不能是0和1我得转换为“男“和”女”，这时就会用到过滤器，还有商品价格读取出来的是普通数值，例如：230035,但我要在前面加个货币符号和千分分隔等，例如变成：￥230，035,都得需要vue过滤器

如何创建过滤器呢，跟创建自定义指令类似，也有全局和局部过滤器的形式

全局过滤器：

Vue.filter(‘过滤器名’,function(参数1,参数2,…) {

      //………..
      return 要返回的数据格式
})

局部过滤器：在组件内部添加filters属性来定义过滤器

fitlers:{
   过滤器名(参数1,参数2,,…参数n) {
       //………..
      return 要返回的数据格式

    }
}

8.vue生命周期钩子函数有哪些，分别什么时候触发
vue生命周期即为一个组件从出生到死亡的一个完整周期，主要包括以下4个阶段：

创建，挂载，更新，销毁

创建前：beforeCreate, 创建后:created
挂载前：beforeMount, 挂载后：mounted
更新前：beforeUpdate, 更新后：updated
销毁前：beforeDestroy, 销毁后：destroyed
我自己呢平常用created和mounted比较多，created用于获取后台数据，mounted用于dom挂载完后做一些dom操作,以及初始化插件等.beforeDestroy用户清除定时器以及解绑事件等,
另外还新增了使用内置组件 keep-alive 来缓存实例，而不是频繁创建和销毁(开销大)
actived 实例激活
deactived 实例失效

下面是详细解释每一个钩子函数
生命周期钩子函数（11个）Function（类型），标注蓝色的那个是属于类型的意思。
beforeCreate Function 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created Function 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el属性目前不可见。beforeMountFunction在挂载开始之前被调用：相关的render函数首次被调用。mountedFunctionel被新创建的vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate Function 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
updated Function 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
activated Function keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated Function keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
beforeDestroy Function 实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
destroyed Function Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
errorCaptured（2.5.0+ 新增） (err: Error, vm: Component, info: string) => ?boolean 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
9.说一下vue组件通讯（即传值）有哪几种形式，分别是如何实现的
vue组件通讯大致有三种：父传子，子传父，还有兄弟之间通讯

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

第二种：子传父：主要通过$emit来实现具体实现：子组件通过通过绑定事件触发函数，在其中设置this.$emit(‘要派发的自定义事件’，要传递的值)，$emit中有两个参数一是要派发的自定义事件，第二个参数是要传递的值
然后父组件中,在这个子组件身上@派发的自定义事件,绑定事件触发的methods中的方法接受的默认值,就是传递过来的参数

第三种：兄弟之间传值有两种方法：
方法一：通过event bus实现
具体实现:创建一个空的vue并暴露出去，这个作为公共的bus,即当作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的bus，在组件A中通过bus.$emit（’自定义事件名’，要发送的值）发送数据，在组件B中通过bus.$on（‘自定义事件名‘,function(v) { //v即为要接收的值 }）接收数据

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

9.vue封装组件中的slot作用
vue封装组件涉及三个东西:
一是事件(v-on,$emit)，
二是传参通过props
三是slot：slot作用主要是可以实现内容分发，组件标签内嵌套内容，可通过来定义占位的内容
分为具名的slot和匿名的slot
在编写可复用组件的时候，时刻考虑组件是否可复用是有好处的。一次性组件跟其他组件紧密耦合没关系，但是可复用组件一定要定义一个清晰的公开接口。

Vue.js组件 API 来自 三部分：prop、事件、slot：
prop 允许外部环境传递数据给组件，在vue-cli工程中也可以使用vuex等传递数据。
事件允许组件触发外部环境的 action(就是行为,也就是方法的意思)
slot 允许外部环境将内容插入到组件的视图结构内。（自己理解）

10.vue转场动画如何实现的
vue转场动画主要通过vue中的提供的transition组件实现的，例如；

<transition name=”名称”>
        <router-view></router-view>
</transition>

其中name为转场的名称，自己定义，可通过定义进入和离开两种转场动画，格式为：
.名称-enter ｛ ｝ //将要进入动画
.名称-enter-active { } //定义进入的过程动画
.名称-leave { } //将要离开的动画
.名称-leave-active { } //定义离开过程中的动画

实际应用链接：Vue的转场动画，Vue内置动画

11.Vue中的单向数据流
单向数据流主要是vue 组件间传递数据是单向的，即数据总是由父组件传递给子组件，子组件在其内部维护自己的数据，但它无权修改父组件传递给它的数据，当开发者尝试这样做的时候，vue 将会报错。这样做是为了组件间更好的维护。
在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以 vue 不推荐子组件修改父组件的数据

这只是上半部分，在这里祝愿大家看完帖子，可以找到属于自己心仪的那一份offer！！！

下半部分：2019前端面试题（Vue篇）（下）