前端面经

Kyle1984
193 阅读7分钟

sss# 1. == 和 === 的区别 a）不同类型间比较，== 之比较"转化成同一类型后的值" 看"值" 是否相等，=== 如果类型不同，其结果就是不等。
b）同类型比较，直接进行"值" 比较，两者结果一样。

2.v-if和v-show的区别

  • v-show和v-if的区别? 分别说明其使用场景?

  • 相同点： v-show 和v-if都是true的时候显示，false的时候隐藏

  • 不同点1：原理不同

    • v-show:一定会渲染，只是修改display属性
    • v-if:根据条件渲染

  • 不同点2：应用场景不同

    • 频繁切换用v-show,不频繁切换用v-if

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，操作的实际上是dom元素的创建或销毁。

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换 它操作的是display:none/block属性。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3.浅拷贝和深拷贝的区别

深拷贝和浅拷贝区别是，在有指针的情况下，浅拷贝只是增加了一个指针指向已经存在的内存，而深拷贝就是增加一个指针并且申请一个新的内存，使这个增加的指针指向这个新的内存，采用深拷贝的情况下，释放内存的时候就不会出现在浅拷贝时重复释放同一内存的错误。

4.浅拷贝和深拷贝的方法

浅拷贝：

  • Object.assign()
  • ...展开运算符
  • Array.prototype.concat()
  • Array.prototype.slice()

深拷贝：

  • JSON.parse(JSON.stringify())
  • 递归深拷贝
  • cloneDeep()

5.为什么不能使用箭头函数来定义methods？

因为箭头函数没有自己的作用域，绑定的是父级作用域的上下文，如果使用箭头函数，那么在获取data里面的数据的时候，this指向window导致访问失败。这跟this的绑定规则有关，在箭头函数中不绑定this，但是如果箭头函数使用了this，会往上层作用域去找。

6.不使用箭头函数的情况下，this到底指向什么？

vue源码通过bind显式绑定指向vue实例的proxy(代理)

7.常见的this指向有哪些？

  • 全局作用域中或者普通函数中this指向全局对象window
  • 立即执行函数this必定指向window
  • 定时器this指向window
  • 事件中this指向事件源对象
  • 方法中谁调用就指向谁
  • 构造函数中this指向对象实例

8.箭头函数this指向问题

箭头函数没有自己的this指向，它的this指向上一级作用域的this

9.flex布局中控制主轴方向的属性是什么？

属性flex-direction

10.渲染不及时，页面掉帧可能的原因

  • 网络请求太多，请求返回的数据比较慢
    接口返回慢的话，后端做些优化；前端适当做些缓存，减少不必要的重复的请求，可以从调试工具中的Network查看请求情况

  • 回流和重绘多
    减少dom的操作，适当使用keep-alive,v-show等，平时要养成良好的编码习惯

  • dom节点太多，渲染的比较慢
    如果是数据确实太大的话，可能要从业务上调整一下，展示可能要改变下，比如说做分页什么的

11.网页内存占用过高，运行卡顿可能的原因

  • 全局变量引起的内存泄露
    标记清理；离开作用域自动标记为可回收，在垃圾回收期间被删除。全局变量不会回收，局部变量会被回收，也就是函数一旦运行完以后，函数内部的东西都会被销毁；只要被另外一个作用域所引用就不会被回收。所以我们要尽量减少全局变量的使用，使用完引用类型的数据后解除引用

  • 闭包引起的内存泄露
    因为引用了其他作用域的变量，所以变量不会被回收，即使解除引用

  • 定时器引起内存泄露
    window.setTimeout(),window. setInterval()等。清理定时器，这时定时器需要给他取名了

  • dom删除时没有解绑事件

  • 循环引用
    是否存在内存泄露的判断方式

12.如何使用less设置全局变量

  1. 在全局less文件中定义全局变量
  2. 在其他地方引用less全局变量

13.vuex核心使用方法

vuex.webp

14.watch和computed的相同点与不同点

  • 相同点：他们两者都是观察页面数据变化的
  • 不同点：computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。watch每次都需要执行函数

15.vue和react区别

vue和react区别有以下11点：1、响应式原理不同；2、监听数据变化的实现原理不同；3、组件写法不同；4、Diff算法不同；5、核心思想不同；6、数据流不同；7、组合不同功能的方式不同；8、组件通信方法不同；9、模板渲染方式不同；10、渲染过程不同；11、框架本质不同

16.js实现锚点定位

/**
 * 使用js实现锚点滚动功能；字符串需要是'#id'锚点格式；数字的话标识要滚动的位置
 * @param {String,Number} selector 
 */
export function goAnchor(selector) {
    let top = 0;
    const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    if (typeof selector === 'number') {
        top = selector - scrollTop;
    } else {
        const anchor = document.querySelector(selector) || { offsetTop: 0 };
        top = anchor.offsetTop - scrollTop;
    }
    window.scrollBy({ top, behavior: 'smooth' })
}

17.flex布局中父元素和子元素的属性

作用在父容器上作用在子项上
flex-directionflex-grow
flex-wrapflex-shrink
flex-flowflex-basis
justify-contentflex
align-itemsalign-self
align-contentorder

18.grid和flex区别是什么？适用什么场景？

  1. Flexbox 是一维布局系统，适合做局部布局，比如导航栏组件。
  2. Grid 是二维布局系统，通常用于整个页面的规划。
  3. 二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局，但是没有 Grid 强大和灵活。二者结合使用更加轻松。

19.DIFF算法的原理

在Vue中，主要是patch()、patchVnode()和updateChildren()这三个主要方法来实现Diff的。

  • 当我们Vue中的响应式数据变化的时候，就会触发页面更新函数updateComponent()
  • 此时updateComponent()就会调用patch()方法，在该方法中进行比较是否为相同节点，是的话执行patchVnode()方法，开始比较节点差异。而如果不是相同节点的话，则进行替换操作
  • 在patchVnode()中，首先是更新节点属性，然后会判断有没有孩子节点，有的话则执行updateChildren()方法，对孩子节点进行比较。如果没有孩子节点的话，则进行节点文本内容判断更新（文本节点是不会有孩子节点的）
  • updateChildren()中，会对传入的两个孩子节点数组进行一一比较，当找到相同节点的情况下，调用patchVnode()继续节点差异比较

20.跨域是什么？

当一个请求url的协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域

参考：
this指向/箭头函数this指向详解
3种深拷贝和4种浅拷贝的方法
在vue项目中使用less全局变量
vuex详解
vue中的watch与computed区别理解
vue和react区别
什么是跨域? 出现原因及解决方法

avatar
文章
阅读
粉丝