前端关于vue的面试题
提示：以下是本篇文章正文内容，下面案例可供参考
Let const 箭头函数 点点点运算符 变量的解构赋值
简化对象写法 形参的默认值 模板字符串 Promise symbol class类 for in for of Set map
generator（接呢瑞特）
1、圆角效果；2、图形化边界；3、块阴影与文字阴影；4、使用RGBA实现透明效果；5、渐变效果；6、使用“@Font-Face”实现定制字体；7、多背景图；8、文字或图像的变形处理；9、多栏布局；10、媒体查询等。
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
所谓promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。
深拷贝：层层拷贝 每一层的数据都会拷贝 — 产生了新的数据
浅拷贝：只拷贝一层数据，深层次对象级别的只拷贝了地址 – 拷贝引用
Instanceof constructor object.prototype.toString.call() typeOf
在JavaScript中有这么一句话万物皆可对象
在声明一个函数跟对象的时候 它在声明的时候就有一个原型对象prototype
这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。
而protortype 的指向是它的隐式原型 proto
所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）最终都可以上溯到Object.prototype Object.prototype对象有没有它的原型呢？回答Object.prototype的原型是null。null没有任何属性和方法，也没有自己的原型。因此，原型链的尽头就是null。
是一个可以读取其他函数内部变量的函数，在js中只有函数内部的函数才可以读取该函数内部的变量，因此，闭包可以是一个函数中返回的函数。
闭包的好处：可以读取其他函数内部的变量，并将其一直保存在内存中。
坏处： 可能会造成内存泄露或者内存溢出
如果data是对象的话，由于对象是引用类型，组件被复用的话，就会创建多个实例。 本质上，这些实例用的都是同一个构造函数。这样就会影响到所有的实例，所以为了保 证组件不同的实例之间data不冲突，data必须是一个函数。
1.父子通信：父组件使用props组件传递数据，子组件通过事件向父组件发送消息使用
2.子组件给父组件传递值：通过子组件内
e
m
i
t
触
发
自
定
义
事
件
，
子
组
件
使
用
时
v
−
o
n
绑
定
自
定
义
事
件
3.
任
意
组
件
之
间
通
信
emit触发自定义事件，子组件使用时v-on绑定自定义事件 3.任意组件之间通信
emit触发自定义事件，子组件使用时v−on绑定自定义事件3.任意组件之间通信emit.$on:eventBus就是创建一个事件中心，相当于中转站，可以用它来传递事件和接受事件，项目比较小时合适
4.v-model，在props中通过input接收，value对参数进行改变
5.父组件通过ref调用子组件方法
6.使用 $ parent和 $ children获取父子组件的参数
params和query
This.
r
o
u
t
e
.
p
a
r
a
m
s
T
h
i
s
.
route.params This.
route.paramsThis.route.query
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
This.
s
t
o
r
e
.
c
o
m
m
i
t
(
‘
参
数
’
,
传
递
的
值
)
T
h
i
s
.
store.commit(‘参数’,传递的值) This.
store.commit(‘参数’,传递的值)This.store.state.参数 — 接收
单页应用中，组件之间的数据状态。
hash模式的URL中会夹杂着#号，而history没有。
Vue底层对它们的实现方式不同:
hash模式是依靠onhashchange事件(监听location.hash的改变)
history模式是主要是依靠pushState() replaceState()
pushState()：可以创建新的历史记录
replaceState()：只能修改当前历史记录
当真正需要通过URL向后端发送HTTP请求的时候，比如我们前端请求的url更改造成页面刷新时 在history模式下如果前端请求的url跟后端不匹配时会产生一个错误
创建前：Beforecreate 实例已经初始化，但不能获取DOM节点。(没有data，没有el)
创建后：Created 实例已经创建，仍然不能获取DOM节点。(有data，没有el)
挂载前：beforemount 模板编译完成，但还没挂载到界面上。(有data，有el)
挂载后：Mounted 编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新前：beforeupdate 数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
更新后：Updated 更新结束后执行，此时data中的值和页面上的值都是最新的。
销毁前：beforedestroy 当要销毁vue实例时，在销毁之前执行。
销毁后：Destroyed 在销毁vue实例时执行。
vue的双向绑定指的是数据变化更新视图，视图变化更新数据。
视图变化更新数据一般就采用事件监听的方式就可以了，数据变化更新视图就需要涉及响应式原理。
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
全局导航守卫：beforeEach、beforeResolve、afterEach
组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
路由独享守卫：beforeEnter
To：即将要进入的目标 路由对象（
r
o
u
t
e
）
F
r
o
m
：
当
前
导
航
正
要
离
开
的
路
由
对
象
（
route） From：当前导航正要离开的路由对象（
route）From：当前导航正要离开的路由对象（route）
Next()：路由确认回调函数、next(false): 中断当前的导航、next(‘/’)：跳转到一个不同的地址
通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，
mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能
将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。
所谓的插槽简单的说就是⼀个占位符,将⾃定义组件的内容展示出来.我们知道⾃定义的组件⾥⾯如果写内容的话,⻚⾯是不会显 示出来的,如果我们想让⾃定义组件⾥⾯的内容显示出来,我们就需要使⽤slot的插槽.
⽽插槽分别具名插槽和匿名插槽、以及作⽤域插槽. 我们⽤的⽐较多的具名插槽和匿名插槽,具名插槽需要所有slot标签上指定 name属性,⽽在对应标签上添加v-slot属性.
在项⽬中我们⼀般在进⾏组件封装的时候会使⽤插槽
1.vue2和vue3双向数据绑定原理发生了改变
vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。
相比与vue2，使用proxy API 优势有：defineProperty只能监听某个属性，不能对全对象进行监听；可以省去for in 、闭包等内容来提升效率（直接绑定整个对象即可）；可以监听数组，不用再去单独的对数组做特异性操作，vue3可以检测到数组内部数据的变化。
2.Vue3支持碎片（Fragments）
就是说可以拥有多个跟节点。
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
()=>import(‘引入路由地址’)
嵌套路由也称之为子路由, 就是在被切换的组件中又切换其它子组件
名视图和具名插槽很像, 都是让不同的出口显示不同的内容
命名视图就是当路由地址被匹配的时候同时指定多个出口, 并且每个出口中显示的内容不同
如果不起名字默认名字就是default
以上为vue面试的总结