 # bfc,块级格式化上下文，相当于一块独立的区域或容器，元素布局不受外界影响。清除高度坍塌-overflow:auto-创建了bfc，清除外边距重叠。触发方式-浮动元素：float除none以外的值，绝对定位元素 position（absolute,fixed）,overflow除了visible以外的值。

#es6继承-通过类来实现继承。 #es5继承-寄生组合式继承-extends,constructor-super function inherit（parent，Child） { Child.prototype = Object.create(Parent.prototype)//使用现有的对象来提供新创建的对象的__proto__ Child.prototype.constructor = Child.

}

语义化标签好处

良好的html架构，便于团队开发有利于搜索引擎优化 seo，便于爬虫获取信息，确定上下文和关键字权重利于不同设备解析代码。

#选择器权重 import 内敛样式1000 id选择器100 类，伪类，属性选择器 10 标签选择器，伪元素选择器 0001 通配符选择器 #webpack-js静态模块打包工具。loaders-

全家桶--

vue- vuex - vue-router -axios- elementui
react - redux - react-router -axios - antd

vue3.2

事件调用：子组件调用父组件方法-defineEmits() --父组件调用方式相同，子组件通过defineExpose()将方法或是属性暴露出去。 watchEffect():自动在数据源改变时触发回调 watch: 仅当数据源变化时，才会执行回调(参数1：数据源参数2：回调函数参数3：是否开启深度监听) 计算属性：组件注册：导入组件直接在模板中使用，组件会自动注册。 defineProps(): props可以使用defineProps()声明语法糖：setup函数直接放在script标签中 v-if : 通过布尔值渲染，true会渲染，false会适当地销毁和重建 v-once ：定义它的元素或组件只会渲染一次。 v-on：@ 绑定事件 v-bind: :绑定数据和元素属性，常用:class $nextTick : v-for -key : 类型为string,number

vue中的 ref 是什么？

Vue的路由模式,实现方式？

router--createRouter() base--'/hytrip' history--createWebHashHistory() routes-{path:"/" redirect: "/home" component:()=>import("@---")懒加载}

`$route`和`$router`的区别？

route-是路由信息对象，router-路由实例

CSS只在当前组件中起作用

<style scoped>

Vuex的使用

State-存放对象的仓库 Getter-计算属性 action-提交mutaion mutaion-改变store状态 action就是用来解决mutations不能异步的问

Vue 组件通讯有哪几种方式

vue 生命周期

onBeforeMount():组件挂载到节点上之前执行函数 onMounted():组件挂载完成后执行的函数 onBeforeUpdate()-onUpdated() -- 更新 onBeforeUnmount()-onUnmounted() --卸载

闭包：

闭包就是有权访问一个函数内部变量的函数，例子：函数嵌套函数。意义：在js中，闭包存在的意义就是让我们可以间接访问函数内部的变量。比如：循环中使用闭包解决var定义函数的问题。用途：1.外部访问内部变量-使用闭包可以外部调用闭包函数，创建私有变量 2.保存变量到内存中，闭包函数保留了对变量对象的引用所以不会被回收。

立即执行函数

声明一个匿名函数，立即调用。意义：创建独立作用域，外部无法获取内部变量，避免变量污染

框架项目-速

第一点引头-解析模板内容

重绘-回流（重绘-一般来说就是元素大小颜色外观改变，浏览器重新根据新属性绘制。回流-页面布局，尺寸，隐藏等改变需要重新构建称之为回流，每个页面至少一次回流就在页面初次加载使。）。对dom反复操作就会经常重绘或者回流就会页面卡死。

解决方法-DocumentFragement(文档片段)-内存里创建一个DocumentFragement，把所有节点（通过childNodes返回节点的子节点）然后对其进行DOm操作然后再插入真实DOM节点里只需要一次重绘

第二点-判断节点类型-解析元素节点（节点类型1）解析文本节点（节点类型3）

解析完元素节点-解析html标签（调用node.attributes返回指定节点属性集合。--调用正则匹配（所有v-开头的）-test测试字符是否满足正则表达式规则返回布尔值。开始解析Vue指令，通过函数分割成text,html,model进行特定功能实现，调用innerHtml,textContent,nodeValue等api实现功能-

v-on ：通过split分离出冒号，再注册一个事件，发生改变就执行。
model功能实现-实现双向数据绑定，给node注册（addEventListener）一个input事件，当前元素value发生改变就修改node数据。加入了防抖功能
自定义指令-避免代码复杂化创建一个对象，创建单独的函数，将方法抽取到对象里，后续根据具体功能调用或者绑定事件创造自定义指令

复杂类型比如对象类型嵌套就需要进行递归调用函数

第三点-对于数据劫持

vue2-使用Object.defineProperty给data添加getter,setter，然后使用发布订阅者模式。出现问题-如果是复杂类型就需要递归，赋值一个非响应式对象进去需要重新调用set(新增属性无能为力).问题：无法监听数组下标变化，不能动态劫持 vue3使用Proxy对象创建对象代理（传入两个参数一个是需要代理的对象，一个是捕获器）代替Object.defineProperty-handler（陷阱操作符，拦截各种取值赋值操作依托track（读取时触发依赖）,trigger（更新时触发依赖）进行依赖手记和派发更新）。

reactive-ref.就是把get set delete放入其中。ref可以同时处理基本数据类型和对象，reactive只能处理对象不支持原始类型

第四点-关于副作用函数

查看vue.js设计和实现里面，把副作用函数收集到桶里，操作发生时从桶里取出副作用函数执行。使用---解决了副作用函数和被操作字段之间的明确联系。使用weakMap-Map-set类型创建一个树状结构。优势-weakMap对key是弱引用，不影响垃圾回收机制的工作，一旦回收对应的键值就不会被访问，所以只存储当key引用对象存在时才有价值的信息。如果Map代替，用户对target没有引用也不会被回收，最终导致内存溢出。 effect-- 1.使用全局变量activeEffect来存储effect存储的函数。如果发生嵌套时只会收集到内层副作用函数。所以要使用一个函数把f副作用函数压入栈中，等执行完毕再将其弹出。 2.lazy调用，在options添加lazy属性，判断options.lazy的选项值，为true不立即执行副作用函数从而实现懒执行 track-判断activeEffect是否存在，判断depsMap-dep是否存在对象，如果没有就创建并加入activeEffect 。 trigger-找dep，执行副作用函数

全栈项目：

文件夹-public-server 数据库-MongoDB是面向NoSQL数据库,数据以文档形式存储，将文档存储在集合里。 nest框架-技术选型--企业级Node服务端框架。模块化构建。基于typeScript，丰富的工具模块每个模块-module-server-controller，使用装饰器来声明控制器，声明路由。@Controller（c处理http请求并返回响应）-@Module(包含控制器，服务，其他模块)-@Injectable(封装和业务逻辑相关代码) 路由-使用@Get-@Post-@Put-@Delete 连接数据库-mongoose，连接关系型数据库可以用typeorm管理。第一条 -四个页面- 1.使用useEffect,useState,memo。 2.css使用styled-components，就是设置styled.div. 3.调用Toast，进行页面注册登录选择头像显示报错信息，可以通过toast.error(信息-toastOptions进行样式选择) 4.设置路由地址-使用react-router。最外层是-设置path,element. 5.在注册页面里设置 link(手动跳转到登录页面)和useNavigate（注册成功自动跳转到聊天页面）。使用useState，对象里包含用户名密码邮箱确认密码以及验证码，注册时对这些信息有长度限制。给提交按钮设置onSubmit后点击按钮可以把信息通过 axios.post请求（第一个参数是地址，第二个是信息）发送到服务端，如果成功则把信息通过localStorage存储到本地。 6.在登录页面差不多，只需要返回电话或者邮箱以及密码到服务端 7.调用一个api网址，其功能就是返回各种头像,使用Buffer设置缓冲区，使用base64编码返回字符串。使用JSON.parse 把localStorage数据转换对象，取userName进行post请求。useEffect里不能使用async await. 8.聊天界面就是使用服务端获取所有用户信息的接口，获得名称和头像。

nest

文件夹-user。 dto(数据传输对象)-文件夹：使用管道和dto验证传参： createuser-loginuser-updateuser 管道和拦截器很像：绑定管道使用，用装饰符邦到控制器里，然后使用Body绑定DTO,@IsString，IsEmail,@IsNotEmpty后面跟随message带有需要返回的报错信息。新建entities-存放实体类-调用mongoose mongoose-一切源于schema，用来定义模型，模型从底层创建和读取MongoDB文档。用装饰器来构建。 SchemaFactory-内置方法读取模式文档，创建schema对象。 @Prop-装饰器-接收一个可选参数，通过这个可以指示属性是否必须

service-使用@InjectModel()装饰器将User模型注入userService中
 文档查询-mongoose提供很多方法-find查询出来是数组，findOne单个文档，findById.
创建四个异步函数，把dto中的类导入，定义一个query对（.findOne()返回单个文档）
再跟.exec()返回Promise对象。
根据不同的函数功能，在数据库里查找不同的数据，使用if语句判断是否用户或者头像存在，返回相应的数据到浏览器端.
socket，io.connect连接服务端接口。-socket.emit发送信息-socket.on监听
从websockets中引入，@webSocketGateway,@webSocketServer两个装饰器，


验证码功能-indentify
需要在main文件里引入 session，使用app.use设置服务端session签名，客户端cookie名字，返回前端key的属性，设置cookie过期时间。

跨域问题-setupProxy 设置跨域，在package.json中加入proxy-设置本地端口。
调用svgCaptcha使用create设置生成验证码的长宽高文字大小背景颜色。存储验证码记录到session
createUser函数-包含req,body两个参数，如果两个参数中的toLocallowercase相等返回true.

组件库

基于vue3和lucky-cli脚手架
代码规范是eslint,还有提交规范。


props.ts steps.vue分离
steps组件-使用svg里的path,viewBox，定义步骤数，和当前步骤。在：class中根据步骤数切换不同的样式。分为未选择，带选择，选择三种样式。讲一下饿了么源码里的步骤条.
进度条组件：条形进度条相当于两个图层重叠，提供百分比根据样式是否内显不同显示。
环形进度条：svg设置背景圆形和进度圆形重叠，
动态进度条，使用setTimeout和random函数使进度随机。
树组件-递归组件设置插槽，设置Menu.vue,MenuItem,SubMenu.
 ReSubMenu - 递归组件。 全局注册组件，如果判断child.child还有，则继续自己调用自己。一次性请求数据会耗时。点击时加入一个loaging动图，展开第一级节点，从后台加载节点列表，以此类推。使用load

vue 速过