自用快速复习(前端高频常用知识大汇总)前端入门知识树

原创

已于 2024-03-25 08:41:43 修改 · 置顶 · 954 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

于 2021-07-16 10:19:17 首次发布

本文深入探讨JavaScript中的数据结构、字符串、对象拷贝与深浅拷贝，以及JS运行机制，包括宏任务与微任务。同时，详细讲解了Vue.js的生命周期、响应式原理、组件通信、Vuex状态管理、虚拟DOM以及Vue3的组合式API。此外，还涵盖了Vue组件间的通信方式、DOM属性与属性的区别，以及如何设置环境变量。文章最后讨论了前端开发中的性能优化，如正确使用v-for和v-if，以及v-bind和v-model的用法。

真正学会的知识=完全学习且理解+练习+在业务或工作中不止一次用到

自用快速复习

数组(223查找排序判断遍历定位映射)
字符串(3slice substr replace 2 4值索引indexof search索引值charAt charCodeAt)
对象(只拷贝基本数据类型和引用的地址-浅真正实现数组对象的拷贝-深【Object.assign({},obj) {…obj}解构一层深拷贝】【JSON 不能拷贝属性含对象、函数和数组的对象】)，遍历对象属性 for(let key in obj){ console.log(key + '---' + obj[key]) }
解构(let [foo, [ , baz], …arr] = [1, [[2], 3], 4, 5];数组解构对索引可嵌套可省略，逗号必须很重要
let { round:r,ceil:c,floor:f } = Math; r(3.14)//3 对象解构对属性名可指定默认值)
区分解构与扩展运算符：扩展运算符(遍历一层深拷贝)+解构赋值(按需取值)=灵活的按需取值深拷贝；
JS运行机制( 整体代码宏任务执行同步直接执行异步注册队列执行完微任务队列 ->宏->事件循环)
宏任务：整体代码，setTimeout，setInterval。微任务：Promise，process.nextTick。
简单理解promise
同步异步:常见异步操作：请求、事件、定时
- const p = new Promise((resolve, reject) => {console.log(1);resolve();console.log(2)})
promise.then(() => {console.log(3)}) console.log(4)// 1 2 3 4
Promise 构造函数是同步执行的，promise.then 中的函数是异步执行的状态单向单次改变可链调
- 函数前存在async，函数就会返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
调用该函数时，会立即返回一个Promise对象。
async function asyncPrint(value, ms) {await timeout(ms); console.log(value);}
asyncPrint(‘hello world’, 50);
await执行完，async函数返回的Promise状态才改变。
async函数内部return语句返回的值，会成为then方法回调函数的参数。
await案例
 setup遇到异步请求逻辑时结合async使用方法
axios
时间处理：时间字符串 -> (new Date(str))-> 标准时间对象 ->.getTime() -> 时间戳毫秒值
时间戳毫秒值 -> (new Date(number)) -> 标准时间对象 ->.getMonth()等 -> 年月日
理解：new Date()函数可以将毫秒值或标准时间字符串转化为标准时间格式，类似于 Fri Jul 02 2021 08:57:30 GMT+0800 (中国标准时间)，这种时间对象又包含获取时间值和毫秒值的方法
GIT、NPM命令概念理解
混入：当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，混入的方法、数据优先于组件。全局注册将影响每一个之后创建的 Vue 实例
1、同名数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
2、同名钩子函数将合并为一个数组，因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。
区别于import组件引用相当于在父组件内开辟了一块单独的空间本质上两者独立
Vue项目是如何运行起来的](https://blog.youkuaiyun.com/qq_38577700/article/details/103184213)
VUE项目结构：
- index.html 单页应用的根HTML文件可配置页面title、用某个DOM节点挂载app根组件
- APP.vue 所有VUE页面都是在App.vue下进行切换的，可理解为父组件的父组件…
- main.js, 初始化vue实例，并引入所需要的插件(axios vuex router) 还可以存储全局变量运行npm run dev时就开始执行了
- vue.config.js 可选的配置文件，会被 @vue/cli-service 自动加载。可配置webpack，eslint检查方式，配置第三方插件例如sass等
VUE生命周期：
- beforeCreate（vue对象创建前数据观察和事件机制都未形成，不能获得DOM节点）
- created（创建后 vue对象实例已经创建，但未加载属性方法，即仍然不能获取DOM元素。）
  - beforeMount(载入前加载属性方法前得不到具体的DOM元素，但vue挂载的根节点已经创建)
- mounted（载入后 ▲常用异步请求都写在这里(否则请求完成无法获取到vue实例) 数据和DOM都已被渲染出来）
- beforeUpdate（更新前数据驱动原则下数据发生变化虚拟DOM重新渲染更新前）
  - updated（更新后虚拟DOM重新渲染更新后）
  - beforeDestroy（销毁前）
  - destroyed（销毁后）
  - 拓展(compute计算属性）与method执行结果是完全相同的，但并不是函数而更接近data数据
  compute：数据监听，依赖的数据变化时触发，有缓存，若依赖数据无变化则