Vue组件通信

一、父子间传递 prop / $emit

父组件向子组件传值，通过绑定属性来向子组件传入数据，子组件通过 Props 属性获取对应数据。

子组件向父组件传值（通过事件形式），子组件通过 $emit 事件向父组件发送消息，将自己的数据传递给父组件。

二、$emit / $on

三、Vuex

四、$attrs / $listeners

五、Provider / Inject

六、$parent / $children & $refs

参考资料：

https://mp.weixin.qq.com/s/JLgASmwS7QI6h-ZBPlMBkw

JavaScript 执行机制

JS是单线程的，JS是通过事件队列（Event Loop）的方式来实现异步回调的

一、进程和线程

1. 进程：是CPU资源分配的最小单位，进程之间相互独立，任意时刻，CPU总是运行一个进程（工厂）
2. 线程：是CPU调度的最小单位（工人）
   一个进程中可以有多个线程

每个应用程序都是一个进程，浏览器就是多进程的，每个Tab页，就是一个独立的进程

二、执行和运行

1. 执行：一般依赖于环境，比如node、浏览器等。JavaScript在不同环境下的执行机制可能并不相同
   （Event Loop是JavaScript的一种执行方式）
2. 运行：是指JavaScript的解析引擎，是统一的

三、任务队列

1. task就是任务，每一个语句就是一个任务
2. queue就是FIFO的队列（First Input First Output的缩写，先入先出队列）
3. TaskQueue就是承载任务的队列，而JavaScript的EventLoop就是会不断的过来找这个queue，问有没有task可以运行

四、同步任务和异步任务

1. 同步任务：主线程来执行的时候立即就能执行的代码
2. 异步任务：主线程执行到这个task的时候，“唉，你等会，我现在先不执行，等我xxx完了以后我再来等你执行”。意思就是你先去执行憋得task，等我这xxx完之后再往TaskQueue里面塞一个task的同步任务等待被执行。

五、Event Loop

JavaScript有一个主线程（main thread）和调用栈（call-tack）也称之为执行栈。所有任务都会放到调用栈等待主线程来执行

1. 主线程自上而下执行所有代码
2. 同步任务直接进入到主线程被执行，而异步任务则进入到Event Table并注册相应的回调函数
3. 异步任务完成后，Event Table会将这个函数移入到Event Queue
4. 主线程任务执行完了以后，会从Event Queue中读取任务，进入到主线程去执行，如果TaskQueue中没有任务执行，主线程就一直在这等着
5. 循环如上

六、宏任务（MacroTask）和微任务（MicroTask）

1. 宏任务：所有同步任务代码都是MacroTask（不严谨），setTImeout、setInterval、I/O等都是宏任务
2. 微任务：process.nextTick、Promise.then catch finally、MutationObserver除了这几个，其他的同步都是宏任务

参考资料

https://mp.weixin.qq.com/s/Jj1TPz1aKyke1kjb5x8dNQ

Performance API

用于精确度量、控制、增强浏览器性能表现

四个属性

1、timing对象提供了各种与浏览器处理相关的时间数据

例：计算出发送请求到接受完成数据所消耗的时间

1
2

let timing = window.performance.timing
let duration = timing.responseEnd - timing.requestStart

2、navigation呈现了如何导航到当前文档的信息，有两个属性
（1）type：表示如何导航到当前页面的
0：表示当前页面是通过点击链接，书签和表单提交，或者脚本操作，或者在url中直接输入地址访问
1：表示当前页面是点击刷新或者调用location.reload()方法访问的
2：表示当前页面是通过历史记录或者前进后退按钮访问的
255：其他方式访问的
（2）redirectCount：表示到达当前页面之前经过几次重定向
3、timeOrigin：表示performance性能测试开始时间（千分之一毫秒）
4、onresourcetimingbufferfull：表示当浏览器资源时间性能缓冲区已满时会触发的回调函数
5、memory：一个非标准属性，chrome浏览器提供，这个属性提供了一个获取到基本内存使用情况的对象

参考资料：

https://segmentfault.com/a/1190000011826821
https://www.w3cschool.cn/javascript_guide/javascript_guide-hxou26a6.html

Lodash

Lodash是一个javascript原生库

安装

1

npm i --save lodash

常用方法

1
2
3
4
5
6

var _ = require('lodash');
_.times()
_.map()
_.cloneDeep()
_.assign()
_.isEmpty()

参考资料：

官网

一、七种数据类型

1. Number
2. String
3. Boolean
4. Undefined
5. NULL
6. Symbol(ES6)
7. BigInt(ES10)

二、基本类型&引用类型

1. 不同的存储方式：

   • 基本类型：值在内存中占据固定大小，保存在栈内存中（存储的是值）
   • 引用类型：值是对象，保存在堆内存中，而栈内存存储的是对象的变量标识符以及对象在堆中的存储地址（存储的是地址）

2. 不同类型的复制方式：

   • 基本类型：从一个变量向另一个新变量复制基本类型的值，会创建这个值的一个副本，并将该副本复制给新变量，变量值不互相影响
   • 引用类型：从一个变量向另一个变量复制引用类型的值，其实复制的是指针，最终两个变量都指向同一个对象

三、检测数据类型的方法

1. typeof(需要检测的数据)
   • 返回结果：
   • string number boolean undefined object function
   • typeof window => “object”
   • typeof {} => “object”
   • typeof [] => “object”
   • typeof null => “object”
   • 缺点：只能检测基础数据类型
2. Object.prototype.toString.call(需要检测的数据)
   • 返回结果：
   • 数值：返回[object Number]
   • 字符串：返回[object String]
   • 布尔值：返回[object Boolean]
   • undefined：返回[object Undefined]
   • null：返回[object Null]
   • 数组：返回[object Array]
   • 函数：返回[object Function]

Markdown是一种简单的标记语言

一、标题

标题有两种格式

1、使用=和-标记一级和二级标题

一级标题

二级标题

2、使用#号标识1-6级标题

在设置标题的文字前面加#来表示

标准语法一般在#后跟个空格再写文字

支持六级标题

二、字体

加粗文字左右用两个星号包起来

斜体文字左右用一个星号包起来

斜体加粗文字左右用三个星号包起来

下划线可以用html的u标签来实现

删除线文字左右用两个号包起来

三、段落

段落的换行是使用两个以上空格加回车

段落一

段落二

四、分割线

可以在一行中使用三个以上的星号、减号、底线来简历一个分割线

分割线1

分割线2

分割线3

五、列表

1、有序列表（使用数字并加上.来表示）

1. 第一项
2. 第二项
3. 第三项

2、无序列表（使用*、+、-作为标记）

• 第一项

• 第二项

• 第三项

3、嵌套列表（只需在子列表中的选项添加四个空格）

1. 第一项
   • 第一项-1
2. 第二项
   • 第二项-1
   • 第二项-2

六、区块

区块引用是在段落开头使用>符号，然后后面紧跟一个空格符号

区块引用1
区块引用2
区块引用3

区块引用时可以嵌套的（一个>是最外层，两个>是第一层嵌套以此类推）

第一层

第二层

第三层

区块中使用列表

第一层

• 第一项
• 第二项

列表中使用区块

• 第一项

  第一层
  第一层

七、代码

如果一个函数或者片段的代码可以用反引号包起来（`）

print()函数

代码区块使用4个空格活一个制表符，可以用```包裹一段代码，并指定一种语言

1
2
3
4
5
6

function(){
    let flag = true
    if(flag){
        console.log(11111)
    }
}

1

npm config get register

1
2
3

<div>
    <h6>标题</h6>
</div>

八、链接

1、链接名称

这是一个链接百度

2、<链接地址>

http://www.baidu.com

九、图片

十、表格

使用|来分隔不同的单元格，使用-来分隔表头和其他行

表格的对齐方式：

-:设置内容和标题栏居右对齐

:-设置内容和标题栏居左对齐

:-:设置内容和标题栏居中对齐