面试准备篇(持续更新)

1、 Vue里面的 computed和watch区别和应用场景能简单介绍一下吗?

    computer: (多对一) 使用场景:当一个值受多个属性影响的时候------------购物车商品结算;

   watch:(一对多)  使用场景:当一条数据的更改影响到多条数据的时候---------搜索框;

区别:

1、功能上:computed是计算属性,watch是监听一个值的变化,然后执行对应的回调。

2、是否调用缓存:computed中的函数所依赖的属性没有发生变化,那么调用当前的函数的时候会从缓存中读取,而watch在每次监听的值发生变化的时候都会执行回调。

3、是否调用return:computed中的函数必须要用return返回,watch中的函数不是必须要用return。

       4, watch 支持异步操作,computed内有异步操作时无效,无法监听数据的变化

2、为什么要在created周期获取数据? beforeMount 什么时候触发?

1, 如果要在created阶段中进行dom操作,就要将操作都放在 Vue.nextTick() 的回调函数中,因为created() 钩子函数执行的时候 DOM 其实并未进行任何渲染,而此时进行 DOM 操作无异于徒劳,所以此处一定要将 DOM 操作的 js 代码放进 Vue.nextTick() 的回调函数中。

2, created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

注意:对于会影响html布局的数据(比如表格列字段),我建议用created进行初始化,而不是用mounted,否则可能会造成页面卡顿,空标签等...

3,beforMount 载入前(完成了data和el数据初始化),但是页面中的内容还是vue中的占位符,data中的message信息没有被挂在到Dom节点中,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

3、$emit有什么用?

1、父组件可以使用 props 把数据传给子组件。

2、子组件可以使用 $emit 触发父组件的自定义事件。

4、为什么组件data里面是个函数?

  组件最大优点是可被复用,因为对象是一个引用数据类型,如果data是一个对象的情况下会造成所有组件共用一个data。而当data是一个函数的情况下,每次函数执行完毕后都会返回一个新的对象,这样的话每个组件都会维护一份独立的对象(data)

5、hash和history两种模式的区别?

     hash模式url里面永远带着#号,我们在开发当中默认使用这个模式。

     如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url适合推广宣传

     功能也有区别,比如我们在开发app的时候有分享页面,有的app里面url是不允许带有#号的,所以要将#号去除那么就要使用history模式

    但是使用history模式还有一个问题就是,在访问二级页面的时候,做刷新操作,会出现404错误,那么就需要和后端人配合让他配置一下apache或是nginx的url重定向,重定向到你的首页路由上就ok啦。

6、vue中虚拟DOM原理是什么?

1,数据和模板相结合生成虚拟dom

2,虚拟dom转化成真实dom渲染到页面上

3,当数据发生改变时,新的数据和模板相结合会生成新的虚拟dom

4,新旧虚拟dom进行比对找差异

5,找到差异后根据差异改变dom

6,老的虚拟dom被清除,新的虚拟dom变成老的虚拟dom

7、问一个场景比如给你个列表,后台反馈的数据一万条页面比较卡,在不允许分页的前提下怎么解决这个问题?(如果回答不上来就不问后面的按需加载)

按需加载的实现原理:  当滚动高度与可见高度大于或等于内容高度时,加载下一页的数据。

1. 虚拟滚动(Virtual Scrolling):

虚拟滚动是一种优化大型列表的技术。它通过只渲染可见区域的数据,而不是渲染整个列表,从而减少渲染和内存消耗。可以使用现有的虚拟滚动库(如react-virtualized、vue-virtual-scroller)或自行实现虚拟滚动功能,根据用户的滚动位置动态加载和卸载数据,以提高页面性能和响应速度。

2. 分批加载(Infinite Scroll):

分批加载是将数据分成多个批次加载,一次性加载一部分数据,随着用户滚动或点击加载更多按钮,再加载下一批数据。这样可以将数据加载分散到多个请求中,减少单次加载的数据量,提高页面的渲染性能和响应速度。可以结合虚拟滚动技术,只渲染当前可见区域的数据。

3. 后台数据优化:

如果后台返回的数据量过大导致页面卡顿,可以与后台开发团队合作,优化数据接口,返回更精简的数据,只包含必要的信息。可以通过字段选择、分页查询等方式减少数据量。

8、es6中 let和const 还有 var 什么区别?

var : 变量提升,可以重复声明,支持修改;

let : 没有变量提升,不可以重复声明,支持修改;暂时性死区: 快级作用域内存在let命令,它所声明的变量就绑定在这个区域,不再受外部影响

const: 没有变量提升,不可重复声明,不支持修改;

9、es6中扩展运算符 三个点...有用过吗?它有哪些用途?

es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形。因为typeScript是es6的超集,所以typeScript也支持扩展运算符

   应用场景:  可变参数个数的函数调用 , 更便捷的数组合并,替代es5的apply方法

10、vue的结构赋值有用过吗?怎么用的?

解构赋值语法是一个 Javascript 表达式,这使得可以将值从数组属性从对象提取到不同的变量中。

应用场景: 1,可以从数组中提取值,按照对应位置,对变量赋值。

                 2, 字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象          3, 函数的参数也可以使用解构赋值。

11、秒杀商品时,客户端与服务端的时间是不一致的,如何做倒计?

  1. 服务端时间为准:
  • 客户端在页面加载时,向服务端请求获取服务器的当前时间。
  • 服务端返回当前时间给客户端,并将其作为倒计时的基准。
  • 客户端使用服务端返回的时间作为参考,通过倒计时逻辑计算出剩余时间,并展示在页面上。

该方案的优势在于,客户端以服务端时间为准,避免了客户端时间的不准确性和篡改可能导致的不公平情况。同时,由于倒计时的逻辑完全在客户端执行,不需要频繁与服务端通信,减轻了服务端的压力。

12、浏览器渲染机制(如果一段html后面跟一段js,再往后一段html会怎么去执行)

加载第一段html, 执行 js , 渲染第一段html, 加载且渲染第二段html;

13、vue双向绑定,从数据劫持角度会问道为什么data里面数组也能被监听到;

因为vue2将数组方法进行了重写!Vue对数组的7个变异方法(push、pop、shift、unshift、splice、sort、reverse)实现了响应式

14、如果data有一个数组,数组里的数据我把index为0的数据改了但是视图没改,是什么原因怎么解决; Proxy 

vue2.x中无法通过数组索引来实现响应式数据的自动更新是vue本身的设计导致的,不是 defineProperty 的锅。

官方文档中对于这两点都是简要的概括为“由于JavaScript的限制”无法实现;尤大大回答是因为性能问题;

15、js的事件循环机制;

渲染进程 =>  js引擎线程,GUI渲染线程,js事件触发线程,定时触发线程,异步请求线程  =>  同步任务 =>  异步微任务  =>  宏任务:

浏览器器内核拿到内容后,渲染大概可以划分成以下几个步骤:

  1. 解析html建立dom树
  2. 解析css构建render树(将CSS代码解析成树形的数据结构,然后结合DOM合并成render树)
  3. 布局render树(Layout/reflow),负责各元素尺寸、位置的计算
  4. 绘制render树(paint),绘制页面像素信息
  5. 浏览器会将各层的信息发送给GPU,GPU会将各层合成(composite),显示在屏幕上。

        6. 渲染完毕后就是load事件了,之后就是自己的JS逻辑处理了

16、es6常用的(箭头函数和function区别);

1.写法不同,箭头函数更加简洁!

2.this的指向不同,箭头函数没有自己的this,它里面的this是继承所属上下文中的this,而且使用call与apply都无法改变

3.箭头函数不可以当构造函数,箭头函数没有prototype,而construct在prototype里面。

4.function存在变量提升,可以定义在调用语句后,箭头函数不存在;

5,箭头函数自带reurn;

17、js的属性;

js的只读属性: 要设置一个对象的值可读,我们可以用更简单的办法,使用defineProperty,将其writable设为false;

js的私有属性: 

我们可以知道,实现私有属性,只要是外部无法知道这个属性名,只有内部知道的属性名,就可以做到外部无法访问的特性,基于ES6的新语法symbol和weakMap,我们可以去实现这个能力。

ES2019中已经增加了对 class 私有属性的原生支持,只需要在属性/方法名前面加上 '#' 就可以将其定义为私有,并且支持定义私有的 static 属性/方法,同时我们现在也可以通过 Babel 已使用(babel会把#编译成上面weakMap的形式来实现私有属性),并且 Node v12 中也增加了对私有属性的支持。

18、介绍浏览器的http缓存

1,浏览器缓存(Brower Caching)是浏览器对之前请求过的文件进行缓存,以便下一次访问时重复使用,节省带宽,提高访问速度,降低服务器压力;

2, http缓存机制主要在http响应头中设定,响应头中相关字段为Expires、Cache-Control、Last-Modified、Etag。

3,强缓存:浏览器不会像服务器发送任何请求,直接从本地缓存中读取文件并返回Status Code: 200;

4,协商缓存: 向服务器发送请求,服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存,如果命中,则返回304状态码并带上新的response header通知浏览器从缓存中读取资源;

你可能感兴趣的:(#,面试记忆题,vue.js,前端,javascript)