温故而知新

2.CSS 中的 BFC 是什么？

BFC 的特性
BFC 主要有两个特性，我们来学习一下。

特性1：上下外边距重叠
同一个 BFC 下的两个相邻块级元素，会发生上下方向的 margin 重叠。

比如前一个 div 设置了 margin-bottom: 20px，下一个 div 设置了 margin-top: 10px，然后你会发现它们的上下距离其实是 20px（二者的最大值），而不是 30px（二者之和）。

 

 

3.v-model双向数据绑定原理

一、简介

v-model实现双向绑定的，常用于表单与组件之间的数据双向绑定.

1. 原理

分两步骤

1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件

可看出v-model绑定在表单上时，v-model其实就是绑定value和v-on监听input事件的结合体

v-model = v-bind:value + v-on:input

2. 实现

用v-bind:value + v-on:input来模拟实现v-model

<input type="text" :value="username" @input="username = $event.target.value" />

4.JavaScript的循环机制

一、简介

js单线程从上到下执行

常见的宏任务与微任务

宏任务: setTimeout setInterval ajax Dom事件

 微任务:promise.then/finally/catch   async/await 隐式创建promise.then

// // 事件循环 
setTimeout(function () {   //setTimeout 宏任务
  console.log('1');
});
async function test(){
	console.log('5')
	await async2();
	// 隐式创建一个微任务 promise.then()
	console.log('6')
}
new Promise(function (resolve) {
  console.log('2');
  resolve();
}).then(function () {
  console.log('3');
}).finally(()=>{
	console.log('8');
})
function async2(){
	console.log('7');
}
test()
console.log('4');
 
//2 5 7 4 3 6 8 1
 
 
 

注意：async/await的执行顺序

遇到await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完，再回到async内部，继续执行await后面的代码。(好好理解一下上面的说明。也就是说，await只会阻塞当前async方法内的代码，不会影响外部代码的执行)