Vue高频面试题

一.常用指令有哪些?并说明作用?  ★★

vue官方提供指令有15个:

• v-model:用于表单元素双向数据绑定.
• v-for:循环,多用于循环数组.
• v-if:显示与隐藏(v-else-if  v-else  这两需要搭配v-if使用)
• v-show:显示内容
• v-hide:隐藏内容
• v-on:绑定事件,简写@
• v-html:解析html标签
• v-text:接卸文本
• v-bind:动态添加标签属性(三种绑定方法:1-对象型:{red:isred},2.三元表达式: isred? 'red':'blue' 3-数组型:'[{red:"isred"},{blue:"isblue"}]')
• v-once:进入页面时,只渲染一次
• v-cloak:防止闪烁
• v-pra:把标签元素原位输出

二.生命周期钩子函数及应用场景?★★★★

vue生命周期分为4个阶段,分别是: 初始化阶段===>挂载阶段===>更新阶段===>销毁阶段

vue官方有11个钩子函数,这四个阶段有8个钩子函数:

初始化阶段:

1.  beforeCreate (创建前) : vur(组件)对象被创建,但是vue对象的属性还没有绑定.
2. created (创建后): 组件实列创建完毕后自动触发,vue对象属性有值了,但是Dom还未生成,常用(页面加载发送ajax请求)

挂载阶段:

1. beforeMount (载入前):组件挂载之前，render函数第一次被调用
2.  mounted (载入后): mouted组件挂载阶段，这个阶段组件已经挂载到实例上，页面上已经开始初步渲染

更新阶段:

1.  beforeUpdate (更新前):数据更新时调用，vue（组件）对象对应的dom中的内部（innerHTML）还没有变,这里适合在更新之前访问 ,现有的 DOM，比如手动移除已添加的事件监听器。
2.  updated (更新后):由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子

销毁阶段:

1.  beforeDestroy (销毁前):实列销毁之前调用.

2.  destroyed (销毁后):进入组件销毁阶段，这个阶段组件上的所有数据解除绑定，事件也开始移除，所有子组件实例也已销毁

 剩余的三个钩子函数,用的比较少,了解一下就行了。

1. activated  (组件激活时),
2. deactivated  (组件失活时)
3.  errorCaptured（2.5.0+ 新增） (捕获到错误时)

三.Vue 常用的修饰符都有哪些？★★★

主要分为表单修饰符v-model和事件修饰符v-on

v-model修饰符

• v-model.number 以parseFloat转成数字类型

• v-model.trim 去除首尾空白字符

• v-model.lazy 在change时触发而非inupt时,lazy这个修饰符会在光标离开input框才会更新数据

v-on修饰符
@click.stop - 阻止事件冒泡

@click.prevent - 阻止默认行为

@click.once - 程序运行期间, 只触发一次事件处理函数

.@click.native 在组件内使用,如果组件没有事件,则native可以添加一个原生事件

@keyup.enter - 监测回车按键

@keyup.esc - 监测返回按键

四.路由的钩子函数(或者守卫)及应用?★★★

路由守卫总共有七个,分三类(全局路由守卫,单个独享,组件级)

1. 全局前置守卫：router.beforeEach（） 当导航触发时，依次执行

2. 全局解析守卫：router.beforeResolve（） 在所有组件内守卫和异步路由组件被解析之后调用

3.  路由独享守卫：beforeEnter

4. 全局后置钩子：router.afterEach() 两个参数，没有next函数，也不会改变导航本身

5. 组件内守卫分三个 :beforeRouteEnter，在进入当前组件之前被调用，无法获取组件实例,beforeRouteUpdate,，在当前路由改变，但是该组件被复用时调用,beforeRouteLeave，导航离开该组件的对应路由时调用

五.v-show和v-if的区别?★★

相同点: v-if 与 v-show 都可以动态控制 DOM 元素的显示隐藏

不同点:

v-if 是动态的向 DOM 树内添加或者删除 DOM 元素；v-show 是通过设置 DOM 元素的 display 样式属性控制显示隐藏，DOM 元素保留；

v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只是简单的基于 CSS 切换；

v-if初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且 DOM 元素保留；

v-if 有更高的切换消耗；v-show 有更高的初始渲染消耗；

v-if 适合运营条件不大可能改变；v-show 适合频繁切换

六.v-if和v-for能不能一起使用?为什么?★★★

原因:

不能,因为v-for的优先级比v-if的优先级高,所以每次渲染时都会先循环再进行条件判断,而又因为v-if会根据渲染条件为ture或false来决定渲染与否的,循环了不一定渲染，所以，如果将v-if 和 v-for 用在一起会特别消耗性能
解决方法:

1. 将v-if放在外层嵌套的template（页面渲染不生成dom节点）中，在这一层进行v-if判断，然后在内部进行v-for循环
2. 如果条件出现在循环内部,不得不放在一起时,可通过计算属性computed提前过滤掉那些不需要显示的项

七.watch和computed,methods 的区别?★★★

相同点:

methods,watch 和 computed 都是以函数为基础的,它们都是通过监听自身依赖的数据在变化时触发相关的函数去实现自身数据的变动,

不同点一加载顺序不同:

1. computed:是在HTMl,Dom加载后马山执行(如赋值)
2. methods:必须要有一定的触发条件才能执行,(如点击事件)
3. watch: 它是用来观察Vue实列上的数据变动.
4. 当不执行methods时执行顺序是先computed===>watch
5. 当触发某一事件后,是先computed==>methods==>watch

不同点二加载方式:

watch和computed是通过监听自身相关响应式依赖项发生变化时自动的去更新自身的数据,而methods是用来定义函数的,需要手动才能执行数据的变化

八.Vue的两种路由模式及区别?★★

两种模式分别是hash模式和history模式.

区别:

1. hash 是地址栏 URL 中的 # 符号。比如这个 URL：http://www.abc.com/#/hello, hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

2. 而history是提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

九.Vue组件通讯的方式?★★★★

Vue中组件传值常用的几种方式

第一种: 父向子传值

父组件在子组件上自定义属性,然后子组件中用props接收

第二种: 子向父传值

父件先在子组件标签上面自定义事件,子组件中用$emit触发父组件事件,并且携带参数传过去

第三种: 深度嵌套组件(例如爷孙组件)

无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者.父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

(并且,provide如果想要访问实例prototype上面的属性,要写成函数形式并且return)

第四种: 非父子组件传值

1、引入第三方 new Vue 定义为 eventBus

2、在组件中 created 中订阅方法 eventBus.$on("自定义事件名",methods

中的方法名)

3、在另一个兄弟组件中的 methods 中写函数，在函数中发布 eventBus 订

阅的方法 eventBus.$emit("自定义事件名”)

第五种:  vux

十.组件缓存?★★★

vue要想实现组件缓存，需要用到vue中的一个内置组件<keep-alive>因为  <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

所以它主要用于保留组件状态或避免重新渲染

十一.Vue响应式原理(双向数据绑定)★★★★★

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式来实现的，具体来说主要有两  点：

1.通过object.defineproperty这个api在vue实例上添加属性,当我们修改数据时,就会触发相应的setter里面的回调函数,来实现页面的更新

2.使用观察者模式设计，实现了指令和数据的依赖关系，以及触发更新