web面试相关问题

1.apply,call,bind的区别

apply: 函数中的 this 替换成参数1, 其余参数放数组中 放数组中. 直接触发函数

call: 函数中的 this 替换成参数1, 其余参数依次摆放 依次摆放. 直接触发函数

bind: 替换函数中的 this 指向 并 传入其他参数, 返回新的函数 返回新的函数. 不会直接触发函数

2. vue的传参方式

(1)组件间传参    

 a.父给子传参（父：自定义属性传递变量，子：用Props['父元素自定义属性']接受）    

 b.子给父传参（子：this.$emit(父元素自定义事件，传递的值) 父：自定义事件用参数去接收传递来 的值）    

 c.兄弟间传参（用Vuex 代替）

 通过给eventbus注册事件，别的组件触发事件，实现通信。

  ①创建一个eventbus对象，即创造一个vue对象，用作传递信息。

  ②接收信息的一方将事件通过vm.$on(“事件名”,事件处理函数)添加在eventbus对象上。

  ③发送数据的一方，通过vm.$emit(“事件名”,传递的数据)触发事件，将数据传递。

(2)路由传参

 a.通过params

    需要在router的path后跟上参数

      {

         path: "/two/:id/:data",

         name: "two",

         component: two

      }

    跳转时

        this.$router.push({

     path: `/two/1/456` // 直接把数据拼接在path后面

   })

    接收时

 this.$route.params

 b.通过query

    跳转时

        this.$router.push({

           path: `/two`,

      query: { id: this.message, data: 456 }

   });     

        /two?id=mess&data=456   

    接收时             

    this.$route.query

params 和 query 都是传递参数的，params不会在url上面出现，并且params参数是路由的一部分，是一定要存在的 , query是我们通常看到的url后面的跟在？后面的显示参数

3.router-link和router.push实现跳转的原理

router-link

默认会渲染为 a 标签. 可以通过 tag 属性修改为其他标签 自动为 a 标签添加 click 事件. 然后执行 $router.push() 实现跳转

$router.push

根据路由配置的 mode 确定使用 HTML5History 还是 HashHistory 实现跳转  HTML5History : 调用 window.history.pushState() 跳转

HashHistory : 调用 HashHistory.push() 跳转

4.组件中的data为什么是函数

避免组件中的数据互相影响。同一个组件被复用多次会创建多个实例，如果 data 是一个对象的话，这些实例用的是同一个构造函数。为了保证组件的数据独立，要求每个组件都必须通过 data 函数返回一个对象作为组件的状态。

5.什么是跨域

 跨域是由浏览器的同源策略造成的同源策略：指域名、协议、端口相同；如果违反了同源策略就会造成跨域

跨域的解决

  cors 一般都是后端搞定，我们只需要顾虑前端的东西

jsonp 了解过，使用DOM操作动态的添加一个元素，而script标签中的src属性是 没有跨域限制的也就是逃避了同源策略，而且只能用get请求

接口代理 通过代理服务器配置来实现，例如Vue中需要在vue.config.js中配置poxy文件

6.Vue中 key值作用和原理

在渲染列表的时候使用key，如果不使用的时候会进行警告。当v-for循环渲染时，不加上key的时候会默认采用原地复用原则。即不会移动或重新渲染dom元素或者标签，而是单纯的改变数据，对数据进行更新。

key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们。  

7.cookies，sessionStorage和localStorage的区别？

共同点：都是保存在浏览器端，且是同源的。

区别：

cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。

存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。

数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。

作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享

8.webpack是什么，用来做什么的

webpack是前端构建工具

 webpack：是前端模块化方案，侧重模块打包。把开发中所有资源都看成模块，通过配置 loader 和 插件对资源进行处理。实现团队开发项目目录的统一

 gulp：强调前端开发的流程，需要进行很多配置。适合打包一些轻量化的任务，比如单独打包css文件

 webpack 是把项目当作一个整体，通过一个给定的的主文件，webpack 将从这个文件开始找到你 的项目的所有依赖文件，使用 loaders 处理它们，后打包成一个或多个浏览器可识别的 js 文件

9.webpack中常见的loader有哪些

style-loader 将css添加到DOM的内联样式标签style里

css-loader 允许将css文件通过require的方式引入，并返回css代码

less-loader 处理less

sass-loader 处理sass

postcss-loader 用postcss来处理CSS

file-loader 分发文件到output目录并返回相对路径

url-loader 和file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url

10.什么是闭包，闭包有什么作用？

闭包形成的原因

希望给一个函数保护一个可反复使用的专属变量，防止被外界修改时，就形成了闭包

  原理：外层函数被调用后。外层的作用域链被内层牵引着无法释放就形成了闭包

  缺点 : 闭包使函数内部的变量不能被内存释放，这些变量就会占用内存，内存消耗大，可能会 导致内存泄露

11.从输入URL到浏览器显示页面发生了什么

 https://www.cnblogs.com/yuanzhiguo/p/8119470.html

12.v-show和v-if有什么区别

(1)相同点：

v-show 和 v-if 都能控制元素的显示和隐藏。

(2)不同点：

 a.实现本质方法不同

  v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏

  v-if 是动态的向 DOM 树内添加或者删除 DOM 元素

 b.编译的区别

   v-show 其实就是在控制 css v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件,监听和子组件

 c.编译的条件

  v-show 都会编译，初始值为 false，只是将 display 设为 none，但它也编译了

  v-if 初始值为 false，就不会编译了

 d.性能比较

  v-show 只编译一次，后面其实就是控制 css，而 v-if 不停的销毁和创建，故 v-show性能更好一。

(3)总结（适用场景）：

如果要频繁切换某节点时，使用 v-show（无论 true 或者 false 初始都会进行渲染，此后通过 css 来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用 v-if（因为懒加载，初始为 false 时，不会渲染，但是因为它是通过添加和删除 dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）

13. 对于mvvm的理解

MVVM 是 Model-View-ViewModel 的缩写

Model:数据模型,因为它仅仅关注数据本身，不关心任何行为

View:用户操作界面,当ViewModel对Model进行更新的时候，会通过数据绑定更新到View

ViewModel :业务逻辑层,也是View和Model层的桥梁

总结： MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。

14. 浏览器解析渲染页面过程

解析HTML，生成DOM树

解析CSS，生成CSSOM树

将DOM树和CSSOM树关联，生成渲染树(Render Tree)

布局render树（Layout/reflow），负责各元素尺寸、位置的计算

绘制render树（paint），绘制页面像素信息

将像素发送给GPU，展示在页面上。

15. method/computed/watch的使用和区别

computed：默认computed也是一个watcher具备缓存，只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。如果一个数据依赖于其他数据，使用 computed

watch：每次都需要执行函数。 watch 更适用于数据变化时的异步操作。如果需要在某个数据变化时做一些事情，使用watch。

met hod：只要把方法用到模板上了,每次一变化就会重新渲染视图，性能开销大

16.Vue的生命周期

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

    销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

17.如何解决SPA（单页应用）首屏加载速度慢

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容

1）加载慢的原因：网络延迟；资源文件体积过大；资源重复请求加载；加载脚本过程中，渲染堵塞。

2）解决办法：

a、减少入口文件体积：常用的手段是路由懒加载，把不同的路由对应的组件分割成不同的代码块，待路由被请求的时候单独打包路由，使入口文件变小。

b、静态资源本地缓存：后端返回资源问题：采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头。采用Service Worker离线缓存。前端合理利用localStorage。

c、UI框架按需加载

d、避免组件重复打包：在webpack的config文件中，修改CommonsChunkPlugin的配置，设置minChunks为2表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件

e、压缩图片资源

f、使用SSR（服务端渲染），即组件和页面通过服务器生成html字符串，再发送到浏览器。vue可以使用Nuxt.js实现服务端渲染。