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

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

自用快速复习

数组(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.csdn.net/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：数据监听，依赖的数据变化时触发，有缓存，若依赖数据无变化则取缓存值；只读但当加入set后就可以修改赋值
  method：事件驱动，无缓存，每次手动调用重新计算。
  - 拓展(watch监听)对象，键是要侦听的响应式 property（ data 或 computed ），值是对应的回调函数或方法名
插槽：子组件提供给父组件的占位符，用表示，父组件可以在占位符中填充任何模板代码
父组件给子组件分发内容的工具 <slot name="header"></slot> <template v-slot:header> <template/>
- 作用域插槽：将子组件数据作为元素的一个 attribute 绑定。
  父组件即可访问子组件数据并更改显示内容。

子组件
<slot v-bind:user="user">{
   
   { user.lastName }}</slot>  
父组件
<current-user>
  <template v-slot:default="slotProps">{
   
   { slotProps.user.firstName }}<template/>
</current-user>

v-slot 的值支持解构
 <slot v-bind:user="user">{
   
   { user.lastName }}</slot>  
<current-user>
	<template v-slot:default="{user: person }">{
   
   { person.firstName }}  	 <template/> 
</current-user>
动态插槽名   
<current-user>
<template v-slot:[dynamicSlotName]> </template>[动态插槽名变量]
</current-user>

v-slot缩写#

VueX：
- 概念：
理解：数据(状态)驱动视图，用户与视图交互触发动作、交互动作改变状态，数据驱动视图…单向数据流
当状态(数据)背多个组件共同使用时单向数据流容易被破坏
多个视图依赖同一状态(数据)、多视图行为会更改同一状态的情况下
将多视图共享状态(数据)抽离出来全局管理，所有依赖它的组件构成宏观上的巨大视图，即可解决问题
- 使用：
项目中一般用于存储登录用户的信息和状态等
Vuex 应用的核心就是 store容器，它包含着你的应用中大部分的状态 (state即共享数据)
Vuex 的状态存储是响应式的，不能直接改变 store 的状态，唯一途径就是显式地提交 (commit) mutation
每个应用将仅仅包含一个 store 实例
- getters 拿到state属性需要对拿到的数据进行操作，需要多处复用时可抽取为getters函数。可传参，this.$store.getters.functionName(param)
- mutations 必须是同步的，用于更改 Vuex 的 store 中的状态的唯一方法，可传参，const mutations= { setCheckedList: (state, item) => {state.checkedList.push(item);} } this.$store.commit(vocabulary/setCheckedList,voc);
- actions 与mutations功能相同，但可以处理异步，存值用$store.dispatch()方法
- plugin:它是一个长期存储得解决方法，因为放在state中的数据在刷新时会丢失，这时候使用这个plugin.js插件它会帮你存储起来。案例1 案例2
- Module 将庞大的store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。最后引入(或使用webpack的require.context)根模块进行使用，也方便管理维护
- mapState, mapGetters, mapActions, mapMutations当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：
虚拟DOM(vdom）、浏览器底层执行理解：
1、创建DOM树分析器分析HTML元素，构建一颗DOM树
2、创建StyleRules(CSS) CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。
3、创建Render树将DOM树和样式表，关联起来，构建一颗Render树
4、布局Layout 开始布局为每个Render树上的节点确定一个在显示屏上出现的精确坐标。
5、绘制Painting Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。
- 原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，那么浏览器就会执行十次流程。会浪费性能，造成页面卡顿，影响用户体验。
- 虚拟DOM用数据结构模拟DOM，一次操作若多次更新DOM，虚拟DOM不会立即操作DOM，而是将这10次更新的diff(diff算法)内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上
Proxy：代理对象：在对目标对象的操作之前提供了拦截，不直接操作对象本身，而是通过操作对象的代理对象来间接来操作对象
引入文件、插件、第三方库、css时不需要{}，
引入组件时不需要{}，(抛出组件都是export default )
引入一或多个export方法时需要{} (抛出组件时多个单独的export )
VUE响应性理解：
将一个对象传入vue实例作为data时，vue将自动遍历该对象且给属性全部添加getter、setter。这使得该对象属性被访问修改时，VUE能够追踪依赖。
VUE中data里的return:
因为不使用return包裹的数据会在项目的全局可见，会造成变量污染
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
VUE的keep-alive
VUE过滤器

扫描二维码关注公众号，回复： 15774489 查看本文章
VUE3的组合式API，setup函数：
数据和逻辑也组件化了
将组件部分数据与逻辑从组件中抽离，可实现组件通信，事件派发，逻辑复用。
- 调用时间
  在创建组件实例时，在初始 prop 解析之后立即调用 setup。可以向vue实例注入数据和方法。
  在生命周期方面，它是在 beforeCreate 钩子之前调用的。
- 参数
  因为setup在组件的prop 解析之后调用，所以能够函数内部可使用父组件传递的props数据，setup(props,context)。
  - props来自父组件，需要子组件声明接收，不能解构、可以监听
    context.emit 调用父组件方法
    context.slots 暂时没有找到对应用法，等待后续更新
    context.attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (包含class 、style、vue绑定在DOM上的事件属性等)，与props区别在于：
    - 1、props 要声明，attrs 不用声明
    - 2、props 声明过的属性，attrs 里不会再出现
    - 3、props 不包含事件，attrs 包含
    - 4、props 支持 string 以外的类型，attrs 只有 string 类型
- 案例：setup遇到异步请求逻辑时结合async使用方法
  在setup函数中除了常规的数据和函数，还可以写公共的生命周期函数，且与VUE组件的生命周期函数不同，存在对应关系。且与混入合并的规则l类似，混入的方法优先于组件方法被调用。
  setup中emit的用法。
- 要点：
  - 组合式API来复用业务逻辑：内部不能用this，在beforcreate之前，setup()只能是同步的不能是异步的
  - ref与reactive可简单记为：基础数据类型用ref()给数据添加依赖引用类型如对象、数组用reactive
- 理解：
  在Vue2.x中，我们实现一个功能，需要在data中新增数据，在methods/computed/watch中新增业务逻辑数据和业务逻辑是分离的，不利于管理，为了解决这个弊端，Vue3.0推出了Composition API（组合API）也叫做注入API，实际上setup中定义的数据和业务逻辑，会注入到data和methods中。
  setup()是组合API的入口函数，可以直接在里面定义变量和方法（数据和业务逻辑），通过对象的形式返回
  暴露出去
- 技巧：
  - setup的对应js文件函数功能逻辑分离的越碎越好方便多组件复用而不是一个文件为一个组件服务
  - setup中可以将多个api(JS逻辑函数)注入组件，也可以在函数内写生命周期函数(相较VUE2有变化)，并将它们注入组件(return)
DOM对象的两个属性
- property
  是DOM对象中的基本属性，自定义属性不会被加入其中
- attribute
  attributes是属于property的一个子集，它除了默认属性，还保存了HTML标签上的自定义属性
- attribute和property之间的数据绑定是单向的，attribute->property；即attribute更新property同名属性会更新，property更新时，attribute不会同步
  更改property和attribute上的任意值，都会将更新反映到HTML页面中；
VUE组件间传值的方式总结与localStorage详解+sessionStorage+cookie+session+token
VUE如何设置环境变量
 环境变量官网
 第三方解释
/deep/ !import
UEditor富文本编辑器
element-UI的 Container 布局容器与 Layout 布局
JS原型：
v-bind=“$props“
一次性下发已声明的props
VUE特点：组件化、虚拟dom、数据驱动、单向数据流状态管理
VUE中 v-for优先于v-if执行，应当在计算属性中就将数据处理好，少用v-if
VUE中v-for为什么需要用key：

没有key时，Vue更新视图会删除全部DOM元素后全部重新渲染。
有key值后通过算法比对，已存在的不需要重新操作以节约性能。
并且key最好是元素的唯一ID，不能是数组的index。因为数组有可能在任意地方添加元素而不一定再数组末尾，从而导致数组index起不到唯一标识的目的，vue依然会全部重新渲染。

this值在函数执行时决定，this即执行者。
箭头函数内部的this是词法作用域，由上下文确定。

setTimeout(function () {
    
    
        				console.log('this in init: ', this);
   				 }, 1000); 	//window  异步队列中直接执行，执行者this是window
setTimeout( () => {
    
    
        				console.log('this in init: ', this);
   				 }, 1000); 	//与上一级作用域的this指向相同

闭包：
定义函数时与他周围状态（数据）的引用捆绑在一起。
简单理解就是能够读取其他函数内部变量的函数

　　function f1(){
    
    
　　　　var n=999;
　　　　nAdd=function(){
    
    n+=1}
　　　　function f2(){
    
    //f2函数，就是闭包。
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000  函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除

让外部访问函数内部变量成为可能；
局部变量会常驻在内存中；

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

猜你喜欢