前端部分面试题更新

什么是同源策略？

域名端口协议三者都相同，才是同源策略. 同源策略就是浏览器的一个安全限制，它阻止了不同【域】之间进行的数据交互

什么是非同源策略？

域名端口协议三者有一个不同的都为同源策略

非同源策略产生什么问题？

会产生跨域的问题

如何解决跨域？

Jsonp vue.config.js 纯后端cors

jsonp什么原理？

利用script的src属性来实现跨域，因为script标签的src属性允许访问外部资源，不受同源策略的影响

如何获取jsonp返回值？

Jsonp是允许用户传递一个callback参数给服务器，然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据。相当于callback这个函数传参，由callback解析执行

jsonp的优缺点？

优点：减轻web服务器的负载，可以实现一个带参网址的请求。实现跨域通信

缺点：只能实现get一种请求

除了jsonp还有那些跨域手段？

Vue脚手架的proxy

纯后端的cors

vue是什么？

以数据驱动视图的渐进式mvvm框架

vuex是什么？

vuex ：是专门为vue.js开发的状态管理器，用集中式存储所有组件状态，vuex可以解决组件间的数据共享问题，也方便管理和维护

有五个属性分别是： state、getters、mutations、actions、module

state： 存放状态，例如你要存放的数据

getters：计算属性 可以通过this.$store.getters来获取存放在state里面的数据

mutations： 唯一能改变state的状态就是通过提交mutations来改变this.$store.commit()

actions: 异步的mutations，可以通过dispatch来分发从而改变state里面的事件中有context参数，是vuex的实例对象

module : 分模块处理

action和mutation的区别

action可以执行异步，而mutation 只能执行同步

action不能直接修改state,所以只能通过mutation修改state

action通过dispatch调用，mutation通过commit

state和getters的关系

state等价于组件里的data, getters等价于组件内的计算属性

vuex的工作流程（执行过程）

vuex的严格模式和非严格模式区别

非严格模式下: mutation可以执行异步,任何地方都可以直接修改state

严格模式下，不按照规定使用vuex会报错

什么是渐进式？

就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。

什么是单页面应用？

单页面应用就是说系统只会加载一次资源，之后的操作都是通过router,ajax来进行操作当前页面

什么是spa应用？

SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验

vue的优缺点是什么？

优点：渐进式开发，数据驱动视图，组件化，模块化开发

缺点：首屏加载相对静待网站慢，不利于seo（搜索引擎）爬虫优化

什么是MvvM模式？和MVC模式相比有什么不同？

Mvvm:M model模型  v view 视图 vm:ViewModel 层:把 View 需要的层数据暴露，并对 View 层的 数据绑定声明 数据是双向绑定的。

Mvc: 模型(model)-视图(view)－控制器(controller)  angular是mvc模式 这种模式来自java  银行:前端 angular 后端：java

什么是渐进式框架？

我们可以简单的理解为，用自己想用或者能用的功能特性，不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。

Vue和jq的对比有何不同？

Jq：专注视图层，通过操作 DOM 去实现页面的一些逻辑渲染；

Vue:  专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作。

vue底层原理？

vue 作为一种MVVM模式的框架， 其数据绑定的底层原理为：数据劫持 + 发布订阅者模式。

其中主要有这么四种“角色”：Observer数据劫持, Dep数据收集, Watcer订阅者，以及 Compiler 模板编译器。

vue响应式原理？

V2

结合发布者-订阅者模式，通过Object.defineProperty()来劫持各个属性的setter，getter  在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图,实现数据和视图同步。

V3

是利用es6的proxy的set和get方法来实现数据的劫持

进一步结合vue的watcher的update方法来实现双项数据绑定

###############################################

V2和v3

都通过Observer监听自己的model数据变化，通过Compile解析模板指令，最

终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化，视图更新

##############################################

V3的Proxy相比于v2的Object.defineProperty()来说（v3的双向数据绑定相对于v2的双向数据绑定的优点）

直接监听数组类型的数据变化

监听的目标为对象本身，不需要遍历每个属性，有一定的性能提升

可直接实现对象属性的新增/删除

vue的数据双向绑定原理？

Vue2.是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

Vue3

vue常用指令和修饰符？

 指令：v-text v-html  v-show v-if v-else v-for v-bind v-on v-model

修饰符： .stop .capture .self .once .prevent ·passive ·trim

v-if和v-for为什么不能一起使用

v-for是根据遍历数据来进行渲染，要配合key使用。要注意的是当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中

html和text的区别？

Html渲染出来标签text渲染出来文本

show和if的区别？

如果需要频繁切换显示/隐藏的可以用v-show;如果运行后不太可能需要切换显示/隐藏的可以用v-if；

watch和computed的区别？

computed看上去是方法，但是实际上是计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算

watcher 更像是一个 data 的数据监听回调，当依赖的 data 的数据变化，执行回调，在方法中会传入 newVal 和 oldVal。可以提供输入值无效，提供中间值 特场景。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使用watch。

缩减之后

computed 计算属性 计算结果会缓存,只有当依赖值改变才会重新计算

watch 监听属性 监听数据的变化触发执行函数

call bind aplay  的都是什么作用和他们的区别？

三者都可以改变函数的this对象指向。

三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。
三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。
bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即执行 。

三种数据存储和他们的区别

有 Cookie     localStorage    sessionStroage

Cookie存储空间小。4k左右，可以设置删除时间，到期自动删除 不设置时间，会话关闭消失

localStorage 存储较大 HTML5专门为存储而设计 数据会永久存储，除非代码或手动删除

sessionStroage 数据只存在于当前会话，会话关闭则清空

浅拷贝和深拷贝

浅拷贝： 将原对象直接赋给新对象，并没有复制内容，而是那个指针，一个改变，全部改变

深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”，新对象跟原对象不共享内存，修改新对象不会改到原对象

什么是生命周期？每个函数代表什么？

一个物体从声明的开始到结束

创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数

创建后：Created() 是最早使用data和methods中数据的钩子函数

挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树

挂载后：Mounted() dom渲染完毕页面和内存的数据已经同步

更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的

更新后：Updated() 内存和页面都是新的

销毁前：beforeDestroy() 即将销毁data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作

销毁后：Destroyed() 已经销毁完毕

Vue3.0中的生命周期做了一些改动：

beforeCreate  -> setup() 开始创建组件之前，创建的是data和method

created       -> setup()

beforeMount   -> onBeforeMount 组件挂载到节点上之前执行的函数。

mounted       -> onMounted 组件挂载完成后执行的函数

beforeUpdate  -> onBeforeUpdate 组件更新之前执行的函数。

updated       -> onUpdated 组件更新完成之后执行的函数。

beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。

destroyed     -> onUnmounted 组件卸载之前执行的函数。

内置组件有哪些？功能分别是什么？

Keep-alive    包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

Template     空标签

Transition    为组件的载入和切换提供动画效果

Transition-gronp   作为多个元素/组件的过渡效果

Component    渲染一个‘元组件’为动态组件

Slot      作为组件模板之中的内容分发插槽，slot元素自身将被替换

vue组件通信方式有哪些？

1.父传子：

在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:["属性名"]  props:{属性名:数据类型}

2.子传父：

在父组件的子组件标签上通过绑定自定义事件，接受子组件传递过来的事件。子组件通过$emit触发父组件上的自定义事件，发送参数

3.兄弟组件传值：

通过main.js初始化一个全局的$bus,在发送事件的一方通过$bus.$emit(“事件名”，传递的参数信息)发送，在接收事件的一方通过$bus.$on("事件名",参数)接收传递的事件

4.$attrs和$listeners

如果父组件A下面有子组件B，组件B下面有组件C,这个时候A组件想要传数据给C组件就可以用这种方式实现。适合用于多级组件嵌套传值

在b组件中使用组件c的时候用v-bind绑定一个属性$attrs这样就可以直接在c组件中拿到父组件a传下来的数据了。用v-on绑定一个$listeners属性就可以直接在组件c里调用a组件的方法了。

5.provider和inject

父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，都可以通过inject来调用provide的数据

但是这种写法传递的数据是不响应的。

6.v-model也能实现组件传值

给子组件绑定v-model，其实是value属性和input事件的合写，在子组件中通过emit调用input事件就能修改父组件的v-model值

7.$parent和$children

      在组件内部可以直接通过子组件$parent对父组件进行操作，父组件通过$children对子组件进行操作.$children是一个数组 用的时候加下标

 8.Vuex

vuex也可以实现组件之间的传值，把公共的数据放在state中，所有的组件都可以使用

Vuex的工作执行流程

组件使用state,组件通过dispatch调用actions,actions使用commit调用mutations修改state，state修改后通知组件更新

vue路由的底层原理是什么？

路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。

传参方式有哪些？

query params 动态路由传参

跳转方式有哪些？

标签Router-link

编程式导航：this.$router.push

Replace  go  replace() 没有历史记录

路由生命周期有哪些？

全局有三个守卫：           

router.beforeEach 全局前置守卫 进入路由之前

router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用 router.afterEach 全局后置钩子 进入路由之后

组件内的守卫： 

beforeRouteEnter

beforeRouteUpdata(2.2新增)

beforeRouteLeave

独享守卫：

BeforeEnter