1. 复习Optional chaining（所属知识点：operator）

为了避免出现undefined.sth的状况，或者出现下面代码的情况。需要使用Optional chaining

if(restaurant.openingHours){
  if(restaurant.openingHours.mon){
    console.log(restaurant.openingHours.mon .open);
  }
}

引申复习：

通常和Nullish coalescing operator一起使用，叫做无效合并运算符。它的作用是把0和nullish区分开。

nullish：null undefined

false：null undefined 0

0??10 结果为0，返回第一个不是nullish的值，如果都是则返回最后一个值。

复习其他常用的operator

The Spread Operator

例子：const a = [1,2,3,...arr]

2.复习ref与reactive

Vue3的reactive和ref原理区别详解 - 掘金 (juejin.cn)

• vue2响应式通过object.defineProperty方法
• vue2缺点是遍历监听深层属性，会带来一定的性能问题。另外是无法监听数组的增加或减少。无法监听对象的新增属性与删除属性。
• vue3使用了Proxy对象，在目标对象之前架设一层“拦截”，类似于安检。
• Proxy对象解决了上述问题，可以对整个对象进行代理，可以监听到对象、数组。另外，Proxy在调用的时候递归代理，不像object.defineProperty需要一次完成。
• 引用了上文中的代码如下：递归处理proxy监听。 其中，需要复习一下为什么使用Reflect， Reflect.get(target,prop)的含义类似于target.prop 修改某些Object方法的返回结果，让其变得更合理,其次是让Object操作都变成函数行为name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。Reflect对象的方法与Proxy对象的方法一一对应。

var target = {
  a:1,
  b:{
    c:2,
    d:{e:3}
  },
  f: {z: 3}
}
var handler = {
  // target 整个对象 handler定义触发行为
  get:function(target, prop, receiver){
    // prop是哪个值被触发
    console.log('触发get:',prop)
    if(val !== null && typeof val==='object') {
        return new Proxy(val,handler) // 代理内层属性
    }
    return Reflect.get(target,prop)
  },
  set:function(target,key,value,receiver){
    console.log('触发set:',key,value)
    return Reflect.set(target,key,value,receiver)
  }
}
var proxy = new Proxy(target,handler)
 
proxy.b.d.e = 4 
// 输出  触发get b,get d, get e

• vue3的ref和reactive借助了Proxy实现
• reactive创建原始对象的响应式副本，即将「引用类型」数据转换为「响应式」数据，对于基本类型数据，把基本数据类型变成一个对象：这个对象只有一个value属性，value属性的值就等于这个基本数据类型的值。
• ref把基本类型的数据变为响应式数据
• 调用ref函数时会new 一个类，这个类监听了value属性的 get 和 set ，实现了在get中收集依赖，在set中触发依赖，而如果需要对传入参数深层监听的话，就会调用我们上面提到的reactive方法。

3.复习router与route【vue问题】

route：一个路由对象 (route object)  表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records) 。路由对象是不可变 (immutable) 的，每次成功的导航后都会产生一个新的对象。

$route.params等属性

router： 通过 this.$router 访问路由器,相当于获取了整个路由文件，在$router.option.routes中，或查看到当前项目的整个路由结构 具有实例方法

4.复习toRefs与toRef【vue->响应式api->工具函数】

toRef官网定义： 基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。

响应式对象：指的是reactive() 响应式对象上的一个属性 创建一个对应的 ref:toRef(响应式对象，响应式对象的一个属性)

toRefs官网定义：将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。

为什么使用toRef或toRefs?往往将属性值等封装在data里，当从组合式函数中返回响应式对象时，toRefs 相当有用。使用它，消费者组件可以解构/展开返回的对象而不会失去响应性，利用这一特性就可以实现将data里所有的属性结构出来。

5.复习布局【css】

BFC

基本概念：BFC block formatting contexts

IFC行内格式化上下文

基本点：盒模型

盒子模型：块级盒、行内盒、匿名盒

块级元素：display为block,list-item,table

行内级元素：display为inline,inline-block,inline-table

匿名盒：不能被css选择器选中的盒子

普通流：static、relative，处于普通流中

static：元素处于普通流中

relative：top left right bottom 设置相对自身的偏移量

absolute:盒子会从普通流中移除，不会影响其他普通流的布局，设置相对于包含块的偏移量，

• position 为 absolute 的元素，其定位将相对于最近的一个 relative、fixed 或 absolute 的父元素，如果没有则相对于 body

fixed：会被移出文档流，包含块是浏览器视窗

一个元素不能同时存在于两个 BFC 中。