- 博客(26)
- 收藏
- 关注
RSS订阅原创 输入npm run dev报错“ensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization“解决方法之一
【代码】输入npm run dev报错“ensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization“解决方法之一。
2023-07-27 14:53:37
934
原创 常见面试题（闭包，深拷贝，数组扁平化，数组去重）--持续更新
引用数据类型，拷贝的是它的地址，修改后原始值也会被修改。：基础数据类型，创建一个空对象，存放原始数据的值，修改不会影响原始值。：内存中开辟一个空间，修改都不会影响原始数据。
2023-07-21 11:14:32
161
原创 字面量和联合类型
字面量是一中具体值的语法表示法，他直接表示某个特定的值，而非变量或表达式。常见的字面量类型包括字符串、数字、布尔值等。通过使用字面量，可以直接指定某个特定的值，而无需使用变量或表达式进行计算。场景1：性别只能是 ’男‘ 和 ’女‘，就可以采用联合类型配合字面量的类型定义方案场景2：ElementUI中的el-button组件按钮的type属性。
2023-07-14 09:33:08
160
原创 ref reactive computed define props define emits 的类型注解
在Vue 3中，你可以使用来为refreactivecomputed和等函数提供类型注解。
2023-07-14 09:11:36
131
原创 type 与 interface 的区别
如果想保持代码统一，还是可选择使用 type。通过上面的对比，type 其实可涵盖 interface 的大部分场景。用来给类型起新名字，使用type创建类型别名，可用来表示：基本类型，对象类型，联合类型，数组和交集。前言：TS代码中很容易看到interface和type的身影，两者都是申明类型，但使用却有所不同。type可以声明：基本类型，对象类型，联合类型，数组和交集。interface只能描述对象类型，语法格式也不同，如下。interface声明：对象，函数，合并。
2023-07-13 22:44:41
423
原创 js判断变量数据类型的几种常用方法
使用Object.prototype.toString.call 的方式来判断一个变量的类型非常准确，会返回一个[object XXX] 样式的。NaN 会被识别为 number，尽管 NaN 是 Not-A-Number 的缩写，意思是"不是一个数字"。识别引用类型，但是无法区分对象，数组以及 null，都会返回Object。二、Object.prototype.toString.call。识别函数类型,typeof(函数a)会返回Function。用来检测引用数据类型，值类型都会返回 false。
2023-07-09 22:30:07
474
1
原创 Vue3.0 里为什么要用 Proxy API 替代 defineProperty API
只能遍历对象属性进行劫持return})Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的= null) {return obj// Proxy相当于在对象外层加拦截console.log(`获取${key}:${res}`)return res},console.log(`设置${key}:${value}`)return res},console.log(`删除${key}:${res}`)return res},})Proxy。
2023-07-09 18:17:05
435
1
原创 Vue 中的过滤器了解吗？过滤器的应用场景有哪些？
在组件的选项中定义本地的过滤器filters: {if (!if (!})new Vue({// ...})注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize过滤器函数将会收到message的值作为第一个参数在这个例子中，filterA被定义为接收单个参数的过滤器函数，表达式message的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数filterB，将。
2023-06-12 23:15:00
224
原创 SPA 单页面
SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTMLJavaScript和CSS。
2023-06-11 23:45:00
72
原创 slot//简版
slot 是插槽,一般在组件内部使用在封装组件时,在组件内部不确定该位置是以何种形式的元素展示时,,我们可以通过 slot 占据这个位置,该位置的元素需要父组件以内容形式传递过来.slot 又分为:默认插槽,具名插槽,作用域插槽。
2023-06-11 01:00:00
92
原创 vue 的 mixin 的理解
混入是用来分发 Vue 组件中的可复用功能,混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混合进入该组件本身的选项。当组件和混入对象含有同名选项时,以组件数据优先。
2023-06-10 23:30:00
321
原创 Vue 组件之间的通信方式
适用场景：子组件传递数据给父组件子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值父组件绑定监听器获取到子组件传递过来的参数Father.vue。
2023-06-10 01:00:00
74
原创 v-if 和 v-for 的优先级是什么？
v-if 不能和 v-for 一起使用的原因是 v-for 的优先级比 v-if 高，先循环再做分支判断,一起使用会造成性能浪费 解决方案有两种:把 v-if 放在 v-for 的外层把需要 v-for 的值先在计算属性中过滤一次最终结论：v-for优先级比v-if高v-if优先级比v-for高使用过程中，不要把它们同时用在一个元素上。
2023-06-09 23:00:00
239
原创 vue响应式原理
Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。Vue3 使用 Proxy 来监控数据的变化。
2023-06-09 00:00:00
78
原创 v-show 和 v-if
是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染。例如：用户登录之后，根据他的权限不同来显示不同的内容。如果需要非常频繁地切换，则使用 v-show 较好，例如：手风琴菜单，tab 页签等。切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；的作用效果是相同的(不含 v-else)，都能控制元素在页面是否可见。的时候不会触发组件的生命周期。都能控制元素在页面的显示。要复杂的多，因为还有。
2023-06-08 19:53:26
109
原创 Vue 中的$nextTick
问：$nextTick 是干什么的？答：页面的 DOM 还未渲染，这时候也没办法操作 DOM，如果想要操作 DOM，需要使用 nextTick 来解决这个问题实现原理：nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout 的原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列。
2023-05-31 23:45:00
127
1
原创 vue 中的 key
概念：页面上的标签都对应具体的虚拟 dom 对象(虚拟 dom 就是 js 对象), 循环中 ,如果没有唯一 key , 页面上删除一条标签, 由于并不知道删除的是那一条!所以要把全部虚拟 dom 重新渲染, 如果知道 key 为对应标签被删除掉, 只需要把渲染的 dom 为对应标签去掉即可!作用：更准确、更快速、提高效率。
2023-05-30 03:30:00
785
1
原创 Vue2 的 diff 算法
树的 diff 的时间复杂度是 O(n^3)第一：遍历 tree1，第二遍历 tree2，第三，排序1000 个节点，要计算 1 亿次，算法不可行优化时间复杂度到 O(n)vue 的diff算法用来找出两颗虚拟 dom 树的不同。比较只会在同层级进行, 不会跨层级比较tag 不相同，则直接删掉重建，不再深度比较tag 和 key，两者都相同，表示相同节点，不再深度比较在 diff 比较的过程中，循环从两边向中间比较。
2023-05-29 23:01:04
200
1
原创 虚拟 DOM
虚拟 DOM （）这个概念相信大家都不陌生，从React到Vue，虚拟DOM为这两个框架都带来了跨平台的能力（和Weex实际上它只是一层对真实DOM的抽象，以JavaScript对象 (VNode节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上在Javascript对象中，虚拟DOM表现为一个Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别创建虚拟。
2023-05-23 22:30:00
84
1
原创 vue 生命周期
Vue生命周期钩子是在特定时间点调用的自定义函数。Vue实例有一个完整的生命周期，从三个阶段的创建、更新和销毁组成。创建阶段时，我们将涉及到beforeCreate、created、beforeMount和mounted钩子。更新阶段包括beforeUpdate、updated和activated/deactivated钩子。销毁阶段只涉及beforeDestroy和destroyed钩子。
2023-05-23 14:56:08
66
1
原创 适配方案（flex + rem + flexiable.js + less ）
媒体查询写起来超级麻烦，而且检测不够精确，因此我们使用 flexible.js 这个 js文件，通过js 实时检测屏幕窗口的变化实现检测视口宽度。我们的设计稿里面元素大小是固定的吗？是 ， 而是 px 单位 ，但是我们开发的时候，要使用 rem 才能适配。通过媒体查询，检测不同的视口宽度，设定不同的html文字大小，元素设置rem单位后，可以达到元素适配效果。我们的需求的是要做移动端适配： 页面中的元素尺寸跟随屏幕宽度等比例缩放（适当调整大小）媒体查询一个非常大的作用是：根据屏幕宽度修改html文字大小。
2023-03-13 14:12:16
335
1
原创 flex布局方式
主轴 justify-content align-content 侧轴多行对齐。align 垂直 比如 align-items 垂直对齐 align-content 多行垂直对齐。主要目的是通过父盒子控制子盒子如何排列,一定是亲爸爸和亲儿子。特别是多行的情况下，我们需要给弹性盒子换行，给 父盒子 弹性容器加。弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧。主轴默认是水平方向, 侧轴默认是垂直方向。修改完毕，主轴是Y轴， 侧轴是X轴。
2023-03-11 14:23:39
176
1
原创 移动端特点
比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1；实际开发中还有三倍图甚至四倍图等，多倍图，但是现在市场还是二倍图偏多，我们称为二倍图。一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索。当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex。简单理解，二倍图存在就是为了让页面中图片更加清晰，遵循即可。手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度。flex布局极大的提高了我们布局的效率，更简单、灵活。
2023-03-08 14:34:00
221
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人