前端 自用知识笔记

yyy152
95 阅读7分钟

1.vue2、vue3的区别

  • 响应式区别：vue2为Object.defineProperty()，vue3为Proxy；
  • 生命周期区别：vue3在beforeCreate前新增setup()，基本取代created和beforeCreate；
  • 代码编写方式区别：vue2使用Options API编写，vue3使用组合式API Composition API，一个功能所定义的所有 API 会放在一起。优点是在逻辑组织和逻辑复用这方面，组合式API是优于选项式API的；组合式API中见不到this的使用，减少了this指向不明的情况；组合式API几乎都是函数，会有更好的类型推断；
  • vue2的vFor 高于 vIf'；vue3的vIf 高于 vFor，且不能一起使用（vif获取不到vfor中的item）；

2.vue3响应式原理

Vue3响应式使用的是ES6的Proxy和Reflect相互配合实现数据响应式，解决了Vue2中视图不能自动更新的问题；

Proxy是深度监听，监听对象和数组内的任意元素，实现视图实时更新

3.vue通讯方式

  • Vuex
  • 通过 props 传参
  • 通过 $emit 触发自定义事件
  • 使用 ref
  • EventBus
  • parent或parent 或root
  • attrs 与 listeners
  • Provide 与 Inject

父子关系的组件数据传递选择 props 与 $emit进行传递，也可选择ref；

兄弟关系的组件数据传递可选择bus，其次可以选择‘bus，其次可以选择`parent`进行传递；

祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject；

复杂关系的组件数据传递可以通过vuex存放共享的变量；

4.MVVM 双向绑定

数据层（Model）：应用的数据及业务逻辑；

视图层（View）：应用的展示效果，各类UI组件；

业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来；

5. keep-alive

keep-alive是vue中的内置组件，可以使被包含的组件保留状态，或避免重新渲染
被keep-alive包含的组件不会被再次初始化，不会重走生命周期函数
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

6.闭包

能够访问自由变量、其它函数内部变量的函数。闭包的内部变量是私有的，可以做到隔离作用域，保持数据的不被污染性。（防抖节流）

7.内存泄漏

内存泄漏是指应用程序在使用内存资源时未正确释放，导致内存占用不断增加，最终导致性能下降甚至崩溃的问题。
在 Vue 开发中，内存泄漏可以指的是在组件销毁时没有正确清理相关资源，导致这些资源继续占用内存。
原因：

  • 未取消的事件监听：当组件注册了事件监听器（例如click、scroll等），但在组件销毁时没有正确地取消这些事件监听，这将导致被监听的元素不能被垃圾回收，从而造成内存泄漏。

  • 循环引用：当组件之间存在互相引用的关系（父子组件、兄弟组件等），并且在组件销毁时没有断开这些引用关系。如果这些引用关系持续存在，那么组件及其相关资源将无法被垃圾回收，从而导致内存泄漏。

  • 未清除的定时器：当组件在销毁之前注册了定时器，但在组件销毁时没有正确地清除这些定时器，定时器将继续存在，占用内存资源，导致内存泄漏。

  • 大量未清理的数据：在处理大量数据的场景下，如果没有及时清理不再使用的数据，这些数据将一直占用内存，导致内存泄漏。

避免：使用removeEventListener、 beforeDestroy()

8.js数组原生方法

ab8c5beff9054a23a296c5b738878184~tplv-k3u1fbpfcp-zoom-in-crop-mark_1512_0_0_0.webp

9.ES6新特性

ES6: 类、模块化、箭头函数、Promise、Let和Const
ES7: includes()判断一个数组是否包含一个指定的值
ES8: async/await异步迭代器，可以在for循环中使用await、Object.values()
ES9: Promise.finally()指定最终逻辑、正则相关更新

10.Promise

Promise 是异步编程的一种解决方案，有三种状态：pending，fulfilled，rejected，默认状态是pending。

11.async/await

1、Async—声明一个异步函数  

  • 自动将常规函数转换成Promise，返回值也是一个Promise对象
  • 只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数
  • 异步函数内部可以使用await

2、Await—暂停异步的功能执行(var result = await someAsyncCall();)

  • 放置在Promise调用之前，await强制其他代码等待，直到Promise完成并返回结果
  • 只能与Promise一起使用，不适用与回调
  • 只能在async函数内部使用

12.防抖和节流

1.防抖

函数防抖是在事件被触发n秒后再执行回调，如果在「n秒内又被触发」，则「重新计时」

2.节流

当事件触发时，保证一定时间段内只调用一次函数。例如页面滚动的时候，每隔一段时间发一次请求

13. 前端优化

减少http请求、文件压缩、缓存、CDN

14.localStorage和sessionStorage、Cookie

  • sessionStorage 用于本地存储一个会话中的数据，当会话结束后就会销毁；
  • localStorage用于持久化的本地存储，除非用户主动删除数据，否则数据永远不会过期；
  • cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

15.响应式设计

响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

原理： 基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。

兼容： 页面头部必须有mate声明的viewport。

16.px、em、rem的区别及使用场景

三者的区别：

  • px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
  • em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
  • em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。

使用场景：

  • 对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可 。
  • 对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备

17.flex布局

弹性盒子布局，决定了元素如何在页面上排列；

  • flex-direction (设置主轴)：row row-reverse column column-reverse

  • flex-wrap (换行方式)：nowrap wrap wrap-reverse

  • flex-flow (flex-direction 和 flex-wrap 的简写)

  • justify-content (主轴对齐方式)：flex-start flex-end center space-between space-around

  • align-items (交叉轴对齐方式)：center flex-start flex-end

  • align-content (多个主轴时, 在交叉轴方向的对齐方式)

  • place-content (align-content 和 justify-content的简写)

  • column-gap (元素列之间的间隔)

  • row-gap (元素行之间的间隔)

  • gap (row-gap 和 column-gap的简写)

18.前端用户体验

  • 稳定：稳定是体验的基础（产品形态稳定、代码运行稳定）
  • 性能：用户一般不会有太多耐心（首屏性能：避免模块闪动、增加模块入场动画、增加loading页等；运行时性能：操作反馈、页面变化的过渡、接口性能）
  • 视觉样式：静态视觉、动画效果；不直接将设计稿翻译成代码，而是要理解设计的目的；要关注整个用户体验周期内的效果，而不是短时间的效果

19.Hybrid App(混合应用程序)

将 Native APP 和 Web APP 通过 Webview 结合起来使用的应用。

20.TS类型

ts属于强类型（不允许隐式类型转换）、静态类型（声明时就指定类型）语法。

avatar
文章
阅读
粉丝