- 博客(21)
- 收藏
- 关注
RSS订阅原创 Promise
总结：Promise 是同步代码，Promise.then 是 微任务then 的执行时机是在前面函数执行完成并且 Promise 状态变更以后才会被添加到微任务队列中等待执行then 的 onFulfilled 不是函数，则无效then 的 onFulfilled 是函数，则除了 throw error 其他返回值都会转为 Promise 对象thenable 是微任务thenable 中如果没有执行 resolve()，则 thenable 后面如果还有 then，则不执行。
2024-05-17 00:07:45
850
原创 JavaScript 的设计缺陷
2、嵌套函数中的this不会继承外层函数的this值，this指向参考上一句“普通函数中的this指向window，严格模式下指向undefined”变量提升：使用var声明的变量会自动提升到开头位置，在声明之前使用变量不报错且结果为undefined。恒等运算符，不会自动转换数据类型，如果数据不一致，返回 false，如果一致，返回true。相等运算符，会自动转换数据类型再比较，很多时候，会得到比较诡异的结果。原因：js引擎编译阶段会进行如下编译。原因：js引擎编译阶段会进行如下编译。
2024-04-30 15:05:00
131
原创 作用域 scope 和作用域链 scopes
var 会变量提升；函数声明提升作用域就是变量的可用范围(scope)。目的是防止不同范围的变量之间互相干扰。作用域有 词法作用域、全局作用域、函数作用域、块作用域（ES6）全局变量（可重复使用，会污染）和局部变量（不可重复使用，不会污染）局部变量：1. 函数内var出来的 2. 函数的形参变量JavaScript 作用域链是由词法作用域决定的。如果内外层作用域链存在相同命名的变量，内层作用域的变量值修改不会影响外层相同命名变量的值。JS 中，作用域和作用域链都是对象结构。
2024-04-29 15:00:53
949
1
原创 vue-router
这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。是SPA（单页应用）的路径管理器，使得用户在浏览器中切换页面时，不需要重新加载整个页面，而只是更新部分内容，从而提供更流畅的用户体验。可以将每个路由对应的组件打包成一个单独的文件，只有在该路由被访问时才会加载对应的文件。只有当用户访问到（需要）某个路由时，相关的组件才会被加载，而不是一开始就加载所有的路由组件。标签，用于创建到指定路由的超链接组件。
2024-04-28 16:47:38
988
原创 Vue 鉴权
表格：后端没有返回该字段，则表示无该字段权限，表格不进行列渲染。静态路由：可直接访问，无需判断权限。流程图存放：wps-云文档。动态路由（权限路由）
2024-04-28 16:23:32
182
原创 图片懒加载
参考：https://blog.csdn.net/weixin_43913643/article/details/132975686参考：https://blog.csdn.net/qq_44947815/article/details/125286969图片懒加载是前端性能优化中的一项重要技术。它的核心思想是在页面加载时，只显示用户视口内的图片，而视口外的图片则等到它们即将进入视口时再进行加载。这样做可以显著提升页面的初始化渲染速度和用户体验。总的来说，图片懒加载不仅能够提升页面加载速度，还能够减少服务器
2024-04-28 16:12:59
640
转载 npm 发布一个函数，支持 Vue3 hook 和 directive 使用
umd.js：支持 Common.js，也就是Node.js 规范。当我们 require 的时候，就会去找 main 对应的文件 dom-resize-vivian.umd.js。当我们 import 的时候，就会去找 module 对应的文件 dom-resize-vivian.mjs。配置 package.json： 注意 main 和 module 的文件要对应 dist 打包的结果文件。注意：这个插件是专门为 Vue 提供的，所以没有必要安装插件的时候再去安装Vue。version： 版本号。
2024-04-28 16:06:41
8
原创 响应式：computed & watch
假设用户调触发watch回调执行，且回调内有个请求，但是请求的回调比较慢，在这个期间，用户再次触发watch回调执行。在这种情况下，就可以通过 onCleanUp 来清除副作用，也就是在 onCleanup 内取消之前的请求。语句创建：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。，计算属性是基于它们的反应依赖关系缓存的，计算属性只在相关响应式依赖发生改变时它们才会重新求值。立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
2024-04-28 11:28:29
1477
原创 Vue3 生命周期
注意：setup语法糖中没有 beforeCreate、created 钩子函数，且其他钩子函数多了on前缀。使用场景：销毁定时器、组件监听、事件监听等等会造成内存泄漏的东西。，这给了用户在不同阶段添加自己的代码的机会。同时在这个过程中也会运行一些叫做。
2024-04-28 11:15:24
336
3
原创 响应式：声明响应式数据 ref &reactive & readonly
由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。，其行为就和普通对象一样。不同的是，Vue 能够拦截对响应式对象所有属性的访问和修改，以便进行依赖追踪和触发更新。可以持有任何类型的值，包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构，比如。接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。只读代理是深层的：对任何嵌套属性的访问都将是只读的。如果将一个新的 ref 赋值给一个关联了已有 ref 的属性，那么它会。
2024-04-28 11:04:51
836
3
原创 组件化：组件优化
如果提供了一个加载组件，它将在内部组件加载时先行显示。在加载组件显示之前有一个默认的 200ms 延迟——这是因为在网络状况较好时，加载完成得很快，加载组件和最终组件之间的替换太快可能产生闪烁，反而影响用户感受。如果提供了一个报错组件，则它会在加载器函数返回的 Promise 抛错时被渲染。你还可以指定一个超时时间，在请求耗时超过指定时间时也会渲染报错组件。注意：被 keep-alive 组件的生命周期 onMounted 和 onUnmounted 只会被调用一次。内置组件将组件包裹起来。
2024-04-28 09:59:20
369
3
原创 组件化：组件扩展
缺点：如果混入多个，会导致混入里面的数据来源不明。容易导致变量/方法命名冲突，这样只能修改当前组件内冲突的命名，不可能修改mixin混入里的命名，因为不确定会不会影响其他已使用混入的组件。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。Vue3 引入 Composition API，利用独立出来的响应式模块可以很方便的编写独立逻辑并提供响应式的数据，然后在setup选项中组合使用。当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。
2024-04-28 09:41:08
694
1
原创 组件化：组件通信
组件可以有以下几种关系：A-B、B-C、B-D 都是父子关系C-D 是兄弟关系A-C、A-D 是隔代关系根据组件之间关系讨论组件通信最为清晰有效props： 父组件通过props向下传递数据给子组件$emit：子组件通过 emit 派发事件v-model语法糖（Vue2 和 Vue3 有区别）.sync语法糖（Vue3移除）非 prop 特性：$attrs（非兼容 Vue2）$listenersVue3 移除ref$parent$children。
2024-04-26 18:27:26
920
原创 组件化：组件模板
Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。这个特殊的 attribute 出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容。这些可以用于模板特别大的 demo 或极小型的应用，但是其它情况下请避免使用，因为这会将模板和该组件的其它定义分离开。内联模板需要定义在 Vue 所属的 DOM 元素内。
2024-04-26 15:16:36
253
原创 组件化：组件注册（组件定义）
HTML attribute 名不区分大小写，因此浏览器将所有大写字符解释为小写。注意：直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。会被作为无效的内容提升到外部，并导致最终渲染结果出错。，对于哪些元素可以出现在其内部是有严格限制的。这会导致我们使用这些有约束条件的元素时遇到一些问题。全局注册的组件可以在应用中的任何组件的模板中使用。，只能出现在其它某些特定的元素内部。语法糖中引入局部组件，无需注册。选项式写法与 Vue2 一致。有些 HTML 元素，诸如。
2024-04-26 15:05:26
616
原创 谈一谈对 vue 组件化的理解？
组件转换成 VueComponent 实例，构造函数通过方式把它 new 出来变成实例，实例里面有 render 函数，render 函数在合适的时间里，将模板转换成虚拟 DOM，虚拟 DOM 通过更新转换成真实的 DOM。页面组件（路由组件）：组织应用各部分独立内容，需要时在不同页面组件间切换，一般不存在复用性（必须经过路由的组件，形成页面与页面的连接）。特点：组件是基于配置的，平常编写的是组件配置，而不是组件。可复用：组件是可复用的组件实例，所以它们与根实例接收相同的选项，例如。
2024-04-26 14:44:21
748
原创 Web前端编写高质量代码-高质量的HTML
Web前端编写高质量代码-高质量的HTML标签（空格分隔）： Web前端文章目录Web前端编写高质量代码-高质量的HTML@[toc]标签的语义：div、spanh1-h6：表单：表格：为什么要使用语义化标签？如何确定你的标签是否语义良好？标签的语义：标签语义对照表 标签名 英文全拼 中文翻译 div division 分隔 span span
2020-09-04 15:55:26
206
原创 Web前端编写高质量代码
Web前端编写高质量代码标签（空格分隔）： Web前端文章目录Web前端编写高质量代码@[toc]web前端如何才能做的更好？原生JavaScript、JavaScript类库和Ajax的区别：AjaxJavaScript类库又是什么呢？CSS布局网站重构为什么要重构网站重构的本质是构建一个前端灵活的MVC框架：有哪些技术因素会导致应用难以维护？符合Web标准 —— 结构、样式和行为分离高质量的Web前端代码应该满足哪些条件（一个符合标准的网页）为什么网页的维护工作会变得越来越难？打造高质量代码 ——
2020-09-04 15:37:38
710
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人