ghl-Dragon-CSDN博客

转载 uniapp中使用.stop报错无法使用stopPropagation？

在开发中我们常常会遇到要的问题，加个.stop就好了。但是在组件上阻止事件冒泡会报错：$event.stoppropagation is not a function这是因为当事件添加到上时，会变成自定义事件，如果想要触发事件的回掉函数，则必须子组件内的$emit调用才可以。

2024-04-13 20:57:56 26

原创 vue3的setup中如何使用this.$route获取内容

在之前mounted中可以直接使用this.$route,但在setup中没有this，给我整不会了，翻翻文档发现需要引用useRouter就好了这样就都能获取到了

2022-01-07 10:27:15 6668 4

原创 vue中解决字符串无法换行问题

degree就是那个储存内容的string一开始在后面加了br发现当成字符串展示了后来发现只需要把字符串放在pre里面，把之前的br换成’\n’就能用了

2021-11-24 15:14:16 1384

先看效果：需求是在列表数据加载出来之后，页面可以对数据进行拖动排序并进行保存<vxe-table :data.sync="tableData" // 绑定返回的数据 ref="paySlipTable" id="paySlipTable" row-key class="sortable-row-demo" :scroll-y="{ enabled: false }" @ciic-data-refres

2021-10-09 14:35:34 1837

原创 vue引入地图，实现搜索添加地图位置点，点击地图获取位置信息

这里引入的是百度地图，根据下图操作即可（目前用的是PC端也就是浏览器端）获取ak后把这段代码放在index里<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=ak放在这里"></script>...

2021-08-12 10:38:32 2164 2

原创 Media媒体查询使用大全

举个例子：引入位置<link rel="stylesheet" type="text/css" media="only screen and (max-width:415px),only screen and (max-device-width:415px)" href="index.css" />样式表中<style> @media screen and (min-width:415px) and (max-width:1368px) { .header{ h

2021-07-09 17:56:17 555

原创 resetField重置表单内容，但恢复了初始化数据（亲测有用）

今天遇到一个奇怪的问题：当我输入完表单信息后保存，然后再次修改后点取消，表单内容就会变成没更改之前的数据，也就是第一次打开时候显示的内容（但是之后点取消就没事了）点击el-dialog =》修改=》保存=》修改=》取消 =》数据重置为刚打开时的内容上面是取消按钮的点击操作，就是想清除一下表单数据；看了看elementUI 的文档，确实是重置为初始化了，但之后的点击就没问题了，这就让我很懵这个问题的本质是因为编辑时，第一次打开dialog的时候给表单绑定的model赋值了，这时候这个mo

2021-03-23 14:29:59 1189

原创 vue实现打印，导出为pdf（纯前端且亲测有用）

import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export default { install(Vue, options) { Vue.prototype.downloadHtmlToPdf = function () { var title = this.htmlTitle html2Canvas(document.querySelector('#pr.

2021-03-17 14:13:28 6147 3

原创 vue清空子组件数据或强制刷新子组件

需求：每次点开子页面的时候，里面的表单内容都为空this.$refs[‘form’].resetFields()1、可以通过ref把表单数据绑定上在data中定义form写入对应key和value(每个input输入的值)在点击按钮打开子组件的时候是触发这个语句，这样每次打开表单数据都是空的，当然如果想表单输入一半关掉但不希望表单内容清空就不能用上面那句话的写法了，只需要在表单提交成功之后写入这句话就好了2、可以给定一个v-if 通过其特性来强制刷新页面这个是引入的子组件和写在同一个文

2021-02-22 19:01:40 5418

原创附加上下移动的vue穿梭框实现

功能需求：1、左侧的子节点移动到右侧的表格中2、右侧选中的内容移动到左侧树中，单一移动和全部移动3、点击右侧节点实现上下移动首先会遇到的问题可能是如何实现左侧只让子节点显示checkbox,我这边是根据后端返回了一个参数来判断是否是父节点（其实只要后端给父节点加一个nocheck=true就可以） if (res.data.code == 0) { let { data } = res.data; data.forEach((item) => { i.

2021-01-26 16:03:02 811

原创 Git pull 遇到的问题：error: Your local changes to the following files would be overwritten by merge:

今天 pull 代码的时候发现代码没更新，然后git branch 查看自己分支没问题，git remote -v 看到连接的地址也没问题，之后才注意到了这个报错，这个情况下要么就把本地的保存了再pull ，如果不想保留本地的修改，可以直接将本地的状态恢复到上一个commit 。然后pull 代码下来直接覆盖即可，git reset --hard git pull如果需要保存的话 git stash git pull执行git stash后，会把你的代码保存（如下

2021-01-05 17:27:39 215 1

原创开发微信小程序时点击或者长按，但不弹出授权框

在真机调试的时候，长按验证码想获取相机的授权，但授权弹出框死活都出不来，之后找到了这个开发者工具上面有一个清缓存，里面有一个全部清除，点了之后重新加载就可以了

2020-11-20 09:17:55 1557 2

原创 vscode中一键生成react代码块以及快速补全react代码的快捷键大全（细）

React Componentsvscode扩展搜索下面这个插件并安装，安装之后可根据下面的快捷键生成代码块：rccimport React, { Component } from 'react'export default class FileName extends Component { render() { return <div>$2</div> }}rceimport React, { Component } from 'react'

2020-10-27 09:51:19 7482 1

原创垃圾回收策略，如何减少开销，垃圾回收的缺陷和优化GC

垃圾回收机制（1）垃圾回收概述垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。（2）垃圾回收策略：2种最为常用：标记清除和引用计数，其中标记清除更为常用。标记清除(mark-and-sweep)：当变量进入作用域时，进行标记，对于脱离作用域的变量进行标记并回收。到目

2020-10-26 18:06:25 327

原创四种继承方式及其原理加总结（原型，寄生，组合，构造函数）

继承说到继承，最容易想到的是ES6的extends，当然如果只回答这个肯定不合格，我们要从函数和原型链的角度上实现继承，下面我们一步步地、递进地实现一个合格的继承实现一个方法可以从而实现对父类的属性和方法的继承，解决代码冗余重复的问题一. 原型链继承原型链继承的原理很简单，直接让子类的原型对象指向父类实例，Child.prototype=new Parent()当子类实例找不到对应的属性和方法时，就会往它的原型对象，也就是父类实例上找，从而实现对父类的属性和方法的继承原型继承的缺点:1

2020-10-26 17:50:01 1207

原创 React 中如何使用装饰器（decorators）

create-react-app 支持 decorators安装包：yarn add @babel/core @babel/plugin-proposal-decorators @babel/preset-env创建 .babelrc并在其中写入以下内容：{ "presets": [ "@babel/preset-env" ], "plugins": [ [ "@babel/plugin-proposal-decora

2020-10-26 16:56:46 659

原创 Mobx 环境搭建=＞入门详解=＞项目中应用（react中使用mobx）

MobxMobx是一个功能强大，上手非常容易的状态管理工具。redux的作者也曾经向大家推荐过它，在不少情况下可以使用Mobx来替代掉redux。这张图来自于官网，把这张图理解清楚了。基本上对于mobx的理解就算入门了。官网有明确的核心概念使用方法，并配有egghead的视频教程。这里就不一一赘述了。要特别注意当使用 mobx-react 时可以定义一个新的生命周期钩子函数 componentWillReact。当组件因为它观察的数据发生了改变，它会安排重新渲染，这个时候 componentWil

2020-10-26 16:50:08 566

原创 React Hooks 总共9个（细+代码讲解）

React Hooks在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI 组件进行渲染。在我看来，使用 React Hooks 相比于从前的类组件有以下几点好处：代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过 React Hooks 可以将功能代码聚

2020-10-26 16:29:13 3248 1

原创从 V8 中看 JS 性能优化（项目的优化方式）

从 V8 中看 JS 性能优化注意：该知识点属于性能优化领域在学习如何性能优化之前，我们先来了解下如何测试性能问题，毕竟是先有问题才会去想着该如何改进。测试性能工具可以通过 Audit 工具 run Audit获得网站的多个指标的性能报告可以通过 Performance 工具了解网站的性能瓶颈可以通过 Performance API 具体测量时间为了减少编译时间，我们可以采用减少代码文件的大小或者减少书写嵌套函数的方式为了让 V8 优化代码，我们应该尽可能保证传入参数的类型一致。这也给

2020-10-26 12:12:28 303

原创回流和重绘（减少回流重绘的方法）

重绘（Repaint）和回流（Reflow）重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘回流是布局或者几何属性需要改变就称为回流。回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。以下几个动作可能会导致性能问题：改变 window 大小改变字体添加或删除样式文字改变定位或者浮动盒模型并且很多人不知道的是，

2020-10-26 11:10:29 1435

原创面试中如何手写call，apply，bind

手写 call、apply 及 bind 函数涉及面试题：call、apply 及 bind 函数内部实现是怎么样的？首先从以下几点来考虑如何实现这几个函数不传入第一个参数，那么上下文默认为 window改变了 this 指向，让新的对象可以执行该函数，并能接受参数那么我们先来实现 callFunction.prototype.myCall = function(context) { if (typeof this !== 'function') { throw new Ty

2020-10-24 10:00:44 171

原创面试中常问什么是节流和防抖，如何实现

防抖即短时间内大量触发同一事件，只会执行一次函数，防抖常用于搜索框/滚动条的监听事件处理，如果不做防抖，每输入一个字/滚动屏幕，都会触发事件处理，造成性能浪费;实现原理为设置一个定时器，约定在xx毫秒后再触发事件处理，每次触发事件都会重新设置计时器，直到xx毫秒内无第二次操作。// func是用户传入需要防抖的函数// wait是等待时间const debounce = (func, wait = 50) => { // 缓存一个定时器id let timer = 0 // 这里

2020-10-24 09:56:15 515

原创面试中的需求，手写一个符合Promise/A+规范的Promise

手写 Promise我们会通过手写一个符合 Promise/A+ 规范的 Promise 来深入理解它，并且手写 Promise 也是一道大厂常考题，在进入正题之前，推荐各位阅读一下 Promise/A+ 规范，这样才能更好地理解这个章节的代码。实现一个简易版 Promise在完成符合 Promise/A+ 规范的代码之前，我们可以先来实现一个简易版 Promise，因为在面试中，如果你能实现出一个简易版的 Promise 基本可以过关了。那么我们先来搭建构建函数的大体框架const PENDIN

2020-10-24 09:39:10 321

原创最新整理的Vue 基础面试题（二）细+答案

1.vue优点轻量级框架简单易学双向数据绑定组件化视图数据和结构分离虚拟DOM运行速度快vue是页面应用，是页面布局刷新，不用每次条状页面求要请求所有数据和DOM，这样大大加快了访问速度和提升用户体验。而且他的三方ui库很多，可以节省开发时间2、组件之间数据共享1：props emit 缺点：如果组件嵌套层次多的话，数据传递比较繁琐2：provide inject (依赖注入)，缺点：不支持响应式3：this.rootthis.root this.rootth

2020-10-23 22:44:24 1918

原创最新整理的Vue面试题（一）细+答案

Vue面试题经过了搜索整合，翻了翻最近的面试题，进行了部分知识点的总结，因题目过多就分了两篇：1.什么是 vue 生命周期，作用是什么每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗，那我们最早可

2020-10-23 22:32:16 1257

原创 React 面试题（三）组件方面的题居多（贼细+答案）

1.展示组件(Presentational component)和容器组件(Container component)之间有何不同展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。(子组件)容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其作为回调提供给展示组件。容器组件经常是有状态的，

2020-10-21 17:52:06 1057 2

原创 React 基础面试题（二）贼细+答案

这些是我平时翻阅+面试遇到的面试题，可能会不全，但还会继续补充！！！！！！1、什么是React？React 是 Facebook 在 2011 年开发的前端 JavaScript 库。它遵循基于组件的方法，有助于构建可重用的UI组件。它用于开发复杂和交互式的 Web 和移动 UI。尽管它仅在 2015 年开源，但有一个很大的支持社区。2、 React有什么特点？1、生命式设计：react采用声明范式。2、高效：react通过对DOM的模拟，最大限度减少DOM交互。3、灵活：react

2020-10-21 17:48:09 1495 4

原创 React 面试题（一）贼细+答案

1.react 生命周期函数react生命周期分为初始化阶段、运行阶段、销毁阶段。(1) 初始化阶段：componentWillMount：实例挂载之前Render：渲染组件componentDidMount：实例挂载完成。一般在这个函数中与后台进行初始化数据交互。(2)运行阶段：componentWillReceiveProps：父组件改变时调用。sholudComponentUpdate：主要是用来手动阻止组件渲染，一般在这个函数中做组件的性能优化。componentWillUpdat

2020-10-21 17:36:23 2021

原创 React 生命周期中12个函数详解（2）

最好连接上一篇文章一起查看，能更好的理解该文章：react生命周期函数执行过程：https://editor.csdn.net/md?not_checkout=1&articleId=1090106931、constructor(props)React组件的构造函数在挂载之前被调用。在实现React.Component构造函数时，需要先在添加其他内容前，调用super(props)，用来将父组件传来的props绑定到这个类中，使用this.props将会得到。官方建议不要在construc

2020-10-11 17:39:25 559 2

原创 React 生命周期流程简介（1）

React生命周期前言在React中组件的生命周期会经历三个过程：挂载（Mount），第一次在DOM树渲染更新（Update），组件被重新渲染卸载（Unmount），组件在DOM树中删除这里是不同阶段生命周期执行顺序：初始化：在组件初始化阶段会执行constructorstatic getDerivedStateFromProps()componentWillMount() / UNSAFE_componentWillMount()render()componentDidM

2020-10-11 17:38:53 332

转载 9个Vue高频原理面试题（2020新）

1、computed 的实现原理computed 本质是一个惰性求值的观察者。computed 内部实现了一个惰性的 watcher,也就是 computed watcher,computed watcher 不会立刻求值,同时持有一个 dep 实例。其内部通过 this.dirty 属性标记计算属性是否需要重新求值。当 computed 的依赖状态发生改变时,就会通知这个惰性的 watcher,computed watcher 通过 this.dep.subs.length 判断有没有订阅者,

2020-09-29 22:28:38 1354

转载 Vue响应式原理

Vue 响应式原理核心实现类:Observer : 它的作用是给对象的属性添加 getter 和 setter，用于依赖收集和派发更新Dep : 用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个 Dep 实例（里面 subs 是 Watcher 实例数组）,当数据有变更时,会通过 dep.notify()通知各个 watcher。Watcher : 观察者对象 , 实例分为渲染 watcher (render watcher),计算属性 watcher (computed wa

2020-09-29 22:06:56 205

空空如也

空空如也