雨辰389-CSDN博客

转载 Anthropic Claude，目前世界上唯一一个能让OpenAI ChatGPT 看的上的竞争对手。

下面说说本文主角：Anthropic Claude，目前世界上唯一一个能让OpenAI ChatGPT 看的上的竞争对手。这里我们推荐一个Anthropic Claude 官方推荐的体验方式！国内流畅体验无需挂代理了！

2023-05-12 17:59:06 447

原创在 Vform2 的 input 组件上添加一个自定义属性 xxx,并展示其效果。

1. 安装 Vform2:bashnpm install vform22. 在项目中引入 Vform2:jsimport Vue from 'vue'import Vform from 'vform2'import 'vform2/dist/vform.css'Vue.use(Vform)3. 在 src/widgetsConfig.js 中找到 input 配置,添加 xxx 属性:js{ type: 'input

2023-05-12 17:04:10 426

原创在项目中使用 Vform2 时,有可能会遇到默认样式发生变化的问题。

在项目中手动引入 Vform2 的 style 文件,并将其放在其他 UI 框架样式之后,让其样式生效。- 手动在项目中引入 Vform2 默认样式,并将其放在全局样式之后,让 Vform2 默认样式生效。1. Vform2 使用了 Element UI,但您的项目中使用的 Element UI 版本不同。2. 您的项目中使用了其他会影响 Element UI 样式的 UI 框架,比如 iView UI。3. 您的项目使用了全局的 CSS 样式重设了 Element UI 的部分样式。

2023-05-12 17:02:36 437

原创 Vform低代码表单、表单生成器

Vform - 让表单开发变得简单Vform 是一个基于 Vue.js 的前端表单生成器,使用它可以通过可视化拖拽的方式快速构建出功能完备的表单。相比手写模板代码,它可以大大提高表单开发的效率和体验。

2023-05-12 16:50:53 3563

原创 Vue项目优化内容：

①尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher v-if和v-for不能连用 v-if 和 v-show 区分使用场景 v-for 遍历必须加 key，key 最好是 id 值，且避免同时使用 v-if 如果需要使用v-for给每项元素绑定事件时使用事件代理。⑩PWA 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。②SPA 页面采用keep-alive缓存组件在更多的情况下，使用v-if替代v-show。

2023-03-23 09:38:02 53

原创 js代码优化技巧：

7. 使用 Throttle（节流）和 Debounce（防抖）。可以从 Lodash 和 Underscore 之类的库中导入它们。缓存可以借助 Cache API 或 HTTP caching 来实现。8. 避免使用 Delete 关键字。可以简单地将不需要的属性设置为undefined.用 break 关键字和 continue 关键字来做这件事。js的延迟加载有助于提高页面的加载速度，所以尽量延迟加载。6.最小化变量计算的次数。1.删除未使用的代码和功能。2.尽量减少DOM访问。

2023-03-23 09:37:31 142

原创重排和重绘

（repaint）：就是在⼀个元素的外观被改变，但没有改变布局（宽⾼）的情况下发⽣，如改变visibility、outline、背景色等等，重绘只是页面的一部分需要重新绘制，但是元素的尺寸和位置并没有发生变化。（reflow）：就是DOM的变化影响到了元素的⼏何属性（宽和高），浏览器会重新计算元素的几何属性,如：改变窗⼝大小、改变文字大小、内容的改变、浏览器窗口变化， style属性的改变等等。重绘几乎不可避免，只要用户进行交互动作，页面势必会重新渲染。重排一定会引起重绘，重绘不一定引起重排。

2023-03-21 09:18:08 58

原创 link和@import的区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。link不仅可以导入样式表，还可以导入其他如如favicon，但@import只能导入样式表。link是在页面加载的的同时一起加载的，@import是页面加载完毕后才加载的。

2023-03-21 09:16:54 35

原创作用域、作用域链的理解

如果在自己作用域找不到该变量就去父级作用域查找，依次向上级作用域查找，直到访问到 window 对象就被终止，这一层层的关系就是作用域链。所有 window 对象的属性拥有全局作用域全局作用域有很大的弊端，过多的全局作用域变量会污染全局命名空间，容易引起命名冲突。函数作用域声明在函数内部的变零，一般只有固定的代码片段可以访问到作用域是分层的，内层作用域可以访问外层作用域，反之不行。作用域链的作用是保证对执行环境有权访问的所有变量和函数的有序访问，通过作用域链，可以访问到外层环境的变量和函数。

2023-03-21 09:16:27 37

原创原型和原型链的理解

原型：在 JavaScript 中是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个 prototype 属性，它的属性值是一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。原型链：当访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。JavaScript 对象是通过引用来传递的，创建的每个新对象实体中并没有一份属于自己的原型副本。

2023-03-21 09:13:08 40

原创 vue生命周期之间的差别

vue响应式的改变一个值以后，此时的dom并不会立即更新，如果需要在数据改变以后立即通过dom做一些操作，可以使用$nextTick获得更新后的dom。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有.的事件监听器被移除，所有的子实例也都被销毁。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。mounted（挂载后）挂载完成，HTML已经被渲染到了页面上，这个阶段可以执行dom操作，可以进行数据请求。

2023-03-21 09:11:36 56

原创用户注册登录实现大概步骤

2.登录–登录成功的时候，后台为了区分用户是谁，下发令牌token，用户前台持久化localStorage.setItem存储token。(组件派发action：userLogin通过Vuex的异步操作action，执行dispatch操作—执行异步操作，发送post请求(此处因为是前后端分离项目，通过webpack的proxy解决跨域问题)—请求发送到后端后，),路由在进行跳转。用户点击页面登录—前端页面vue组件获取表单的值—判断是登录还是注册，处理请求—后端—返回成功或失败数据。

2023-03-21 09:10:19 1056

原创浅拷贝深拷贝

{// 设置新的对象的属性名并且声明类型newObj[k] = []// 再次调用deepCopy(newObj[k],item)}else if(item instanceof Object){newObj[k] = {}// 再次调用deepCopy(newObj[k],item)}else {newObj[k] = item}}}deepCopy(b,a)（7）Loadsh库中的API，如：.clone()、.cloneDeep()浅拷贝深拷贝。浅拷贝只是拷贝一层，更深层次对象级别的值拷贝引用。

2023-03-21 09:10:14 37

原创函数防抖、截流的概念和使用场景

防抖：触发高频事件后，n秒内函数只执行一次，如果n秒内函数再次触发，就重新计算时间。可以在每次触发事件后取消之前的延迟回调方法。可以用于页面的滚动事件。节流:触发高频事件后，每秒执行一次，节流会稀释函数的执行频率。可以在每次触发事件时都判断是否有等待执行的延时函数。可以在input框的输入事件内使用。

2023-03-21 09:00:24 60

原创 Vue是如何实现双向绑定的?

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue实例来作为它的 data选项时，Vue将遍历它的属性，用Object.defineProperty()将它们转为getter/setter。用户看不到getter/setter，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。

2023-02-16 09:35:02 135

原创什么是面向对象？

象原型__proto__和构造函数原型对象prototype都有一个属性，叫做constructor，称之为构造函数，主要记录该对象引用了哪个构造函数，可以让原型对象重新指向原来的构造函数，这就是为什么在实例对象中传递参数时，构造函数本身不需要写return返回结果的原因。属性是对象的状态，方法是对象的行为（完成某种任务）。即this作用域的问题。是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总是与new一起使用，我们可以把对象中的一些公共的属性和方法抽取出来，然后封装到这个函数里面。

2022-11-25 16:43:48 11282

原创 canvas画布

是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己 MacOS X WebKit 推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过 Gecko 内核的浏览器 (尤其是 Mozilla和Firefox)，Opera 和 Chrome 和超文本网络应用技术工作组建议为下一代的网络技术使用该元素

2022-11-25 11:36:32 1758 1

原创 Vue中运用ECharts

全局引用是把Echarts完整的引入，这样做的缺点就是会额外的引入很多其他没有用的配置文件，可能会导致项目体积过大。全局引用是把Echarts完整的引入，这样做的缺点就是会额外的引入很多其他没有用的配置文件，可能会导致项目体积过大。在React中，如果把ECharts整个引入，也会面临项目包体积过大所造成的负面影响。在以前没有Hook的时候，我们都是在class里面写代码，就如上述的方法一样。在以前没有Hook的时候，我们都是在class里面写代码，就如上述的方法一样。来对真实的DOM进行操作。

2022-11-23 16:27:56 10149

原创 redux简单使用过程、流程及案例

"简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性用户的使用方式非常简单.用户之间没有协作,不需要与服务器大量交互，也没有使用 WebSocket,视图层（View）只从单一来源获取数据.上面这些情况，都不需要使用 Redux。但也正因为这一点，Reducer 函数里面不能改变 State，必须返回一个全新的对象，请参考下面的写法。上面代码中，reducer函数收到名为ADD的 Action 以后，就返回一个新的 State，作为加法的计算结果。

2022-11-18 16:30:46 154

原创 React路由

单页面得特点：只需要加载一次主页面，通过局部刷新，就可以实现跳转或者切换页面优点：加载速度快，用户体验比较好缺点：- 第一次加载比传统要慢一点- 不利seo- 页面相对复杂- 返回键简单的说就是根据不同的地址，web服务器处理不同的业务以及逻辑,或者说是根据不同的URL切换组件，实现页面的跳转。1.它是react的一个插件库2.专门用来实现一个SPA应用.3.基于react的项目基本都会用到此库.1.明确好页面中的导航区,展示区2.导航区的a标签改为link标签,href换成to3.展示区写Route

2022-11-18 16:24:42 403

原创 React ajax

///在请求/api2的时候会替换成https://api.asilu.com/phone///请求地址,then后面两个参数,成功执行第一个回调函数,失败执行第二个。//请求地址,then后面两个参数,成功执行第一个回调函数,失败执行第二个。//请求地址,then后面两个参数,成功执行第一个回调函数,失败执行第二个。//第一个参数配置前缀,遇见/api1前缀的请求，就会触发该代理配置。// 创建函数发送axios请求获取数据。// 创建函数发送axios请求获取数据。2) promise风格。

2022-11-18 16:16:56 103

原创 vue3生命周期

状态触发，同样是vue3新引入的钩子函数，只有在开发环境有效，与onRenderTracked的效果类似，但不会跟踪所有的响应式变量方法，只会定点追踪发生改变的数据，同样返回一个event对象。，状态跟踪，vue3新引入的钩子函数，只有在开发环境有用，用于跟踪所有响应式变量和方法，一旦页面有update，就会跟踪他们并返回一个event对象。，与keep-alive一起使用，当keep-alive包裹的组件激活时调用。，数据更新后调用，此时内存数据已经修改，页面数据也已经更新。，卸载组件实例后调用。

2022-11-18 14:52:14 1654

原创有几种插槽？分别怎么使用？

表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的

2022-11-17 17:36:34 158

原创 Lodash插件的使用方法

这个方法类似_.difference ，除了它接受一个 iteratee （注：迭代器），调用array 和 values 中的每个元素以产生比较的标准。（注：即创建一个新数组，这个数组中的值，为第一个数字（array 参数）排除了给定数组中的值。结果值的顺序是由第一个数组中的顺序确定。这个方法类似_.difference ，除了它接受一个 comparator （注：比较器），它调用比较array，values中的元素。来源对象的应用规则是从左到右，随后的下一个对象的属性会覆盖上一个对象的属性。

2022-11-17 16:52:18 1244

原创 SuperSlide插件的使用方法

网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！因为SuperSlide是基于jQuery的插件，所以前提必须先引用jQuery，再引用SuperSlide。从此无需网上苦苦寻觅特效，无需加载n个插件，无需害怕代码冲突，你需要的只是一个SuperSlide！查看参数以及更多效果展示请参考网站：http://www.superslide2.com/以下是默认的HTMl结构，分别是 ".hd" 里面包含ul， ".bd" 里面包含ul。

2022-11-17 16:49:47 1974

原创 swiper插件的使用方法

1.swiper的介绍2.为什么使用swiper3.Swiper的使用方法4. Swiper Animate的使用方法5.在常用框架中使用Swiper

2022-11-17 16:45:53 4428

原创 Ajax怎么用？

1. 网速慢的情况下，页面加载时间长，用户只能等待。2. 表单提交后，如果一项内容布合格，需要重新填写所有表单内容。3. 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间。Ajax：中问音译: 阿贾克斯它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的

2022-11-11 16:50:30 460

weixin_61665636的博客