# WH2114 **Repository Path**: zuozhaoxi/wh2114 ## Basic Information - **Project Name**: WH2114 - **Description**: qeweqeqwasdsadsadasdsadssadadsdsaadsads - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 8 - **Forks**: 2 - **Created**: 2022-02-14 - **Last Updated**: 2022-09-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # daydayup 每天进步一点点 不要请假 # WH2114 # 9周 # Vue 基础 # Vue 进阶 # Vue 项目周 # Node 开发 # 留级 # React 基础 # React 进阶 # React 项目周 # 小程序 # 就业周 # 毕业时间4.14 # 纪律 # 迟到 8:30-9:00 早自习背面试题 9:10-10:40 10:50-12:10 13:50-15:50 上课 4:10-6:10 7:00 - 10:00 自习课 (9:30 特批) 明天开始 迟到多久去外面站多久 第三次迟到 1000字检讨 第四次迟到 下个班 早退 周六下午 # 课堂纪律 # 不睡觉 # 不玩手机 课堂站半小时 # 不吃东西 # 不无故外出 # linux 指令 (电脑的操作指令) 查看版本 node -v node --version window+r cmd 控制台 D: 直接切换到硬盘 D cd /d ls 显示当前文件夹得所有的文件目录 ? tab 自动补全 cd 切换到对应的文件目录 cd .. 切换到上一级文件 touch 创建文件 echo test> ? mkdir 创建文件夹 pwd 显示文件目录路径 ? rm -rf 不询问强制删除文件 ? rimraf ctrl+c 强制退出 当前命令 上下箭头 读取之前的命令 mv a b 把 a 文件移动到 文件 b 里面去 vim vi ESC :wq! : 在线文本编辑 ? :"q!" :"wq!" # cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm -v # 安装全局插件 cnpm i rimraf -g 删除文件 cnpm i @vue/cli -g # GIT # romte 远程主机仓库 # repostiory 本地仓库 # index 暂存区 # workspace 本地工作区 # git add ./ 添加代码到暂存区 # git commit -m "注释写清楚你的代码意义" 提交代码到本地仓库 # git push 推送代码到远程主机 # GIT pull 拉取代码到本地工作区 # git checkout "dev" 切换分支 # git fecth 拉取 拾取代码到本地仓库 # git status 查看文件状态 # git remote add origin https://gitee.com/zuozhaoxi/wh2110.git 把2个仓库链接一起 # git push origin master:master # git branch 查看分支 # git branch dev 创建分支 dev # git merge dev master 合并分支 # dev:dev # master : master # git pull origin dev:master (远程dev分支拉取到本地的master) # git push origin dev:master (dev=> 本地的dev分支 master=>远程的master分支 ) # git log 查看提交日志 git config --global user.name "xxxxName" git config --global user.email "xxxxx" # 公司的仓库操作 1. 克隆 (用户名和密码 私有仓库地址 ) git clone https://gitee.com/zuozhaoxi/wh2110.git 2. 拉取远程主机仓库的代码到本地仓库 (多人协作开发 ) git pull origin master 3. 添加到暂存区 git add ./ 4. 添加到本地仓库 git commit -m "ds" 5. 推送到远程主机仓库 git push origin master # 拿高薪 offer (100分 满分) # 1. 学历毕业年限 20分 (本科计算机 20 15 10 5 0) # 2. 社交 (牛逼 VS 恐惧 20 10 0 沟通 语言组织 情商 说话技巧) # 3. 面试题 (20分 40-0 原生 Vue React 小程序 ES6 ) # 4. 技术 (40分 Vue项目10 Vue+Node项目10 React项目10 小程序项目20 ) # Vue 学习 # vue https://cn.vuejs.org/v2/guide/ # 1.0 API文档 (别人 封装好的Vue.js 代码 教你怎么使用 ) 接口文档 测试文档 需求文档 产品经理 项目经理 开发文档 前端 开发环境 针对于 开发者 development 测试环境 生产环境 针对于 客户 production Freamwork Vue = React + Angular Vue===> view(发音) 侧重视图层 Vue 通过实例化 Vue 这个构造函数 实现 vue 框架的所有功能 vm 得到的实例化对象 el 属性 document.querySelector(el); 说明Vue的作用范围 会将app 里面所有的 DOM 渲染 成 虚拟DOM(?) 存储在 内存中 data Vue 需要初始化的数据 最常见的属性 {{ }} 最普遍的模板标记标签 双大括号语法 插值表达式 核心功能 允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 声明式 直接在 html 书写 a 编程式 直接在 javascript 书写 location.href 响应式 reaction 数据被修改之后 页面里面随之跟着里面更新 (vue提供自动响应式系统) 强大的指令功能 v- 代替你进行DOM 操作 Attribute v-bind 绑定vue标签 或者 组件的 属性 attribute v-bind:src v-bind:title 绑定动态的属性 静态属性 永远不改变 不是变量 动态属性 接收是变量 (v-bind) 70% v-if/v-show 条件渲染 控制显示隐藏 90% v-on 绑定事件 v-on:click v-on:change v-on:keydown 100% v-for 循环 循环对象 或数组 90% v-model 只能绑定在输入框 实现数据双向绑定 (view 视图 + model 数据模型) 90% 当你修改 页面的时候 v-model 自动去更新数据层 当你修改 数据的时候 v-model 自动去更新视图层 v-text textContent 只接受文本 v-html innerHTML 文本和html标签 v-once read-only methods vue 属性 接收方法 组件化 组件系统是 Vue 的另一个重要概念 允许我们使用小型、独立和通常可复用的组件构建大型应用 封装 类似 Vue 实现数据的双向绑定 双大括号语法 # 2.0 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的 设计模式 (工厂模式 单例模式 混合模式 观察者模式 发布订阅模式 ) 数据开发模式模型 MVVM M model 数据模型 V view 视图界面 VM viewmodel 视图和数据混淆在一起(数据视图系统) MVC M model 数据模型 V view 视图界面 C controller 控制器 (JS逻辑 方法和事件) MVP M model 数据模型 V view 视图界面 P Prestener 复杂逻辑 选项对象 {} 选项对象属性 (data el methods name watch computed filter component directive 10个生命周期钩子函数) vm 实例对象 vm Vue.prototype vm.__proto__ 实例属性 vm.$data vm.$el 实例方法 / 数据 vm.$4 vm.$set 实例方法 / 事件 vm.$emit vm.$on 实例方法 / 生命周期 vm.$nextTick vm.$mount() vm.$forceUpdate (强制刷新页面) el vue挂载元素 $mount("#app") data 对象 响应式系统 (只要检测到数据更新,就一定会去修改视图 ) 组件系统 1. 当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中 2. 当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值 (响应式) vm 实例化后赋值 没有意义 没有被响应式视图系统监听 所有需要用到的数据都必须在data 里面初始化 否则没有响应式监听 借鉴 MVVM VM 实例对象 实例属性 vm.$el vm.$data 实例方法 vm.$watch 监听数据改变 vm.$set 修改对象和数据刷新视图 vm.$delete 删除对象和数组 刷新视图 ref 用来记录真实DOM this.$refs a. ref 用于标签 表示这个真实DOM 对象 b. ref 用于组件 表示这个组件对象 初始化操作 window.onLoad = function(){} document.ready = function(){} $(function(){ }) 实例生命周期钩子 每个 Vue 实例在被创建时都要经过一系列的过程 (实例创建 实例载入 实例更新 实例销毁 ) 这些过程称为 实例生命周期 Vue 会在这个每个周期设置对应的函数去监听 这些函数就叫 生命周期钩子函数 Vue 内置一些生命周期钩子函数(function ) 给了开发者在不同阶段添加自己的代码的机会 实例创建 beforeCreate created 1 实例初始化创建 实例载入 beforeMount mounted 1 初始化载入 实例更新 beforeUpdate updated n 实例 里面 data 数据改变 实例销毁 beforeDestroy destroyed 1 实例被移除 activated 激活 deactivated 失活 errorCaptured 错误捕获 真实DOM ref Vue 创建实例之前 DOM树 先读取根元素 解析 所有的dom数据标签 然后以 树形结构 把dom数据存储在内存 (模板存储DOM) 在内存中 描述 dom节点 的 数据信息 叫做 虚拟DOM 抽象定义 虚拟DOM Virtual DOM (性能优化) 优势 提升性能 提高加载速度 缺点 多了一次 虚拟DOM 初始化的计算 (尽量第一次不要加载过多的数据 ) 数据更新 patch diff算法 比较不同 如果每次data 改变 也就是数据更新 Vue (核心DIfferent 算法) 监测到数据改变 自动生成 新的虚拟DOM 会去和 旧的虚拟DOM 进行对比 得到变更的部分 patch 然后会把这 patch 放到一个队列 最终批量更新 渲染成真实DOM # 3.0 动态的class 和 style 切换 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强 除了字符串之外，还可以是对象或数组 v-bind v-bind:class :class = " " {} [] v-bind:style :style = {} [{}] :style="{display:current==i?'block':'none'} # 2.3 v-if 条件渲染 指令的表达式返回为真 才会真正的渲染 表达式的值 为 false 则什么都不做 不会渲染DOM template 包裹的空元素 没有任何效果 v-else 必须 与它最近的 v-if 匹配 v-show 指令通过 display 来控制显示和隐藏 带有 v-show的元素 会始终渲染到DOM 只是简单的样式切换 v-if vs v-show v-if 是“真正”的条件渲染 v-if 也是惰性的 如果在初始渲染时条件为假 则什么也不做——直到条件第一次变为真时，才会开始渲染条件块 v-show 不管条件为真为假 都会去渲染DOM 简单地基于 CSS 进行切换 使用场景 (使用频率) v-if 有更高的切换开销 在切换条件很少改变的情况下 推荐使用 v-if v-if 现实初始化内部的数据变量 v-show 有更高的初始渲染开销 需要频繁的切换的情况下 推荐使用 v-show v-if 与 v-for 一起使用 (不推荐) 如果一定要用 v-for 比 v-if 有更高的优先级 v-if 写在 v-for(循环) 的外面 异步数据 错误 Cannot read property 'xxxxxx' of null" 变量的属性为 null TypeError: Cannot read property 'username' of null # 2.4 v-for v-for 列表渲染 指令可以渲染数组和对象 v-for="(item,index) in items" v-bind:key="index" v-for="(value,key,index) in object" 遍历对象 虚拟DOM 性能优化 key 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素 你需要为每项提供一个唯一 key 属性 Vue 识别节点的一个通用机制 一个组件添加 key key值更改 组件强制刷新 深浅拷贝 ... 展开运算 JOSN.parse 递归 深浅复制 object.assign 深浅监听 数据类型 基本数据类型 String Number Boolean null undefined (不可变对象 深拷贝 ) 引用数据类型 对象 数组 (可变对象 浅拷贝) 不可变对象 基本数据类型 immutable 修改不可变对象 响应式系统一定检测到数据更新 可变对象 引用数据类型 mutable 修改可变对象 可能 响应式系统无法检测到数据更新 Vue 响应式视图 可以检测 不可变对象的数据修改 可变对象 有的时候监测不到 (响应式视图系统会监测可变对象第一层的数据改变) 修改 基本数据类型 会触发视图更新 修改 引用数据类型 可能触发视图更新 数组方法 push pop shift unshift splice 增删改 sort reverse map 映射 return reduce forEach filter find 查找某一个 some 有一个满足就行 every 所有的都必须满足 concat 拼接 slice 截取 Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新 变异数组方法 这些方法直接修改原来的数组 push pop shift unshift splice sort reverse 非变异数组方法 这些方法不能改变原始数组 但可以返回一个新的数组 map reduce forEach filter find some every concat slice 实例方法 全局方法 vm.$set(array,index,newItem) Vue.set 设置 vm.$delete(arr, index) Vue.delete 删除 # 2.5 用特殊变量 $event 函数调用时候的参数 是 实参 函数定义时候的参数 是 形参 $event vue 提供的事件对象 参数 事件修饰符 event.preventDefault() 阻止浏览器的默认事件 event.stopPropagation() 阻止事件冒泡 v-on 提供了事件修饰符 .stop 阻止单击事件继续传播 .prevent 阻止浏览器的默认事件 .capture .self .once 这个事件只能触发一次 .passive 按键修饰符 键盘事件 (键盘码) enter 13 right 37 left space 32 up down v-on:click @click input change click dbclick keyup keydown keypress mousemove mousedown mouseup mouseenter mouserleave touchstart 后面再讲 手机端的触摸事件 touchmove touchend 原生绑定事件 (DOMO级事件 DOM2级 事件 ) onclick="do()" DOM0 document.getElementyById("box").onclick = fn; addEventListener("click",fn,false/true) 默认 false false 冒泡 true 捕获 DOM2 removeEventListener("click") jquery 绑定事件 on / off $('.box').on('click') bind / unbind $('.box').bind('click') click() 事件委托 ===> 基于事件冒泡的原理 把子元素的触发 父元素代替子元素执行 (给未来元素绑定事件 把事件绑定到父元素上去) $(parent).on('click',child,fn); $(parent).delegate(child,'click',fn); // 委托 过滤器 filter Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化 (日期格式 货币格式) 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 “管道”符号指示 | Vue.filter 全局过滤器 filters 局部过滤器 # 2.6 v-model 用于绑定 input 和 textarea 的 value 输入框 语法糖 它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理 v-model 实现数据双向绑定 view 视图层 修改视图(input 事件) v-model 会自动去更新对应的 数据(model) model 数据层 修改数据 通过js修改数据 v-model 会自动的去更新 数据对应的 视图 (view) Vue 不是一个真正的MVVM模式的 框架 ,只是借鉴了 MVVM 部分精华和优点 设计模式 MVC angularJS M model 数据层 V view 视图层 C controller 控制器层 MVVM M model 数据层 V views 视图层 VM viewmodel 数据视图对象 MVP M model 数据层 V views 视图层 P presenter 逻辑层 (js逻辑处理代码+方法) v-model 的底层原理 语法糖 Object.defineProperty() 进行数据劫持 (监听数据改变 从而触发修改视图的逻辑函数) (监听输入框输入事件 从而修改对应的数据) 它会根据控件类型自动选取正确的方法来更新元素 v-model 本质上不过是语法糖 ( 包含大量逻辑代码块集合) 负责监听用户的输入事件以更新数据 text 和 textarea 元素使用 value 属性和 input 事件 checkbox 和 radio 使用 checked 属性和 change 事件 select 字段将 value 作为 prop 并将 change 作为事件 $("#select").prop() v-model 也有修饰符 lazy input 变为 change 延迟触发 trim 去除首尾空格 number 用户的输入值转为数值类型 # 2.8 route 页面切换 进入和离开的动画 Vue 提供了 transition 的封装组件 任何元素和组件添加进入/离开过渡 v-if v-show 组件切换 (动态组件切换 子组件切换) 过渡 (0-1) 在进入/离开的过渡中，会有 6 个 class 切换 v-enter 进入之前 开始帧 过渡 v-enter-active 正在进入 animation v-enter-to 进入完成 结束帧 v-leave 离开之前 v-leave-active 正在离开 v-leave-to 离开完成 v- transition 没有name 默认 v- transition 添加 name = fade v 替换成 fade 初始化渲染 过渡 appear appear-active-class 动画 v-if / v-show # 3.0 Vue 也允许注册自定义指令 操作底层DOM 代码复用和抽象的主要形式是组件 (component 讲到这里再说) v-on v-if v-show v-for v-model v-bind v-else v-once v-text v-html 指令目的 作用 操作底层DOM 指令 directive v- 开头 驼峰命名 (单词之间 大写字母 变为小写字母 前面加 - ) newColor (W3C HTML 不准出现大写字母 ) 全局定义 Vue.directive(name,{钩子函数}) Vue.filter 局部定义 directives filters 指令钩子函数 一个指令定义对象可以提供钩子函数 (操作指令的钩子函数 ) bind 指令第一次绑定到 元素时候调用 进行一些初始化操作 1 inserted 插入 被绑定元素插入父节点时调用 1 update 更新 数据或者DOM节点 更新 n unbind 只调用一次，指令与元素解绑时调用 1 钩子函数 有几个参数 (el binding ) el 绑定的DOM binding 指令携带的变量数据 name 指令名 value 指令的值 最重要 binding.value expression 指令对应的表达式 变量名称 argument 指令的参数 v-on:click click args 冒号声明的 modifiers 指令的修饰符 v-on.stop:click stop 修饰符 v-slot 分发 v-pre v-cloak 锁住DOM # Vue-CLI # cnpm i @vue/cli -g # vue --version # vue create vueapp # cd vueapp # npm run serve 启动项目 # vue ui 可视化安装 # 反向安装 # rimraf node_modules # cnpm i # Vue 项目的文件 # node_modules 项目的插件 # public 项目的共有的静态文件 (一般不会打开) # src 项目的开发工作区 # .editorconfig 编辑器配置文件 # .gitignore git 配置文件 # babel.config.js babel的配置文件 # package.json 项目的安装包的配置文件 (脚本) # readme.md 文本 # src # assets 项目的静态文件 (图片) # components 项目的组件 # router 路由 # store vuex # views 路由组件 # app.vue 根组件 # main.js vue项目的启动主入口文件 # ESLint (编程规范 ) # 移动端适配 等比缩放 rem (当前页面的 根节点html 的字体大小 ) # px vw vh em rem pt # 手机端 尺寸 750px # 根据手机的宽度和设计稿宽度 求出对应的rem 进行等比缩放 # 设计稿宽度 : 手机的宽度 = 设计稿的对应Rem : 手机对应的 rem # 750px : 100vw = 100px : ? # ? = 100vw/7.5 # 网易适配 # 假设 750px 宽的 设备下 对应的 rem = 100px # 假设 750px 设计稿 宽度 为 200px 的div 200px ==> 2rem # 750px : 100vw = 100px : ? ==> x 100vw * 100 / 750 = 100vw/7.5 # 100vw/7.5 每一个手机对应的 rem # 淘宝适配 (rem = 设备宽度的 10/1) # 1. 把屏幕平分成100等分, 设定1rem = 10等分 1rem = 10vw; # 2. 根据 dpr 来 把 viewport 放大 做到物尽其用的适配 meta # dpr 单位面积物理像素的密度比例 # 物理像素 手机设备最小的物理晶体导管 pt # border 1px 的优化 # 链接阿里云三种方式 # 1. 远程链接 # 2. git 链接 ssh root@公网IP 再输入密码 # 3. xshell xftp # 安装 express # express --version # cnpm i express-generator -g 安装全局的高版本 # cnpm i koa-generator -g # 再次查看版本号 # 安装 express 项目 # 切换到指定的目录 # express -e myserver # cd myserver # cnpm i / yarn install # 启动项目 # npm start # express # express express 对象 app app.get 获取变量 app.set 设置全局的变量 指向任何值 app.post app.all 所有的请求都包含 app.use 使用注册全局的函数 (中间件) 中间件 middleware 本质就是一个高度封装的函数 有一定的业务逻辑的 后面的中间件可以使用前面的中间件的功能 注意顺序 https://www.aliyun.com/minisite/goods?taskPkg=1212cpz&pkgSid=182465&userCode=saht5k94 # 前端部署 1. 把项目里面所有的 localhost 替换成 公网IP 2. router 设置成 mode:hash 3. 设置 打包相对路径 publicPath:"", 4. 测试文案 全部去掉 console.log() 5. 本地测试 6. 远程线上测试 # 管理系统 社区疫情管理系统 # Vue3.0 + ElementPlus + Node + MongoDB + Express # 登录 注册 # 错误页面 # 主页 (头部 侧边栏 ) # 版块 (首页 个人中心 XXXX 权限管理 人员管理 公告管理 意见管理 资金管理 健康管理 ) # react # react 有几层境界 # 1 纯 react UI + API # 2 redux(vuex) # 3 react-redux + immutable # 4 mobx + immutable # 5 hooks (纯函数写代码) # 6 hooks + mobx + react-redux + immutable # 7 hooks + mobx + react-redux + immutable + typscript + dva + umi # 8 升天... # 安装react 脚手架 cnpm i typescript -g 安装脚手架 # create-react-app # https://create-react-app.bootcss.com/ cnpm i create-react-app -g create-react-app --version create-react-app react-app 安装项目 npx create-react-app@4.0.3 react-app cd react-app npm start 启动项目 http://localhost:3000/ npx create-react-app my-app --template typescript npx create-react-app react-app create-react-app react-app --template typescript # dva (https://dvajs.com/guide/getting-started.html) cnpm install dva-cli -g dva -v dva new dva-app cd dva-app npm start http://localhost:8000/ # umi (https://umijs.org/zh-CN/docs/getting-started) mkdir umiapp cd umiapp npx @umijs/create-umi-app yarn create @umijs/umi-app cnpm i 反向安装 npm start # ts + react + redux + mobx (开发管理系统) # React 项目 # 校园管理系统 # 第二次上线 # 上线后台代码 (Node+express+mongodb) # 安装mongodb # 上线上传代码 把所有的localhost 改成 0.0.0.0 或者公网IP(不能改为内网IP) # cnpm i mongoose@5 -S # 前端项目代码上线部署 1. 把项目里面所有的 localhost 替换成 公网IP 2. router 设置成 mode:hash 3. 设置 打包相对路径 publicPath:"", 4. 测试文案 全部去掉 5. 打包 npm run build 6. 本地测试 7. 线上测试 8. 正式发布 # Nginx 静态服务器 (打开所有的文件 ) # /usr/local/nginx/html (目录的静态文件目录) # /usr/local/nginx/html = http://114.55.1.250 # 本地项目代码推送到 Nginx # React 上线 # "homepage": "./", # logo 和 title # nginx 实现反向代理 # 配置反向代理 location /gateway{ proxy_pass https://m.maizuo.com; } location /mobile{ proxy_pass https://www.welan.com; } location /yun/{ proxy_pass http://47.104.209.44:3333/; } location /api/{ proxy_pass http://114.55.1.250:2114/; } location /maoer/{ proxy_pass https://www.missevan.com/; } # 面试梳理 # Vue 1. 什么是vue 2. vue 和 react区别 3. Vue 的 核心是什么 ? 4. 如何理解声明式和编程式 的区别 5. Vue 常用的指令有哪些 (10条) 6. 如何理解Vue里面的数据响应式 7. 设计模式 mvvm mvc mvp 三者的区别 8. Vue 实例有哪些属性 方法 事件 9. Vue 里面 ref 的理解 10. 实例生命周期分为几个阶段 有哪几个生命周期钩子函数 11. 生命周期钩子函数存在的意义 12. Vue 对虚拟DOM 的理解 13. Vue 对Diff 算法的理解 14. 计算属性 computed 和 watch 的区别 15. 计算属性 computed 里面 get 和 set 的区别 16. watch 如何实现深度监听 17. v-deep 和 >>> 样式穿透 的区别 (scoped ) 18. v-if 和 v-show 的区别 19. v-for循环为什么需要给每一项绑定不同的Key 20. 原生 (深浅拷贝 深浅复制 深浅监听 ) 21. 可变对象和不可变对象的区别 22. 数组变异方法和数组非变异方法的区别 23. 数组常用方法有哪些 (every 和 some ) 24. Vue 事件修饰符有哪些 25. DOM0级事件和DOM2级事件的区别 26. 事件委托怎么解释 27. 如何自定义过滤器 (过滤器的作用) 28. v-model的原理(底层原理) Object.defineProperty 29. Vue 如何自定义指令 (指令的作用) 30. Vue 定义组件的规则 有哪些 31. 如何理解Vue 里面的组件 (封装 独立小巧可复用 ) 32. Vue.extend 的理解 33. Vue 里面的props 有什么作用 它如何校验 34. Vue 组件通信 (父改子) 35. Vue 组件通信 (子改父) 36. Vue 组件通信 (兄弟组件通信 bus 中间人 vuex) 37. Vue 如何动态切换组件 (v-if v-show component 路由) 38. keep-alive 的作用 39. Vue的插槽 有哪些 (匿名 具名 作用域) 40. Vue.use() 的作用 41. Vue.mixin 的作用 42. 路由的基本配置流程 43. 路由的作用是什么 44. 路由 hash 和 history 的区别 (如何去#号) 45. 路由 $router 和 $route 的区别 46. 路由如何传递参数 $route.params $route.query 47. 路由守卫有哪些? (全局守卫 路由独享 组件内部的) 48. 如何自定义实现Vue 的路由 (Vue路由的源代码) routes.forEach 49. 路由的 addRoutes 如何使用 (动态添加路由 权限管理) 50. Vue 如何监听路由切换 51. Vue 路由 路径URL 改变了,但是页面没有刷新 怎么解决 # Vue 面试题2 1. Vue render 函数理解 (渲染HTML模板) 2. Vuex 的原理 3. Vuex 4个辅助函数 及其对应的作用 4. Vuex 如何实现模块化 (modules) 5. Vuex 如何使用插件 (Vuex数据持久化 ) 6. Vue全家桶 (vue vue-router vuex vant/elementplus) 7. 模板化编程 如何理解模块化 8. export default 和 export 暴露区别 9. Vue created 和 mounted 生命周期钩子函数的区别 10. Vue.nextTick 的 作用 (延迟回调到下一次DOM更新之后执行) 11. Vue.fouceUpdate 的作用 (强制刷新组件 ) 12. Vue组件的data 为什么必须是一个 函数 (保护组件内部的变量) 13. Vue 项目的开发细节 (3条 封装全局的Axios 拦截器 自定义头部Head组件 跨域解决 异步数据null 解决方案 v-if和v-for同时使用 添加动画 ) 14. Vue 项目遇到的bug (bug 3条 适配 脚手架版本过高 ) 15. Vue 项目如何动态设定返回的业务逻辑 (goback 直接返回某一个页面) 16. Vue 箭头函数的它是如何保留this指向的 17. v-cloak 这个指令如何使用 18. keep-alive 新增了2个生命周期钩子函数 (activated deactivated) 19. Vue2.0 和 Vue3.0 的区别 20. Vue3.0 常用的生命周期钩子函数有哪些 onMounted onUpdated onUnmounted 21. Vue3.0 如何理解 setup (因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这使得 setup() 在和其它选项式 API 一起使用时可能会导致混淆) 22. Vue3.0 createApp 对这个函数理解? 23. Vue3.0 getCurrentInstance 使用和理解 以及 proxy 24. Vue项目的上线流程 (本地测试 打包(清除所有的localhost 和 console 设置打包的相对路径 设置打包环境变量) 打包测试 部署线上 线上测试 ) # 整理 React 面试题 (1.回顾课堂的笔记 2. 网站react面试题 3. react项目细节和项目难点和项目技术的语言 ) 1. react组件定义的规则 2. JSX (JavaScript XML )语法的特点 3. React 创建组件的方式有哪些 (React.Component + 纯函数 ) 4. React 定义Css 的方法 (ClassName + Style 行内样式) 5. 对JS 里面箭头函数的理解 6. React class类组件里面 super 理解 (super 当函数 ? super 当对象 ) 7. React 里面 props 的特点 (一次记住 传递数据 只可读不可改 遵循单向数据流 ) 8. React 里面 如何校验 props (Prop-Types) 9. React 里面 state 的特点 (只能组件内部定义 内部修改 修改state 会触发页面的二次渲染函数 ) 10. React 里面 setState 是一个同步函数还是一个异步函数 ? 11. React 里面 setState 执行会触发哪些逻辑 ? 12. React 里面如何 理解虚拟DOM (十分充分 ) 13. React 里面如何 理解DIff 算法 (十分充分 ) 14. React 里面 context 有什么作用 如何使用的 15. React 里面 三大属性 context props state 三者的区别 16. React 里面 父改子如何实现 17. React 里面 子改父如何实现 18. React 里面 兄弟组件通信如何实现 19. React class 类组件的 生命周期钩子函数有哪些 ? (组件载入 组件数据更新 组件销毁 componentDidMount shouldComponentUpdate componentWillUnmount) 20. React 17 新增了哪些生命周期钩子函数 (getDerivedStateFromProps getSnapshotBeforeUpdate) 21. React 18 有没有了解过 ? 22. react的事件机制原理 23. react 里面的ref 的理解 24. React 什么是受控组件 什么是非受控组件 # 第二部分 (架构 路由 ) 1. React-router-dom vv6 如何实现路由机制 (只能用纯函数) 2. React-router-dom 有哪些常用的组件 (BrowserRouter HashRouter Routes Route Outlet) 3. React-router-dom 路由5.0 和 6.0 区别 () 4. React-router-dom 如何去#号 5. React-router-dom 路由传参的方式有哪些 (query useLocation params useParams ) 6. React-router-dom useNavigate 和 useRoutes 的作用是什么 7. React 如何实现路由懒加载 (Suspense, lazy ) 8. react 和 vue 的区别 (站在React 回答) 9. redux 的原理 10. redux 的store 有哪三个常用的函数 (store.dispatch store.subscribe store.getState) 11. redux 的使用常见场景 12. redux 里面 action 和 reducers 的特点 14. redux 你用过哪些异步改造的中间件插件 (redux-thunk redux-promise) 15. redux 有自己尝试封装过 中间件插件 16. react-redux 和 redux的区别 17. 什么是高阶组件 (HOC) 和 高阶组件的意义 18. 什么是高阶函数 19. redux 的 缺点 20. 如何理解 react-redux 里面的输入逻辑(mapStateToProps)和输出逻辑 (mapDispatchToProps) 21. React-Redux 的原理 22. React-redux 的优缺点 23. React 里面对 immutable.js 的用法 (自己组织语言) 24. mobx 实现原理 (特点 单向数据流 集中式管理全局应用的状态) 25. mobx 有哪些组成部分 (action observable obverser computed ) 26. Connect原理 (高阶函数 把函数和方法混入到组件内部 ) 27. 基于React 实现性能优化 (方案 5条 ) 28. mobx observer 的原理 (观察者模式) 29. 如何理解mobx里面的proxy 数据 ? 30. mobx 和 redux 的区别 ? 31. class类组件和纯函数组件的区别 32. 你常用的React Hooks 有哪些 (useState useRef useEffect useCallback useMemo) 33. 如何自定义 react hooks (useSome) 34. React hooks 和 正常的 function 有什么区别 # 学长整理的面试题 1.性能优化：useMemo、useCallback、memo的用法 2.函数组件如何用ref获取到子组件状态和方法 3.useState是同步还是异步？ 4.讲一讲react得合成事件，和js事件机制异同 5.useState在改变数据时候react做了什么？ 6.react得fiber了解过嘛？ 7.useEffect替代了那些生命周期，和这几个生命周期在react中执行阶段得不同点 8.redux、mobx理解， 9.redux里如何实现异步，——我当时面阿里得题目 10.hooks是react什么版本出现的——某阿里面试官狗血面试题 11.判断数据类型方法。— 基本原生都问 # 原生面试题 1. Http 状态码 (100 200 300 400 500) 2. Http 和 https 的区别 3. 强缓存 和 弱缓存 和协商缓存的区别 4. ajax 的步骤 5. 线程和进程的区别 6. JS 单线程如何做到异步 7. 什么是微任务 什么是宏任务 8. TCP 和 UDP 的区别 9. TCP 的三次握手怎么解释 10. Promise 系列问题 (all 和 race async+await 几种状态 几个回调函数 ) 11. 闭包的原理 闭包的优缺点 12. 跨域如何产生 13. 解决跨域的方式有哪些 (反向代理 jsonp cors) 14. 什么是反向代理 反向代理的优缺点 15. jsonp 的原理 16. cors 的操作原理 17. 什么DOM 和 BOM 18. 什么是DOM0 级事件和 DOM2 级事件 19. 什么是优雅降价和渐进增强 20. 什么是防抖和节流 21. 手写防抖和节流代码 22. 手写数组去重和排序 23. 什么是本地对象 内置对象 宿主对象 24. 原型和原型链 25. __proto__和 prototype 的区别 26. 构造函数的特点 27. 设计模式 (单例模式 工厂模式 混合模式 发布订阅 观察者模式 ) 28. MVC 和 MVVM 的区别 29. 移动端 适配的原理 (REM 等比缩放) 30. 前端性能优化的方法有哪些 31. CDN 的了解 32. 空间复杂度和时间复杂度的区别 33. 图片懒加载的原理和代码实现 34. ts 的了解 35. 什么是敏捷开发 36. 微前端的了解 (乾坤) 37. git 的 流程和git 冲突怎么解决 38. 中台是什么 39. 实例化的时候执行了 new new发生哪些事情 40. 什么是重排和重绘 41. 什么是BFC 42. 正则表达式符号代表的意义 43. 异步和同步的区别 44. ES6d的新特性有哪些 (10条 let const 箭头函数 promise 解构 展开运算 ) 45. 前端加密的算法有哪些 (base64 ) 46. 什么是单点登录 47. token的使用方法 48. this 的指向 49. 什么是函数式编程 50. webpack + Node (模块化) # 准备自我介绍 (2-3分钟) 1. 保证最基本的语言流畅 不能结巴 不能一直停顿 2. 突出自我的亮点 (3年工作经验 精通 vue React 项目组长 teamleader 大大方方的吹 ) 3. 保证有吸引力 (让别人可以一下子记住你 特别说名字的 声音大速度慢 ) # 简历 发给班长