[JavaScript知识库]Vue高频面试题(1)

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

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，但浏览器不会立即向后端发送请求。