05 2022 档案
摘要：// 数据循环的 // 数据循环的forEach let arr = [ { name : 'wuyut', age:18, }, { name : 'yzw', age:20, } ] const list = [] arr.forEach((item,index)=>{ list.push( <
阅读全文
摘要：全局安装 react 脚手架 : npm i create-react-app -g 安装项目 create-react-app 项目名 JSX语法 : 1.JSX可以看做是JS语言的扩展,它既不是一个字符串也不是一个HTML 2.它具备了JS所有的功能,同时还可以转为HTML在界面上进行展示 一.
阅读全文
摘要：Suspense 等待异步组件时渲染一些额外内容，让应用有更好的用户体验 使用步骤： 异步引入组件 import {defineAsyncComponent} from 'vue' const Child = defineAsyncComponent(()=>import('./components
阅读全文
摘要：1.setup setup的两个传值 : 父传子 , 子传父 , 父后代 2.ref函数 isRef: 检查一个值是否为一个 ref 对象 vue2和vue3响应式的原理(数据拦截) 3.reactive函数 isReactive: 检查一个对象是否是由 reactive 创建的响应式代理 ref与
阅读全文
摘要：Teleport 什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。 <teleport to="移动位置"> <div v-if="isShow" class="mask"> <div class="dialog"> <h3>我是一个弹窗</h
阅读全文
摘要：customRef [ 实现防抖 ] 作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。 案例 : <template> <div> <input type="text" v-model="num"> <br><br><br> {{num}} </div> </template
阅读全文
摘要：toRaw： 作用：将一个由reactive生成的响应式对象转为普通对象。[ ref的不行哦 ] 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。 markRaw： 作用：标记一个对象，使其永远不会再成为响应式对象。 应用场景: 有些值不应被设置为响应式的，例
阅读全文
摘要：readonly: 让一个响应式数据变为只读的（深只读）。 shallowReadonly：让一个响应式数据变为只读的（浅只读）。 应用场景: 不希望数据被修改时。 <template> <div> <h1>readonly : </h1> 姓名 : {{name}} <br> 薪资 : {{j.b
阅读全文
摘要：shallowReactive：只处理对象最外层属性的响应式（浅响应式）。 shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。 什么时候使用? 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 > shallowReactive。 如果有一个对象数据，后续功能不会
阅读全文
摘要：作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。 语法：const name = toRef(person,'name') 应用: 要将响应式对象中的某个属性单独提供给外部使用时。 扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs
阅读全文
摘要：什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。 类似于vue2.x中的mixin。 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。 正常的模式 : <template> <div> 得到鼠标坐标 x : {{pagex}
阅读全文
摘要：生命周期 Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名： beforeDestroy改名为 beforeUnmount destroyed改名为 unmounted Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下
阅读全文
摘要：vue2和vue3响应式的原理(数据拦截) vue2.x的响应式 实现原理： 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。 Object.definePrope
阅读全文
摘要：setup执行的时机 在beforeCreate之前执行一次，this是undefined。 setup的参数 props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。 context：上下文对象 attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性,
阅读全文
摘要：watchEffect函数 watch的套路是：既要指明监视的属性，也要指明监视的回调。 watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。 watchEffect有点像computed： 但computed注重的计算出来的值（回调函数的返回值），所以
阅读全文
摘要：监视属性watch 与Vue2.x中watch配置功能一致 两个小“坑”： 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。 监视reactive定义的响应式数据中某个属性时：deep配置有效。 <template> <div class
阅读全文
摘要：计算属性 与Vue2.x中computed配置功能一致 写法案例 : <template> <div class="about"> <h1>计算属性</h1> 姓 : <input type="text" v-model="firstName"> <br> 名 : <input type="text
阅读全文
摘要：reactive函数 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数） 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象） reactive定义的响应式数据是“深层次的”。 内部基于 E
阅读全文
摘要：ref 作用: 定义一个响应式的数据 语法: const xxx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。 JS中操作数据： xxx.value 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div> 备
阅读全文
摘要：setup 理解：Vue3.0中一个新的配置项，值为一个函数。 setup是所有Composition API（组合API）“ 表演的舞台 ”。 组件中所用到的：数据、方法等等，均要配置在setup中。 setup函数的两种返回值： 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（
阅读全文
摘要：一.vuex和pinia的区别 支持选项式api和组合式api写法 pinia没有mutations，只有：state、getters、actions pinia分模块不需要modules（之前vuex分模块需要modules） TypeScript支持很好 自动化代码拆分 pinia体积更小（性能
阅读全文
摘要：双向绑定原理 1. 初始化的时候，把所有视图层的数据添加到对象中 2. 劫持数据发生的改变【哪个数据添加了v-model】 3. 劫持的数据去通知dep（订阅者）：具体知道哪个数据要改变 4. 订阅者通知waterch对象，触发update方法来更新视图层 补充： data是响应式的，因为data的
阅读全文
摘要：uniapp onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参 onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 onReady 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 1.Scrol
阅读全文
摘要：https+安全+seo 一.http和https 正常一个网页是http，可以配置成https，而https就是一个证书（就是一个文件）。 1. https比http 更安全 2. 口端不同http:80 、https:443 3. https 防劫持 二.web安全 1. XSS攻击 input
阅读全文
摘要：webpack Webpack是一个模块打包工具,主要有5个核心概念 1.Entry 入口 指示 webpack 从哪个文件开始构建/打包 2.Output 出口 指示 webpack 打包完成的文件输出哪里去 3.Loader 加载器 webpack 自身能力有限，只能处理 js/json 文件，
阅读全文
摘要：跨域问题 1. vue中可以设置代理，来解决跨域. 问题1:第一次打包，报错，请求不到 解决：在vue.config.js中设置相对路径 publicPath:’./’ 问题2:第二次打包，页面显示不出来图片 解决：如果后端不做重定向的话，那么要路由改为hash 问题3:第三次打包，报错，因为代理只
阅读全文
摘要：性能优化 性能优化最终目的：提升用户体验 项目优化阶段： 开发阶段 生产阶段：不断优化的过程 借助工具测试 npm install -g lighthouse lighthouse https://www.xuexiluxian.cn/ （https://blog.csdn.net/qq_29187
阅读全文
摘要：input在底部的时候,键盘遮挡住 方法:可视区的高度,文档高>可视区域的高,做定位 如何关闭ios键盘的首字母自动大写 解决：<input autocapitalize='off'> 禁止ios&安卓长按保存（下载）图片 解决： img{ -webkit-touch-callout:none; }
阅读全文
摘要：[]元素被触摸时产生的半透明遮罩怎么去掉 （a、button、input、textarea） 在移动端修改难看的点击的高亮效果，iOS和安卓下都有效 解决：-webkit-tap-highlight-color:rgba(0,0,0,0); a,input,button,textarea{ -web
阅读全文
摘要：touch事件有穿透的问题(都知道) 经常出现在蒙版(蒙版下还有链接跳转),触摸按下(蒙版下的链接),那么会直接消失蒙版,还会跳转!!!这就是touch穿透事件 解决：引入faskclick.js if ('addEventListener' in document) { document.addE
阅读全文
摘要：1. click事件在移动端有300ms延迟(都知道) 因为在移动端点两下是放大,缩小;所以才会有300毫秒; 解决： <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
阅读全文
摘要：谈谈防抖节流 防抖：多次事件触发，只执行一次 搜索框 当用户在input标签里疯狂输入值，而此同时我们只打算取最后一次输入的值 节流：事件触发，固定时间内执行一次 向下滑动请求后台接口，且滑动十分频繁。
阅读全文
摘要：深拷贝和浅拷贝 共同点：复制 1. 浅拷贝：复制引用，而不是真正的复制了值。 某一个改变互相影响 var arr1 = ['a','b'] var arr2 = arr1; Object.assign() 2. 深拷贝：复制不是引用，复制了真正的值。 改变互相不影响 JSON.parse和自己封装
阅读全文
摘要：localstorage、sessionstorage、cookie的区别 共同点： localstorage、sessionstorage、cookie：存储在客户端 seesion ：服务端 功能：localstorage、sessionstorage、cookie：一样【本地的存储】 不同的：
阅读全文
摘要：继承 ES6继承 class类 class Parent{ constructor(){ this.name='父亲' } Run(){ Console.log(这里是 Parent.prototype.run(){ }) } } class Children extends Parent{ con
阅读全文
摘要：Promise 1. 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。 2. Promise是来解决异步编程的（ 代码如果一直嵌套【死亡地狱】，易读性很差） Promise.resolve(‘foo’).then(res=>{ Console.log(
阅读全文
摘要：闭包 无意间环境的共享 【不是作者设计的】 1. 什么是闭包或闭包是什么情况 2个函数，这俩函数作用域是链接， 内部函数可以访问外部函数的局部变量。 2.产生的条件 函数嵌套,内部函数引用外部函数的局部变量,执行外部函数 内部函数引用全局变量,不会产生闭包 3. 闭包的优点 优点：外部函数的局部变量
阅读全文
摘要：谈谈this的指向 谁调用指向谁,只有函数在调用的时候才能确定this的指向 普通函数 直接调用,指向window 对象调用,指向对像 Call/apply调用,指向传入的第一个参数 New调用,指向生成实例对象 回调函数 定时器回调函数,指向window DOM事件回调函数,,指向绑定事件的DOM
阅读全文
摘要：十二.箭头函数和普通函数有什么区别？ 1. this指向问题 普通函数的this是在调用时决定的。 箭头函数中的this是在定义时决定的，定义该箭头函数，函数中的this，指向于箭头函数的所在环境。 注意:箭头函数的this是永远不能改变的。 2. 箭头函数不能new，普通函数可以new 3. 箭头
阅读全文
摘要：作用域 1. 作用域：先在本层找，本层找不到向外一层查找 【作用域链】 注意let 和 const 有自身作用域 2. 注意：变量提升【悬挂声明】 let和const没有提升 3. 优先级 声明变量 > 函数的声明 > 参数 > 变量提升 4. js没有块级作用域（除了函数） 注意let 和 con
阅读全文
摘要：说一下call、apply、bind区别 共同点：都是来改变this指向 语法：函数.call 、 函数.apply 、 函数.bind 不同点： 1. call和apply是立即执行的。 2. bind返回的是一个函数体，新函数的 this 才会变化，原函数不变,需要()执行函数。 3. appl
阅读全文
摘要：var、let、const区别 相同点：都是来声明变量|常量 不同点： 1. 变量提升 var 有变量提升。 let、const没有变量提升。 2. 自身(变量)作用域 var“没有”自身作用域 let、const“有”自身作用域 3. 声明同一个变量 var 可以声明多个同一个变量名 let a
阅读全文
摘要：对象的key永远是字符串类型 var m = [1,2,3]; var obj = { a:1, b:2, c:3, '张三':4 } obj[m] = 12313213213213211; //对象的key永远是字符串类型 for( var k in obj ){ console.log(type
阅读全文
摘要：原型链 【必须会】 1. 原型是干什么的？ 解决new不能共享对象的属性或者方法==》原型可以共享属性和方法 2. 谁有原型 每一个函数都有prototype 【系统内置】 每一个对象都有__proto__ 3. 构造函数和构造出来的new对象有什么关系 new 对象是构造函数实例出来的，构造函数的
阅读全文
摘要：new操作符具体做了什么 1. 会创建一个新对象 ： 返回对象 2. 原型赋值 3. 改变this指向 4. 判断构造函数最后返回的是什么类型 （如果是基本类型则无视，如果是引用类型则返回该对象，new不起作用了） 例子: function Fun(){ Console.log(this) =指向w
阅读全文
摘要：5.延迟加载JS有哪些方式？async、defer[外部链接用的] defer 是html和script同时下载,而且等html下载完,再执行script ; 两个script都加defer,那么defer是按照顺序执行 场景:如果文件存在依赖关系就用defer [这个可以提高性能的] 比如:jqu
阅读全文
摘要：微任务和宏任务 1. js是单线程语言,因为js是做用户交互;如果是多线程的话,那么一个线程添加,一个线程删除,就不知道执行哪一个了 2. js的执行流程:先同步==>后异步(你不能确定它什么时候执行的就是异步) 异步 : ajax请求 , 事件类, 定时器, promise.then 3. 异步又
阅读全文
摘要：JS数据类型 Js是运行在浏览器端的 基础类型:String Number Boolean Null Undefined Symbol(es6) Bigint(谷歌浏览器) 引用类型:Object null和undefined的区别 作者先设计出来的null,后设计的undefined JavaSc
阅读全文
摘要：什么是CSS reset？ reset.css 》 重置css样式的 非要说他问题：体积了一点点点 normalize.css 是现在用的比较多的，但是和reset有区别。 是干什么：为了增强跨浏览器渲染的一致性（一定程度上），维护的一个CSS 重置样式库。 CSS优先级算法如何计算？ Import
阅读全文
摘要：怎么让Chrome支持小于12px 的文字？ div{ font-size:10px; } p{ display: inline-block; transform: scale(.1); 得到的就是1px } rem和em有什么样区别 rem针对于根(html)的font-size em针对于父元素
阅读全文
摘要：盒子不给宽度和高度，如何水平垂直居中 1.弹性盒 》 demo1文件 2.transform 》 demo2文件 3.网格布局 》 demo3文件(不用记住)
阅读全文
摘要：display: none;与visibility: hidden;的区别 display: none;与visibility: hidden 功能：隐藏元素 区别： 1. display: none不占位置，visibility: hidden占位置。 原理： display: none第一次不绘
阅读全文
摘要：CSS的盒子模型 标准盒子模型、IE盒子模型 两者的区别在于content的不同，IE盒模型的content包括border、padding BFC 块级格式化上下文 ==》如果拥有BFC的特性就会导致内容元素再怎么样，都不会影响外面元素。 触发BFC： 1.float的值不为none 2.over
阅读全文
摘要：查询某某的版本 : cnpm view less-loader versions vue的执行顺序 : 先index.html 再main.js 最后App.vue 1.vue的介绍 2.插值语法 3.指令语法 功能：用于解析标签 备注：Vue中有很多的指令，且形式都是：v-???? 1).v-bi
阅读全文
摘要：1.概念 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 2.何时使用？ 多个组件需要共享数据时 3.搭建vuex环境 创建文件：src/store/index.js //引入Vue
阅读全文
摘要：作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。 写法： 准备好样式： 元素进入的样式： v-enter：进入的起点 v-enter-active：进入过程中 v-enter-to：进入的终点 元素离开的样式： v-leave：离开的起点 v-leave-active：离开过
阅读全文
摘要：路由 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。 前端路由：key是路径，value是组件。 1.基本使用 安装vue-router，命令：npm i vue-router 应用插件：Vue.use(VueRouter) 编
阅读全文
摘要：作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 > 子组件 。 分类：默认插槽、具名插槽、作用域插槽 使用方式： 默认插槽： 父组件中： <Category> <div>html结构1</div> </Category> 子组件中： <template>
阅读全文
摘要：在vue.config.js中添加如下配置： devServer:{ proxy:"http://localhost:5000" } 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 工作方式：若按照上述配置代理，当请求了前端不
阅读全文
摘要：1. 先下载 cnpm i pubsub-js 发布消息 : 传递数据的 <template> <div class="student"> <h2>学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> <button @click="sendStudentName">把学
阅读全文
摘要：全局事件总线 : 任意组件间通信 一种组件间通信的方式，适用于任意组件间通信。 安装全局事件总线： new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ......}) 使用事
阅读全文
摘要：自定义事件适用于：子组件 > 父组件 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。 绑定自定义事件： 第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/> 第二种
阅读全文
摘要：一. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样） 二. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。 三. 相关API： 1. xxxxxStorage.setItem('key', 'value');
阅读全文
