vue.js面试题

什么是对象，面向对象的三大特征？

对象就是属性和方法的集合。面向对象的三大特征是继承、封装、多态

创建对象的方法，访问属性的方法有哪些？

1.字面量创建的方式 比如 let obj = {name:1,age:100};
2.实例化对象的方式 let obj = new Object();
3.构造函数方式
4.工厂模式创建对象

对象的属性怎么访问 有什么区别？

对象的属性可以通过.或者【】来访问，区别如下
1…访问属性名必须符合标识符的命名规范，.后面不能跟变量，属性名不能跟引导
2.【】访问的属性名可以不符合标识符的命名规范，可以使用变量，比如for循环中

改变this指针指向的方法有哪些？

call、apply、bind方法都可以改变函数的this的指向
1.call方法apply调用后函数会立即执行，bind方法不会立即执行函数
2.call方法和bind方法后面跟的是蚕食列表，apply的参数是一个数组

什么是原型？

每一个构造函数都有一个prototype属性，这个属性称之为韩式的显示原型
构造函数实例化之后或者对象都有一个_proto_属性，称之为对象的隐式原型
后续原型链就是通过proto查找属性的

什么是原型链？

当我们访问独一想的某个属性的时候，会先行当前的对象中查找，如果没有找到
则继续去对象的proto隐式原型中去查找，如果还没有找到则继续去向上级对象的原型中查找，知道找到顶层Object对象，如果没有找到返回undefined，这种通过原型查找属性的链条关系就叫做原型链

prototype、proto、constructor三者之间的关系

1.每个构造函数都有一个prototype属性，prototype有一个constructor指向构造函数本身
2.党构造函数实例化之后，有proto属性，proto指向构造函数的prototype属性

Es5继承方法有哪些？

1.原型链继承，把父方法的实例化对象赋给子方法的原型，不仅可以使用父方法自身的属性，也可以使用父方法原型中的属性，不能传参
2.构造函数继承，在子方法使用call或者apply关键字通过改变this指向继承，可以传递参数，不能使用父方法原型中的属性

Es6中class类

Es6的class可以看做是一个语法糖，它的绝大部分功能Es5都能做到，新的class写法只是让对象原型的写法更加的清晰，更像面向对象编程的语法而已，它的本质还是函数，可以用type检测

class类的相关的关键字

class 类名关键字
constructor class类的构造函数
this 关键字则代表当前实例对象
extends 类继承的关键字
super 调用父方法的构造函数

JS常见的模块化规范有哪些？

1.AMD一步模块加载规范
2.commonJS规范
3.ES新增的Moudle规范

exprot和export default有什么区别？

export default抛出一整个对象，不需要加入{}引入可以跟抛出的对象的名字一致
exprot抛出跟一个{}引入的时候需要引入使用{}引入，名字必须跟抛出的名字一致，可以选择部分引入

原生Ajax创建的步骤

1.实例化一个XMLhttpRequst对象信息
2.使用open方法创建连接，指定请求数据的方式
3.如果是post请求使用setRequstHeader设置请求头信息
4.使用onreadystatechange时间监听请求状态改变回调
5.send发送请求数据

jquery的ajax参数有哪些？

$.ajax({
url: “url地址”,
type:“请求方式get/或者post”,
data:“传递数据”,
dataType:“传送数据类型”,
async: “true异步，false同步，默认同步”,
success:function(res){
//成功事件回调
},
error:function(error){
//失败的事件回调
}
}}

promise的概念，Promise有几种状态

promise是Es6中新增的异步处理方法，主要是用于解决Es5中使用回调函数产生的地域回调的问题
promise有三种状态，pedding准备中，fullfilled已完成，rejected失败，它的状态只能由准备中==>成功 或者 准备中==>失败

Promise有哪些参数

参数两个：resolve和reject
执行resolve参数方法会调用then方法
执行reject参数方法调用catch方法

Promise的常见方法

then 方法执行成功后调用的方法
catch方法执行失败调用的方法
all()参数是个数组，执行多个Promise对象，必须所有的对象状态执行完之后才会变成已完成
race()方法 执行多个Promise对象，只要有一个对象的庄涛i是已完成状态，对象的状态就是已完成状态

set常用的方法有哪些？

set通过new实例化常用的方法有：

为集合添加数据 add方法 ：set.add(元素)
获取集合数组的属性size 使用：set.size
delete()删除数据 ： set.delete(元素)
has()判断集合中是否含有某个数据： set.has(xx)
clear() 清空集合 set.clear()

map常用得到方法有哪些？

map.set(“name”,“zs”).set(“age”,“18”) —添加数据
map.has(“key”) —判断是否含有某个数据 根据键操作（返回布尔值）
map.delete(“key”) — 删除数据 根据键删除
map.clear() —清空集合

Es6的新增特性有那些？

let const 定义块级作用域
箭头函数
解构赋值
扩展运算符
常见数组的方法，伪数组
模板字符串
class类
参数设置默认值
promise
for·· of for···in

vue中常见的指令和含义

v-text 渲染内容到节点中去，不解析HTML
v-html 渲染内容到绑定的节点中，解析html
v-if 通过条件判断节点是否显示
v-shouw 通过条件判断节点是否显示
v-on 绑定事件，可以简写为@
v-bind 绑定事件，可以简写为：
v-for 循环列表指令
v-model 表单双向绑定指令

v-if和v-show的区别？

当条件改变的时候v-if是通过DOM节点得多添加和删除控制结点的显示和隐藏，v-show是通过css样式控制结点的显示隐藏
v-if的切换成本比较高，v-show的渲染成本比较高，所以当切换的频繁的时候建议使用v-show，如果初次渲染的数据比较多的时候建议使用v-if

Vue中key的作用是？

唯一标识DOM结点，可以提高vue的渲染效率，也可以避免因DOM结点的插入而导致DOM诚信错误的问题

Vue中常见的修饰符及其含义

.stop 组织事件冒泡
.capture 设置时间捕获
.prevent 阻止默认事件
.self 之间作用在本身触发
.once 事件只触发一次
.navtive 组件触发的是原生js事件
键盘修饰符操作
.enter/.space 等
.number 修饰符可以将 输入的值转化为Number类型
.trim 修饰符会自动过滤掉输入的首尾空格
.lazy 把v-model改为失去焦点触发

Vue中过滤器定义

过滤器分为全局过滤器和局部过滤器，全局过滤器可以在任何页面调用，局部过滤器只能在当前组件调用，过滤器使用管道符|调用，也可以串联使用
全局使用定义：Vue.filter(“过滤器名字”,()=>{})
局部过滤器 filters(过滤器名字)

Vue中的生命周期

创建阶段

beforeCreate()创建前阶段，这个时候还不能使用data中的数据
createed()创建完成 最早可以使用data中的数据

挂载阶段

beforeMount()在挂载之前被调用：相关的render函数首次被调用
mounted()挂载完成，DOM结点挂载到实例上去之后调用该钩子

更新阶段

beforeUpdate()数据更新时被调用，发生在虚拟DOM重新渲染和打补丁之前
updated()数据更新完成并且DOM更新完成之后调用

销毁阶段

beforeDestroy()实例销毁之前调用，在这之前实例仍然完全可用
destroyed()：实例销毁之后调用，调用后，Vue实例指示的所有东西会解绑定

什么是虚拟DOM？

Vue中不推荐使用DOM操作，为了提高渲染效率使用虚拟DOM，虚拟DOM 就是js对象用来表示真实DOM结构的，当数据发行变化的时候会重新创建一个新的DOM树结构，比较新旧DOM 树结构的差异，最终更新到真实的DOM节点中去

怎么理解MVVM结构模式

M 数据模型，负责逻辑
V 试图 负责页面渲染
VModel 底层操作，负责试图和数据交互，当数据发生变化的时候通知视图修改

如何理解Vue中的双向数据绑定

vue双向数据绑定是通过数据劫持、结合发布订阅的方式来实现的，也就是说数据和视图同步，数据发生变化的时候视图变化，视图变化数据也随之发生变化

v-bind如何绑定class和style

1.v-bind通常用来绑定属性，动态的绑定一些class名或者style样式
2.变量形式：v-bind：class=“变量“，变量形式，这里的变量的值通常是在css定义好的类名
3.数字语法：v-bind：class=“[变量1，变量2]”，数组形式。如上大致相同只不过可以同时绑定多个class名
4.对象语法：v-bind：class={classname1:boolean,classname2:boolean},对象形式，这里的boolean通常是一个变量，也可以是常亮，计算属性等，表达式为真的时候显示对应的class名字
5.用v-bind同样可以绑定style，key是属性，value对应属性对应的值m，vue会把驼峰命名法自动转换为-小字母，如fontSize会转化为font-size

组件通信

组件引入的步骤

1.import导入子组件，定义组件的名字
2.components中组件子组件，不能是内置标签的名字
3.父组件中挂载子组件的标签

父传子组件通信

1.父组件中子组件的标签还是那个自定义一个自定义的属性
2.子组件中通过props接受父组件传递过来的数据内容，props可以是数组也可以是对象
3.props可以校验数据的类型：String、Boolean、Number，Object、Array、Function、Symbol
4.default设置默认值的内容

props可以校验的数据类型

number数字
string字符串
boolean布尔值
Array
function
symbol
object对象

兄弟组件通信的流程？

1.借助共同的父组件传递数据，先父传子，再子传父
2.eventBus总线程方式
3.定义一个eventBus.js对象抛出一个空的Vue对象
4.传递数据的组件中导入bus文件，通过bus.$emit()传递数据5.接受数据的组件中导入文件，通过bus.$on接受传递数据

vm.$nextTick是干什么用的？

通过 this.$nextTick 我们可以注册一个回调函数，这个回调函数会在下次 DOM 更新结束之后执行
Vue的数据更新是采用延迟异步更新的，就是说当我们修改了数据之后，页面并不会马上就更新,如果这个时候我们通过DOM操作来获取数据的话，获取的还是之前的旧的数据，这个时候我们就可以使用$nextTick方法

Vue组件中的data为什么是函数？

Vue 中的 data 是一个对象类型，对象类型的数据是按 引用传值 的。这就会导致所有组件的实例都 共享 同一份数据，这是不对的，我们要的是每个组件实例都是独立的所以为了解决对象类型数据共享的问题，我们需要将 data 定义成一个函数，每个实例需要通过调用函数生成一个独立的数据对象

什么是计算属性？和监听器有什么区别？

在 Vue 中使用 computed 来定义计算属性，每个计算属性就是一个函数，这个函数需要有一个返回值。

和监听器的区别：

计算属性主要用途：得到一个经过计算的数据 并且当依赖的数据改变时重新计算，重点在于得到数据
监听器的主要用途：当依赖改变函数时，一个函数重点在干一件事，这件事通常比较复杂，比如：当搜索条件改变时，重新调用后端接口等

路由导航守卫的参数有几种？参数的作用？

三个参数的含义

to：对象，将要跳转到的路由对象。

from：对象，跳转前的路由对象。

next：函数，控制是否跳转

什么是插槽？ 插槽有哪些？

插槽是用来向一个组件中传入另一个组件或者一段HTML结构用的

插槽分为三种：

​ 匿名插槽：没有设置名称的插槽，一个组件中只能有一个匿名插槽

​ 有名插槽：通过 name 属性设置了名字的插槽

​ 作用域插槽

keep-alive的作用是什么？

一个路由在切换时会被销毁，之前的数据全部丢失，下次再访问这个组件时，需要重新创建，重新调接口，重新渲染，为了提高性能我们可以使用 keep-alive 把组件缓存起来，这样在组件切换时，这个组件并没有被销毁，下次访问时，就可以显示出来，而且原组件中数据还在。

params和query的区别？

1.用法上

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name
2.展示上的
query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
3.params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系

描述在项目中使用Vue router的流程？

使用流程：

1. 创建一个对象，通过 path 和 component 属性配置 URL 路径和组件的对应关系。
2. 通过这个配置对象创建路由
3. 页面中添加 router-view 组件显示匹配到的组件
4. 页面中使用 router-link 组件制作路由跳转的按钮
5. 在JS中可以使用 this.$router.push 方法实现路由页面的跳转