- 博客(60)
- 收藏
- 关注
RSS订阅原创 017-$route、$router
route 对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。$router 是路由实例对象，是router构造方法的实例：new Router({})。
2024-03-10 15:00:32
257
原创 014-computed、watch
💡Tips：Vue 中，data、computed、watch、methods 各有其使用场景，使用时需要如何区别呢？
2024-03-10 14:33:56
439
原创 013-路由懒加载
文件中包含了所有的用户组件的js以及css代码，但用户可能根本不会浏览到某些页面，也就是说根本不需要渲染某些组件，所以vue-router 提供了一种路由懒加载机制，就是当某个路由规则匹配时，才会去加载下载并加载某个组件，此时可以提升首页的渲染速度。我们是将每个组件都分别打包了，每个组件都变成单独文件进行请求，并不是最优解，因为网络时延的存在，应将组件合理分包，进行请求，形成最优解。对比原来的引入方式，就能发现不同点：现在的 Login 是个函数，当路由规则匹配上，就会执行这个函数，才去加载此组件。
2024-03-10 14:24:21
400
原创 012-路由模式
但是history也是有缺点的，不怕前进后退跳转，就怕刷新（如果后端没有准备的话），因为刷新是实实在在地去请求服务器了，选择history模式，后端需要配置如果找不到页面，默认跳转index.html，前端处理404页面等特殊情况。
2024-03-10 14:11:50
424
原创 011-keep-alive详解
keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。原理： 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中，在 render（页面渲染） 时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。用于保留组件状态或避免重新渲染，包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
2024-03-10 14:02:21
1018
原创 010-$nextTick
Vue 实现响应式，在 data 更新后，一定时间内，没有继续操作DOM，然后会触发浏览器渲染引擎去更新DOM，更新DOM也是需要时间的，所以。data 更新引起的 DOM更新并不是实时的。// 需要等DOM更新完成后调用init方法。Tips：显示组件，并调用组件的初始化方法。// 更新该变量，会引起 DOM 更新。
2024-03-10 11:36:03
307
原创 008-slot插槽
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。
2024-03-08 15:53:06
919
原创 007-双向绑定原理
双向绑定原理双向绑定思考：一句话描述原理DocuemntFragment（碎片化文档）Object.defineProperty（数据劫持）发布订阅者模式Vue 双向绑定图示Vue 双向绑定完整实现代码双向绑定vue中 data定义的数据会添加双向绑定的功能，即数据更新后，页面内容会同步更新；页面内容更新后，数据也会同步更新。思考：初始化，如何将 data 中的数据更新到DOM模板中？ - 碎片化文档页面更新，如何更新数据？ - input事件监听数据变了更新页面，那如何知道数据变了呢？ -
2024-03-08 15:42:10
694
原创 006-v-model原理
由 属性绑定(v-bind:value=“searchText”) 配合 input事件监听(v-on:input=“searchText = event.target.value”) 实现。应用在组件上由 props: {value: xxx } ，this.$emit(‘input’, xxx ) 完成。
2024-03-08 15:34:31
683
原创 010-内存泄露
系统进程不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。当内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。echarts 组件会自带定时器。
2024-03-07 21:40:17
262
原创 008-跨域
同源策略：协议相同、域名相同、端口号相同 的两个页面被认为是同源。由一个页面的 js 访问不同源的页面内容，被认为是跨域，跨域是不安全的，会被浏览器拦截掉。
2024-03-07 21:31:15
298
原创 007-常见HTTP状态码
常见HTTP状态码常见状态码说明常见状态码常见状态码说明状态码说明1xx（informational）信息性状态码，表示正在处理2xx（success）成功状态码，表示请求正常3xx（redirection）重定向状态码，请求重定向等4xx（client error）客户端错误，服务器无法处理5xx（server error）服务器错误，服务器内部处理错误常见状态码状态码说明200表示OK，正常返回信息301表示
2024-03-07 17:54:36
113
原创 006-浏览器输入域名到返回
Tips：以上两次握手之后，对于客户端而言：已经明确了我既能给服务端成功发消息，也能成功收到服务端的响应。但是对于服务端而言：两次握手是不够的，因为到目前为止，服务端只知道一件事，客户端发给我的消息我能收到，但是我响应给客户端的消息，客户端能不能收到我是不知道的。所以，还需要进行第三次握手。Tips：因为浏览器不能直接通过域名找到对应的服务器ip地址，所以需要dns解析，查到对应的ip地址进行访问。Tips：三次握手的机制是为了保证能建立一个安全可靠的连接。
2024-03-07 17:47:56
372
原创 005-事件捕获、冒泡&事件委托
当在页面触发 son 元素的点击事件时，因为事件冒泡，会依次打印 son click、parent click。Tips：e.preventDefault() 或 return false 会阻止默认行为。当在页面触发 son 元素的点击事件时，只会打印 son click。// 将 li 的点击事件注册到 ul 上。
2024-03-07 17:30:43
606
原创 004-执行上下文&事件循环
💡Tips：用于说明 浏览器 对 JavaScript 执行顺序，涉及知识点包含：this指向、变量声明提升、宏任务、微任务等。
2024-03-07 16:59:12
216
原创 003-重绘&回流
浏览器渲染流程是先解析获取到的HTML，生成DOM树，解析CSS，生成CSSOM树，将DOM树和CSSOM树进行结合，生成渲染树；浏览器渲染流程是先解析获取到的HTML，生成DOM树，解析CSS，生成CSSOM树，将DOM树和CSSOM树进行结合，生成渲染树；在渲染树中的一部分（或者全部）因为元素的规模尺寸、布局 、显隐等改变而需要重新构建，这就称为回流。在渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，不影响布局，就称为重绘。回流必将引起重绘，而重绘不一定会引起回流。
2024-03-07 16:20:42
210
原创 011-闭包
闭包应用：使用闭包主要是为了设计私有变量与方法，避免变量污染，防抖与节流。闭包缺点：常驻内存，增大内存使用量，使用不当易造成内存泄漏，影响性能。闭包：就是能够读取其他函数内部变量的函数。
2024-03-05 15:05:43
223
原创 010-原型链
原型链：javascript的继承机制，是指获取JavaScript对象的属性会顺着其_proto_的指向寻找，直至找到Object.prototype上。将属性挂载到实例对象上，将公共方法挂载到构造函数的原型上，减少每次 new 时，都需要创建方法，多消耗堆内存。Tips：构造函数 Fn， p 为 new Fn 的实例对象，p 有一个属性。指向了 Fn.prototype，形成原型链。
2024-03-05 15:01:19
356
原创 009-lodash
lodash 是一个插件，对 JavaScript 中操作 数组、字符串、对象 的方法做了优化，可以避免空指针现象，例如：get、set 方法；提供了一些常用的工具函数，例如：防抖、节流、深拷贝 等。Tips：lodash 是一个 npm 包，可以通过 npm i --save lodash 引入。
2024-03-05 11:45:27
379
原创 008-TypeScript
TypeScript 是 JS 的超集，文件已 .ts 后缀结尾，在 JS 的基础上，添加了 强类型，类，接口，泛型，枚举 等，让我们编写代码更严谨，代码低级错误能在编写时被检查出来，代码更优雅。TS 官网TypeScript中文网。
2024-03-05 11:14:29
248
原创 006-定时器&动画
定时器在使用完成后，需要及时清理，清理不当，会造成浏览器内存泄漏，严重可影响页面性能，卡顿等问题。类似 setInterval，执行动画，无法指定执行时间，按照浏览器最优时间执行。
2024-03-05 10:58:30
197
原创 004-深拷贝&浅拷贝
浅拷贝只是复制了对象的引用地址，两个对象指向同一个内存地址，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝。Tips：对象拷贝时，如果 value 存在 引用类型，不想让拷贝对象的修改影响到原对象，需采用深拷贝。引用类型：复杂数据类型，在存储是，变量中存储的仅仅是地址（引用），因此叫做引用数据类型。值类型：简单数据类型，基本数据类型，在存储时，变量中存储的是值本身，因此叫做值类型。深拷贝将对象及值复制过来，两个对象修改其中任意的值另一个值不会改变，这就是深拷贝。Tips：lodash 中的方法。
2024-03-05 10:19:42
363
原创 003-ES6常用语法
Tips：不可重复声明，const不可改，块级作用域限制。Tips：对 promise 的优化写法，更清晰。Tips：解决回调地狱，异步请求。
2024-03-05 10:09:23
394
原创 002-数组&字符串常用方法
Tips：数组及对象的合并，concat 返回新数组，不改变原数组，Object.assign 给原对象合并属性。Tips：对数组的首尾进行增删，push尾增，pop尾删，unshift首增，shift首删，会改变原数组。Tips：数组排序，参数为排序规则函数，返回值大于0，输出a，小于0，输出b，会改变原数组。Tips：字符串 或 数组的截取方法，返回新值，不改变原字符串 或 数组。Tips：数组循环遍历，不改变原数组，返回新数组。Tips：数组过滤查找，不改变原数组，返回新数组。
2024-03-04 21:12:09
620
原创 001-JS数据类型及判断
Tips：null 通过等于自身判断，其他基本类型通过 typeof 判断，引用类型通过 Object.prototype.toString 判断。6种基本类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol；JavaScript 的假值都有：0、-0、0.0、null、“”、false、undefined、NaN。引用数据类型：对象(Object)、数组(Array)；Tips：假值就是布尔转换后为false的值。
2024-03-04 20:52:58
179
原创 002-SVG
SVG1、SVG 概念2、基础案例3、SVG 动画4、扩展1、SVG 概念svg 是指可伸缩矢量图形, 图像在放大或改变尺寸的情况下其图形质量不会有损失。 是万维网联盟的标准。 作为标签可直接 嵌入到 html 中。2、基础案例💡 Tips：实现 矩形、圆形、椭圆、直线、多边形、路径、文本、渐变 等基础图形<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" />
2024-03-04 15:31:48
879
原创 001-CANVAS
CANVAS1、CANVAS 概念2、基础案例3、CANVAS 实现时钟4、扩展1、CANVAS 概念 <canvas> 是 HTML5 新增的，一个可以使用 js 在其中绘制图像的 HTML 元素。它可以用来制作动画。Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。2、基础案例💡 Tips：实现 矩形、线段、三角形、圆弧、贝塞尔曲线、文本 等基础图形<!DOCTYPE html><html lang="en"> <h
2024-03-04 15:19:55
939
原创 009-CSS-Less、Scss、Sass
在实际工作中，CSS 编写更多的采用 CSS 扩展语言，像 Scss、Less 等，因其学习成本低，实用性高，被广泛应用。
2024-03-02 14:32:28
452
原创 006-CSS-常见问题汇总
Tips：ul > li 元素布局时，li 元素行内块，设置 li 25% 宽度，但 4 个 li 放不下问题；Tips：BFC 是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用；解决方案：给父元素设置 margin 保证外边距，给父元素设置 padding 保证内边距。对父元素设置 font-size: 0;应用：外边距合并问题、子元素浮动，父盒子高度塌陷问题、清除浮动、两栏布局；解决方案：尽量只给一个元素设置 margin。
2024-03-02 14:08:31
461
原创 005-CSS-兼容&适配
前端兼容问题主要包含：不同浏览器兼容、Web端不同分辨率适配、H5移动端适配：不同浏览器兼容主要针对的是 IE 浏览器，因当前 IE 浏览器已下线，暂不讨论；Web端常用分辨率主要适配 1366-1920 屏幕，主要采用 媒体查询 实现，定制化可使用 window.onsize 监听；H5移动端适配，采用物理像素点，跟 px 之间的对应关系，做动态适配；
2024-03-01 14:51:30
514
原创 004-CSS-左右经典布局
Tips：父盒子font-size: 0，子盒子行内块，左侧子盒子100px，右侧子盒子 calc(100% - 100px)Tips：左侧子盒子浮动，右侧盒子 overflow:hidden;Tips：父盒子相对定位，左侧子盒子绝对定位，右侧子盒子margin-left。Tips：父盒子相对定位，padding-left，左侧子盒子绝对定位。Tips：左侧子盒子宽度固定，右侧子盒子 flex: 1。
2024-03-01 14:33:12
379
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人