一只大大大大狗-CSDN博客

原创 vue3学习 4.toRaw

1.toRaw 获取原始数据不是引用关系而是全等关系1.toRaw 从Reactive或Ref中得到原始数据 2.toRaw作用做一些不想被监听的事情(提升性能) let obj ={name:'zs',age:19} /* ref/reactive数据类型的特点: 每次修改都会被追踪,都会更新UI界面,但是这样其实是非常消耗性能的所以如果我们有一些操作不需要追踪,不需要更新UI界面,那么这个时候,

2021-06-25 18:05:07 16821 2

原创 vue3学习 3.递归监听和非递归监听

1.递归监听 1.递归监听默认情况下,无论是通过ref还是reactive都是递归监听递归监听是vue将对象包装成Proxy对象里面的所有数据都能深度监听 2.递归监听存在的问题如果数据量比较大,非常消耗性能 3.非递归监听注意点: 如果是通过shallowRef创建的数据, 那么vue监听的是.value的变化并不是第一层的变化.所以如果使用的是shallowRef的话数据都不会有Proxy对象转化 4.应用场景一般情况下我们是用ref和reactive即可

2021-06-23 19:01:15 374 1

原创 vue3学习 2.组合API

1.vue2的老旧模式数据放在data里面但是操作数据的方法可能在methods或者computed或者watch里面分开操作有点不合适2.vue3中新增setup方法setup函数时组合API的入口函数<template> <div> <p>{{count}}</p> <button @click="myFn">按钮</button> </div><

2021-06-23 17:32:05 314 1

原创 vue3对于vue2的提升 1,速度提升

vue3的六大亮点performance:性能比vue2提升1.2~2倍Tree shaking support:按需编译,体积比vue2更小composition API:组合API(类似react hooks)better typeScript suppert:更好的Ts支持custom renderer API:暴露了自定义渲染APIfragment,teleport(protal),msusoense:更先进的组件1.优化diff算法 vue2中的虚拟dom是进行全量的对比 htt

2021-06-22 19:00:46 648

原创高程3 引用类型

5.引用类型引用值(或者对象)是某个特定**引用类型**的实例,在js中引用类型是吧数据和功能组织到一起的结构,对象被认为是摸个特定引用类型的**实例**,新对象通过使用new操作符后跟一个构造函数来创建.后遭函数就是用来创建新对象的函数;DateDate.parse()，Date.UTC() Date.now()1.1 继承的方法Date 类型重写了 toLocaleString()、toString()和 valueOf()方法。toLocaleString() - 2/1/2019

2021-05-08 20:14:23 160 7

原创高程3 变量,作用域和内存问题

变量1.基本类型和引用类型的值基本类型:值得是简单地数据段,引用类型值:那些可能由多个值构成的对象引用类型的值是保存在内存中的对象. js不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间.在操作对象时.实际上是在操作对象的引用而不是实际的对象,为此,引用类型的值是按引用访问的.1.1动态的属性基本类型和引用类型的方式类似:创建一个变量并为该变量赋值.1.2 复制变量值基本类型在用=复制值的时候两个变量不受影响随便更改一个另一个不会受到影响引用类型的时候这个值的副本

2021-04-25 19:25:06 99

原创高程3 02 数据类型操作符语句函数

一元操作符只能操作一个值的操作符焦作一元操作符,一元操作符是ECMAScript中最简单的操作符 1.递增和递减操作符前置操作符 --m ++m var m = 3 ; --m 等同于 m = m - 1 此时m已经变成2;后续操作再引用到m时候就会当成2来用; 后置操作符 m-- m++ var m = 3; m++ 等同于 m = m + 1 ***但是!!!递增或者递减操作是在包含他们的语句被求值之后才执行的. 就是如果有 m++或者m-- 先把运算过程做完然后再对

2021-04-21 19:04:14 109

原创高程3

JSjs由核心ECMAScript 文档对象模型DOM 浏览器对象模型BOM组成DOM文档对象模型DOM是页面内标签 Document Object Model 遵循W3C标准BOM浏览器对象模型BOM 指可操作浏览器窗口的对象模型(Browwer Object Model) H5把操作浏览器的一些东西扩展作为操作BOM的一部分弹出浏览器窗口的功能;移动缩放和变故浏览器窗口的功能浏览器详细信息的navigator对象浏览器加载页面的详细信息的location对象提供用户显示器分辨

2021-04-19 21:57:11 130

原创 bpmn.js 流程基本使用

实际项目需求:我们公司的项目需求不是一般的审批流,而是通过构建流程然后后端通过Flowable流程引擎执行过后给出结果(比如获取参数执行流程然后输出结果或者中间穿插分支根据条件走不通分支输出结果)bpmn的实现机理:Flowable和bpmn之间通过协商好的xml格式数据进行沟通. Flowable通过jar包或者自己的api进行解析xml进行流程执行 bpmn通过页面拖拽输入输出生成约定好格式的xml (json转化xml xml转化json)参考资料:https://jue

2021-04-19 11:15:25 2493 2

原创 React路由基本使用

5.01 SPA的理解1.单页面Web应用(single page web application ,SPA)2.整个应用只有一个完整的页面.3.点击页面中的连接不会刷新页面,只会做页面的局部更新.4.数据都需要通过ajax请求获取,并在前端异步展现5.01.2路由的理解.1.什么是路由?1)一个路由就是一个映射关系(key:value)2)key为路径,value可能是function或者component2路由分类1.后端路由:1)理解:value是function,用来处理客户

2021-04-19 10:13:12 126

原创 react扩展方法 setState lazyLoad Hook Fragment Context Component render props 错误边界组件通信方式总结

1,setStatesetState更新状态的2种写法 1,setState(stateChange,[callback])----对象的setState 1.stateChange为状态改变对象(该对象可以提现出状态的更改) 2.callback是可选的回调函数,他在状态更新完毕,界面也更新后(render调用后)才被调用 2.setState(updater,[callback])----函数式的setState 1,updater为返回stateChange对象的函数 2.upd

2021-04-17 20:09:14 187

原创 react详解redux进阶-纯函数-高阶函数 redux开发者工具

7.1.1redux是什么 1.redux 是一个专门用于做状态管理的js库,(不是react插件库) 2.他可以在react. angular,vue 等项目中,但基本与react配合使用(vue一般使用vuex管理状态) 3.作用:集中式管理react应用多个组件共享状态 7.1.2什么情况下用redux 1.某个组件的状态,需要让其他组件可以随时拿到(共享) 2.一个组件需要改变另一个组件的状态(通信) 3.总体原则:能不用就不用,如果不用比较吃力才考虑用redux工作流程7.

2021-04-16 19:42:53 593

原创 react精简组件拆分的意义

3.1功能界面的组件化编码流程(组件拆分思想)拆分组件:拆分界面,抽取组件实现静态组件,使用组件实现静态页面效果时间动态组件3.1 动态显示初始化数据3.11数据类型3.12数据名称3.13保存在那个组件?3.2交互(从绑定事件监听开始)3.2组件的组合使用-TodoList功能:组件化实现此功能1.显示所有todo列表2.输入文本,点击按钮显示到列表的首位,并清除输入的文本todolist案例相关知识点1.拆分组件,实现静态组件,注意className,style写法2.

2021-04-12 17:34:37 149

原创 react ajax 兄弟组件之间通讯

4.1.1 前置说明1.react本身只关注于界面,并不包含发送ajax请求的代码.2.前端应用需要通过ajax请求与后台进行交互(json数据)3.react应用中需要集成第三方ajax库(或者自己封装)4.1.2 常用的ajax请求库1,jQuery 比较重,如果需要另外引入不建议使用2.axios:轻量级建议使用 1)封装XmlHttpRequest对象的ajax 2)promise风格 3)可以用在浏览器端和node服务器端4.2 axios 使用 axios.get(

2021-04-11 17:02:07 97

原创 react运行机制基本语法生命周期

1,关于虚拟DOM:1,本质是Object类型的对象(一般对象).2,虚拟DOM比较"轻",真实DOM比较"重",因为虚拟DOM是React内不再使用,无需真实DOM上那么多的属性.3,虚拟DOM最终会被React转化为真实DOM,呈现在页面上.2.渲染虚拟DOM到页面上注意jsx语法1.定义虚拟DOM时,不要写字符串2.标签中混入js表达式要用{}.3.样式的类名指定不用class要用className,4.内联样式要用style={{key:value}},5.只有一个根标签.6

2021-04-05 21:10:41 218

原创算法排序 1-4

1,冒泡排序 //冒泡排序用前面和后面的数进行对比如果前面大于后面就交换顺序 function bubbleSort (arr){ for (let index = 0; index < arr.length-1; index++) { for (let indexson = 0; indexson < arr.length-1; indexson++) { if(arr[indexson]>arr[in

2021-03-05 10:34:32 153 2

原创个人记录 es6 ...用法

es6的扩展运算符 … 可以对对象进行扩展运算也可以对数组进行扩展运算1.对象的扩展运算记住一句话对象的扩展运算符… 用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中.let bar = { a: 1, b: 2 };let baz = { …bar }; // { a: 1, b: 2 }boject.assign 用于对象的合并将原对象的所有可枚举属性复制到目标对象中.如果目标对象中与原对象有同名属性,活多个源对象有同名属性,则后面的属性会覆盖前面的属性,同样,如果用户自定义

2021-02-04 16:48:47 125

原创记一次多文件上传使用element框架的实例不显示进度条提交按钮自己控制

效果文件上传的时候未完成不允许提交表单显示上传进度(不能覆盖element不然没有上传进度条)上代码<el-upload :on-progress="handleprogress" class="upload-demo" action="https://www.chineseafs-tc.org.cn/cky-rest/upload/upload"

2020-11-20 17:51:44 634

原创需要循环中的异步请求返回结果全部完成后进行后续逻辑

实际场景中碰到一个问题就是在一个数组中进行循环当满足某些条件时进行异步请求然后把请求返回的数据进行拼接然后进行后续操作如果单纯的在for循环里面进行就会出现有的数据还未完全返回但是已经进行了后续逻辑操作这时候需要个小技巧递归进行循环直到所有数据加载完成才后续进行下列代码的for循环套for循环比较恶心因为需求比较奇葩所以就不多说了…//递归异步请求直到所有请求都完毕然后掉后续借口不然数据会混乱 querylist(i, element) { if (i

2020-10-26 11:41:45 1490

原创 vue 使用qiniu上传文件到七牛服务器(视频文件图片.) 带有真实进度条展示切记下载最新版qiniu-js!!!!!!!!!!!!!!!!!

**切记下载最新版qiniu-js!!!**需求效果html代码 <div class="f2-sub_btn"> <van-button type="primary" block> <span>开始录制视频</span> <input type="file" accept="

2020-10-16 10:36:55 968

原创 vue 使用视频流 formdata上传视频文件并且限制视频大小格式

需求代码<div class="f2-sub_btn"> <van-button type="primary" block> <span>开始录制视频</span> <input type="file" accept="video/*" clas

2020-09-29 10:54:30 2162

原创 js 图片转base64码后再对base64码进行压缩然后传给后台无限压缩直到符合输出码率

kejiang 1 html <div> <img :src="url" alt class="el-upload-list__item-thumbnail" />

2020-09-29 10:49:37 513

原创 vue中图片转化base64

需求页面直接上代码 //上传图片信息保存在数组中并且回显 change(event) { let file = event.target.files[0]; let windowURL = window.URL || window.webkitURL; //图片格式为PNG或JPG且小于5M if ( /\.(jpg|jpeg|png|JPG|JPEG|P

2020-09-22 14:42:49 1943

原创 ant-design form表单校验方式不同于 form-model

1需求.对form表单进行非空和指定规则校验2,写html部分data指定表单3,在methods中指定校验规则.4.最后提交的时候惊醒表单验证. 通过了在提交

2020-09-17 11:07:22 1778

原创 MySQL 学习

MySQL 关系型数据库管理系统1.下载安装https://www.mysql.com/ 官网2安装因为我是安装的msi版所以安装过程直接一路next

2020-09-09 22:50:41 345

原创 MySQL 学习

MySQL 关系型数据库管理系统1.下载安装https://www.mysql.com/ 官网

2020-09-09 22:50:05 72

原创学习MySQL+Navicat 02

1,主键的用处:保证数据的唯一性,一个表里面只能有一个主键!一个主键可以同时约束好几列!create table t1( nid int(11) not null auto_increment, pid int(10) default null, num int(11) default null, primary key (nid,pid) //这个意思是定义了一个主键由nid和pid共同组成主键)engine=innodb default charset=utf8 数据行的增删改查

2020-09-09 22:49:44 71

原创学习MySQL 03

上节回顾:1,增删改查insert into name values(‘root’),(‘xxx’)insert into name select id from tab2;3.自增起始值(能修改自定义 )步长:-session-global4.unique 唯一索引表示同一列东西只能出现一次. 不能重复.\id name(unique) email(unique)联合唯一索引id name email unique(name,email)1 11 21 1(不能出

2020-09-09 22:49:26 103

原创 ant-design 使用中出现的bug或者问题总结

1,使用tree树形结构时如果设置自动展开全部但是数据是异步获取到的则不会展开.因为标签创立的时候已经走过了所以不会展开这时候需要现有数据再有dom结构则需要加这里的作用是用有没有数据或者其他条件来判断if 创建不创建.相当于初始化.2,...

2020-09-04 15:55:16 942

转载 vue中使用mixins异步方法获取参数的获取

当混合里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们会取不到此返回值，如下：mixin中组件中控制台解决方案：不要返回结果而是直接返回异步函数mixin中组件中控制台...

2020-09-03 09:56:31 2124 3

原创 vue中mixins使用原理详解

混入 (mixins)：是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。1.把要用的方法抽出来写一个js 然后暴露出去里面的参数以及this 都相当于组件注入可以全局调用import { mapActions, mapState } from "vuex";export default { props: ["itemdata"], data() { return

2020-09-03 09:50:44 4172 1

原创学习MySQL 02.

1,自定义起始值show create table t1 \G //查看创建表的语句 \G是表示竖着看alter table t1 auto_increment=2;//这里的修改可以使表内自增起始值变为自己想要的任何数字. 哪怕表内被delete 删空了但是起始值还是2.当时用自定义时查看语句会发现有自增语句自动添加了例子:自定义个20为起始值的语句然后insert into 一条就从20开始新增了.2,设置自增列的步长基于会话级别:(一次登录就是一次会话), 开启两个cmd窗

2020-06-21 15:48:22 117

原创 ant中vue-table的使用(排序搜索筛选)

官网api https://www.antdv.com/components/table-cn/虽然用法很多但是很多API并没有写出实际的例子并且原来我用的element 到这里初次使用很难看得懂,.<a-table :columns="columns" // 表头 :dataSource="data" // 数据源 :loading='loading' // 加载loading :pagination="pagination" // 页脚 :scroll="scrol

2020-06-19 17:10:39 7270

原创学习MySQL+Navicat

关系型数据库:互相之间有约束强类型关系的先A才能B否则报错 sqllite,db2MySQL非关系型数据库:内部没有很多的约束只要能存数据就行 MongoDB,redisinnodb 支持事务,原子性操作.myisam 不支持事务读取快auto_increment 表示:自增primary key 表示约束(不能重复且不能为空),加速查找.例子:清空表: delete from t1; truncate table t1; (穿kei特)也是清空表的意思. 比del

2020-06-17 17:26:29 321

转载 VSCODE使用大全转载

https://blog.csdn.net/weixin_45601379/article/details/100550421

2020-06-09 14:56:43 201

原创 VUE复习深入学习13.深入响应式原理,底层探究

数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题。如何追踪变化当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”

2020-06-08 17:34:35 156

空空如也

空空如也