#难点总结

01 什么是promise？

promise是异步编程的一种解决方案。

• 什么时候我们会来处理异步事件？

一种很常见的场景就是网络请求了，我们封装了一个网络请求的函数，因为不能立即拿到结果并将结果返回，所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦，但是当网络请求非常复杂的时候，就会出现回调地狱。

• promise基本语法

// new -> 构造函数（1.保存了一些状态信息 2.执行传入的函数）
// 参数 -> 函数(resolve, reject) ，resolve, reject本身又是函数
// 链式编程
new Promise((resolve, reject) => {
  // 需要封装的异步操作
  setTimeout((data) => {
    resolve(data);
    reject(err)
  },1000)
}).then(data => {
  // 网络请求和处理代码分离
  // 处理resolve函数，成功后的结果
}).catch(err => {
  // 处理reject函数，失败后的结果
})

• promise的三种状态

  • pending ：等待状态，比如正在进行网络请求，或者定时器没有到时间。
  • fullfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()；
  • reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()；

• promise.all() 方法的使用

  需求依赖多个请求时

// 传入的是一个可迭代对象
Promise.all([
  new Promise(),
  new Promise(),
  ...
]).then(results => {
// 对两次的结果分别打印
})

02 Vue2和Vue3中的响应式原理

vue2的响应式：

• 实现原理
  • 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）
  • 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

Object.defineProperty(data,"count", {
	get() {},
	set() {}
})

• 存在问题：
  1. 新增属性、删除属性，界面不会更新。
  2. 直接通过下标修改数组，界面不会自动更新。

Vue3的响应式：

• 实现原理
  • 通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。
  • 通过Reflect（反射）：对源对象的属性进行操作。

new Proxy(data,{
	// 拦截读取属性值
	get(target,prop) {
	return Reflect.get(target,prop)
	},
	// 拦截设置属性值或添加新属性
	set(target,prop,value) {
	return Reflect.set(target,prop,value)
	},
	// 拦截删除属性
	deleteProperty(target,prop) {
	return Reflect.deleteProperty(target,prop)
	}
})
proxy.name="tom"