-Wake--CSDN博客

原创【学习前端第七十九课】React组件进阶用法

当出现在数据量大，DOM节点元素多的场景下，一次的更新可能带来的处理量将会是非常巨大的，而所有的更新任务都是紧急更新的，在这种情况下浏览器会同时执行大量的渲染工作，而这种情况下带来的最直观的用户体验就是卡顿，特别是在硬件配置越低的设备越明显。

2024-01-22 16:42:27 1402

RouteNav方法，这是在路由组件中声明一个方法，该方法的主要目的是，当我们的路由包含嵌套路由的时候，可以通过递归的方式实现路由组件的动态渲染（这个过程可以参考之前在vue3中的导航渲染，这也是递归的一种非常常见的应用方式）所谓路由表其实就相当于我们之前在vue中创建路由管理对象时，作为参数传入的存放了路由单体对象的数组，在react中，我们通过路由表来动态创建我们的路由组件，从而方便我们获取到更多路由相关信息。在login组件中设置映射派发修改行为的方法，用来修改isLogin的值，模拟登录成功。

2024-01-22 16:38:39 442

原创【学习前端第七十七课】函数式组件

在上面的代码中，会出现一个情况，我们实际只是修改了obj中的inputStr，但是因为这是一个函数组件，基于上面我们说过的函数组件没有刷新和挂载阶段的区别，所以每一次函数组件中的数据更新都会导致整个函数组件被重新渲染一遍，其中就会把 changeList 这个用于筛选obj中list数组的方法再重新执行一遍，但是我们的list数组并没有改变，所以就导致了此次changeList的执行成了一个无用执行，筛选出来的新数组与之前的无异，但是这也会被算作一次list的数据更新，所以又会导致下面重新渲染一次。

2024-01-22 16:35:58 909

原创【学习前端第七十六课】redux与antd

我们之前在讲生命周期的时候就讲过constuctor就是一个挂载阶段的生命周期函数，所以我们在list组件被载入的时候就执行了 subscribe 方法开始监听store中的全局state，而我们只要在Input中输入了数据，就会触发onChange事件从而执行 getInputVal 方法，而getInputVal方法的执行会向redux中传入action修改全局state，而全局state被修改就会触发 subscribe 方法去执行 viewChange 方法，从而完成了这样一个反复循环的过程。

2024-01-22 16:31:18 395

原创【学习前端第七十五课】React路由

现在我们制作了一个指向根目录的一级路由对象，并将该路由对象跳转的目标页面设置为顶层组件App，而这里在注册App组件的时候使用的是一个函数的return方式，主要是为了在App虚拟标签的内部添加二级路由，在App组件内部再添加Switch因为在这之下会有不同页面需要切换，在Switch内部制作二级路由并把home和about注册到二级路由上。这里其实有点类似Switch语句的判断执行过程，用户在地址栏输入跳转路径，如果匹配到对应的path就跳转到对应的页面，如果没有就跳转到Page404。

2024-01-22 16:29:45 791

原创【学习前端第七十四课】React生命周期

初始化整个组件的state 以及调用super(props)，该方法只会执行一次挂载之前（已经弃用，目前React18.2中依然还是可以使用，如果使用会报警告）render()只返回需要渲染页面结构，最好不要包含其它的业务逻辑挂载之后，可以获取到DOM节点并操作，服务器请求，启用事件监听，调用 setState()等都可以在此函数中更新阶段情况一：state更新时有两个参数nextProps和nextState，表示新的属性和变化之后的state，返回一个布尔值，true表示会触发重新渲染，false。

2024-01-22 16:26:59 1058

原创【学习前端第七十三课】React组件内部数据定义

React组件中的数据称之为状态state, 而定义数据其实就在组件内部创建一个state对象来管理储存数据但是, 因为React组件有两种写法，分别是类式组件和函数式组件，而这两种组件最大的区别就是有无状态和生命周期, 而函数式组件是没有状态也没有生命周期, 所以也称无状态组件, 所以我们这里先从类式组件开始学习在components内新建two.jsxsetState方法通过上面的changeNum方法执行,我们可以看到一个情况, 我们通过setState修改了数据,但是紧接着打印的num却是修改

2024-01-22 16:25:29 863

原创【学习前端第七十二课】 react介绍

react是一个用于构建用户界面的JavaScript库，它原本是facebook的内部项目，用来构建instagram的，之后进行了开源，react主要关注的就是我们经常说的MVC模式中的V，拥有较高的性能。

2024-01-22 16:21:25 1570

原创【学习前端第七十一课】小程序

在写css样式的还是很，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位，wxss在底层支持新的尺寸单位rpx，开发可以免去换算的烦恼，交给小程序环境，由于换使采用的是浮点运算，所以运算结果会稍微有点偏差。在普通的DOM里面，我们的事件是可以传递的，有冒泡行为和捕获行为，小程序使用的是冒泡行为，所以当内部的元素触发事件以后会冒泡到外边来，现在要怎么阻止事件传播（取消事件冒泡）

2024-01-22 16:21:10 1164

原创【学习前端第七十课】Vue3 script setup语法糖

语法糖并不是新增的功能模块，它只是简化了以往的的必须返回（return）的写法，并且有更好的运行时性能。在setup函数中：所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。你不必担心setup语法糖的学习成本，他是组合式API的简化，并没有新增的知识点。你只需要了解一些用法和细微的不同之处，甚至比之前写setup()还要顺手！使用方式极其简单，仅需要在script标签加上setup关键字即可。

2024-01-22 16:20:50 575

原创【学习前端第六十九课】在vue3/vue-router4下使用keep-alive

假设A、B页面是缓存，C页面是不需要缓存。A、B间跳转不会有问题，A、B跳转C页面再返回时候缓存会失效一次。总结就是非缓存和缓存页面跳转会造成缓存的页面失效，只有再跳转缓存的页面才恢复正常。//监听路由变化，把配置路由中keepAlive为true的name添加到include动态数组中。官方推荐的方式是只有keep-alive模式，却没有不需要keep-alive的使用方法。这样会造成所有页面都没有缓存，还不知道原因。这样可能和我们所预期的效果会不太一致。//使用动态include解析。

2024-01-22 16:20:36 375 2

原创【学习前端第六十八课】Vue3.0更新对比

API 已重命名，以便更好地与组件生命周期保持一致bind →inserted →mounted:新的！这是在元素本身更新之前调用的，很像组件生命周期钩子update → 移除！有太多的相似之处要更新，所以这是多余的，请改用updatedupdated新的与组件生命周期钩子类似，它将在卸载元素之前调用。unbind ->unmounted//main.js// 创建自定义指令// 指令也拥有一组生命周期钩子// 1.在绑定元素的父组件挂载之前调用},})

2024-01-21 10:33:03 1052

原创【学习前端第六十七课】组件的插槽

组件的插槽组件本身是一个容器，也是一个vue对象（data,methods…）,也是一个虚拟DOM（html标签，但是这些html标签不是既定一些html标签，而是我们创建的所以也叫虚拟标签）1、普通插槽组件本身是一个容器，这个容器本身是空的，当我峨嵋你把需要封装的html标签装进这个组件之后，我们可以认为这个组件的内部的容积就直接塞满了，那就意味着，无法再向组件内部添加新的html结构，但是我们想在每次一个调用组件的时候，渲染一点个性化的东西进去，这个时候我们需要给组件去做一个预留空间，这个预留空间

2024-01-21 10:32:30 989

原创【学习前端第六十六课】 vue脚手架

然后另外一个命令，build我们现在暂时不用，这个是我们在vue项目制作完成之后，才会执行的一个命令，它会把我们做好的vue项目直接打包成一个单页面，我们只需要把它打包好的东西丢给运营就🆗了。这个文件和我们之前node中的package.json文件的性质是一样的，都是项目的配置文件里面记录当前项目的配置信息，这里我们主要看其中的scripts部分。启动webpack开启运行环境 -------> 执行main.js入口文件 ------------> 渲染App.vue。1、通过图形界面来创建。

2024-01-21 10:31:53 357

原创【学习前端第六十五课】vue框架中的key详解

我们的内部状态使用索引作为key，所以在变化之前，vue记住key为1的这一项是勾选的，然后下次再重新渲染的时候，vue记住的状态是索引值1，所以渲染出来的结果也就是勾选的key值为1的哪一项，但是实际渲染index对应的数据已经改变了。它在执行对比的时候，发现每个key都改变了，它就又重新渲染了4个，但是本来应该就渲染1个就够了，也就是说上面的代码极大的消耗了浏览器性能，所以如果要执行的是动态渲染，我们不推荐使用index作为key。这就是一个静态渲染，因为stuList数组在后面的操作种不会发生变化。

2024-01-21 10:31:38 997

原创【学习前端第六十四课】vue过渡动画的使用

在vue内部是可以直接设置的，vue内部自带动画管理机制，在vue的内部是可以直接执行过渡效果的，它内部封装了一个叫做 transition 组件，可以让元素在进入 / 离开的时候执行特定的过渡效果。在上面的代码当中，我们通过改变isShow的值，从而控制box的显示与隐藏，那么，如恶化让盒子在显示隐藏的过程中执行特殊效果。在vue动画种，我们通过固定的类名，来给需要添加过渡动画的组件，赋予以上我们讲的4种状态下的样式。上面的样式代码可以做进一步简化，因为我们设置的很多状态下的样式是一样的。

2024-01-21 10:31:18 1061

原创【学习前端第六十三课】vue-router路由

vue-router路由之前我们讲过vue的两个核心点1、数据驱动页面2、虚拟DOM开发（组件化开发）vue是一个渐进式的框架，所以会有很多的第三方插件框架也可以跟vue本体进行扩展组合，其中一个比较流行的就是vue-router因为vue是一个渐进式的框架，所以有很多第三方的插件围绕它进行扩展，同时还有一些vue官方的插件，这些插件和vue结合之后，我们就叫vue全家桶前端路由之前我们学习express，在这个框架的学习中我们已经接触过了路由，路由其实就是控制url访问的一种技术手段，所以前

2024-01-21 10:31:00 832

原创【学习前端第六十二课】vue组件的生命周期

vue组件的生命周期我们知道要使用vue，一开始是需要创建的，也就是new一个vue出来（包括我们创建的局部组件），在这个创建的过程当中，到底经历了哪些过程，这个过程就是我们需要掌握的vue组件的生命周期生命周期生命周期（lifeCycle）指的是从出生到死亡的过程，vue的生命周期就是从创建到销毁的过程在整个过程中分为4个阶段创建create -----> 挂载mount -----> 更新 update -----> 销毁 destroy同时这4个阶段还被分成了8个过

2024-01-21 10:30:30 818

原创【学习前端第六十一课】vue组件化开发（二）

先来看个例子在上面的案例中，我们向子组件传递了一个数据：son-name=“son” , 子组件拿到后就渲染在了页面上，所以数据是由父组件传递给子组件的1、父级组件如果改变了son这个数据，子级是否会改变？2、子级能不能改变父级传递的son？结论二：子级不能改变父级传递过来的数据，并且还会带一个报错，因为破坏了数据的统一性在上面的两个结论中，我们可以到数据流是一个单方向的，只能由父到子，不能由子到父在某些场合我们要做一个数据流的改变，这个我们就需要去破坏数据流的单向性，从而能够让数据互传，这个时候用

2024-01-21 10:30:09 905

原创【学习前端第六十课】vue组件化开发

vue组件化开发现在流行的MVVM数据驱动页面的框架里面（vue/react/angular）,都是支持组件化开发的，组件化其实就是虚拟DOM开发现在存在的问题<body> <div id="app"> <ul> <li>zhangsan</li> <li>lisi</li> <li>wangwu</li&

2024-01-21 10:29:52 800

原创【学习前端第五十九课】vue基础（二）

vue样式class绑定class本身也是一个标签的属性用来定义标签的类名，但是在vue中class比较特殊，所以我们单独拿出来讲vue里面的class绑定一般是一个动态绑定，依然执行的是v-bind:class，简写 :class 关键在于这个属性的值有两种绑定方式1、数组绑定<body> <div id="app"> <ul> <li v-for="(item,index) in stuList" :key

2024-01-20 11:32:15 890

原创【学习前端第五十八课】vue基础

目前vue最新版是3.2.41，但是目前我们还是使用稳定的vue2版本下载好之后，直接在dist文件夹里面取赵vue.js和vue.min.js在上面的执行数据渲染的绑定过程中，我们使用了很多v-xxxx，这些都是vue指令1、v-text2、v-html3、v-model4、v-if5、v-else7、v-for8、v-show9、v-bind上面的指令都vue自带的指令，我们还可以根据自己的需求来写一些自己的指令，通过Vue.drective来定义，这里我们先不做讲解。

2024-01-20 11:31:13 357

原创【学习前端第五十七课】typescript进阶

类型别名其实就是我们可以通过type关键字自定义一个类型名称，并将自定义的类型指向某一个具体的数据类型举例：字符串字面量类型同样也是通过type来进行定义，可以约束某一个变量的值只能为type定义所约定的某几个值举例：元组之前在声明数组的时候，我们会指定数组内的元素类型，但是在声明时我们会约定数组内元素的类型，而如果说数组类的元素数据类型不同，我们可以把类型指定为any，但是any类型之前我们也说过其在数组中使用的问题，所以我们这里采用元组枚举类型通过enum可以创建枚举类型的数据，其主要

2024-01-20 11:27:13 881

原创【学习前端第五十六课】认识TypeScript

/报错age?:number;

2024-01-20 11:25:10 904

原创【学习前端第五十五课】 yarn的使用

说明命令简写安装包npm install 包名npm i 包名安装生产环境包npm install 包名 --savenpm i 包名 -S安装开发环境包npm install 包名 --save-devnpm i 包名 -D删除包npm uninstall 包名npm un 包名只安装生产环境包只安装开发环境包。

2024-01-20 11:08:29 378

原创【学习前端第五十四课】webpack

我们可以把webpack看成是一个项目经理，它本身不干任何事情，它如何向要干事情会找第三方的人（第三方模块插件）来完成它可以将很多松散的资源打包到一起，可以实现按需加载，同时在打包的过程中还可以加载第三方插件来实现一些特殊效果，比如提高css兼容性，将ES6的代码转换成ES5的基于上面一套我们完成了webpack的配置，但是webpack的配置其实可以分为两套来看，一套是针对生产环境的，一套针对开发（测试）环境，这两套配置代码90%都是相同的，主要不同点。

2024-01-20 11:07:11 750

原创【学习前端第五十三课】SASS可编译的CSS语言

SASS是标准，SCSS是语法SCSS的本质就是SASS+CSS，他使用css的语法来完成sass的功能相当于在css的原有的基础上面扩展了4个基础核心点$a:red;一般来说，我们为了更好的理解，我们会用小括号将值包裹起来//对象的定义上面的代码进行遍历，最终生成如下结果之前的数组定义是一样的，数组的定义就是set的定义之前的对象的定义是一样的，对象的定义就是map的定义.box1{

2024-01-20 11:04:27 821

原创【学习前端第五十二课】数据库操作的封装

roomInfoService.js -----继承-----> baseService.js -------继承------> DButils.js。3、stu_info 学生表 ------------------------> stuInfoService.js。2、room_info 房间表 -----------------------> roomInfoService.js。我们在中间添加一层baseService，提供一个基础服务，以达到项目的低耦合状态。

2024-01-20 11:02:52 797

原创【学习前端第五十一课】 Express框架

CORS是一个w3c的标准，全称资源跨域共享，允许浏览器向服务器跨域请求，从而解决了ajax只能同源使用的限制它是通过服务器添加一个特殊的来告诉客户端跨域的限制，如果浏览器支持CORS，并且判断Origin通过的话，就会允许Ajax发起跨域请求。

2024-01-20 11:02:16 932

原创【学习前端第五十课】使用第三方模块去发送邮件

它的结果是一个数组集合，在这里集合里面有三个对象，这三个对象我们可以认为就是对应的excel表格当中的工作表，里面的name属性就是单独一个工作表标题，data里面就是当前工作表内的数据，然后每一个工作表形成一个对象，让后多个工作表对象组成一个excel数组，我们就认为这个excel数组其实就整个excel文件。在使用node开发项目时候会涉及用户的注册，在这个环节里面，用户需要填写自己的邮箱，为了验证邮箱的真实性，我们一般会向邮箱内发送一个验证码或者是一个验证链接，让用户自己打开邮箱去接收。

2024-01-20 11:01:34 951

原创【学习前端第四十九课】 nodejs第三方模块

在node开发中使用npm init之后会生成一个package.json的文件，这个文件主要是用来记录当前项目的详细信息，它还会将我们在项目中所要使用到的包，都会详细记录在这个文件当中，方便以后的版本迭代和项目移植的时候会更加方便，防止在后期的项目维护当中误删除了一个包导致项目不能正常运行，初始化还有一个好处，就是在进行项目传递的时候步需要将项目的依赖包一起发给对方，对象只需要在接收你的项目之后执行npm init 旧可以将项目依赖全部下载到项目内。

2024-01-20 11:01:02 897

原创【学习前端第四十八课】 nodeJS

按照常规开发思维来讲，前端是不需要学习后台的具体知识，只需要掌握一些基本后端原理就行，但是现在的主流开发模式已经趋向于前后端分离开发，在这种模式下，后端不需要负责前端的事情，但是前端却要掌握一些后端的知识，比如SQL语句，一些简单的数据库设计，http请求原理等等…在之前我们的学习的ES6中，使用的是ESModule的模块化规范，这是ES的通用规范，基本90%的js都是遵循这个规范的，但是我们学习的node不是的，它执行的是CommonJS规范。

2024-01-20 11:00:23 796

原创【学习前端第四十七课】ES6异步编程与模块化开发

在之前的ES6里面，我们已经使用Promise来完成我们的异步操作，通过resolve和reject来实现状态改变，进而调用then或catch方法，但是这两个方法内部任然还是由回调，所以ES7又将这个东西做了个升级，添加两个新的关键字 async和await，它是一对，有await就一定又async。1、如果直接放在HTML文件中，这个时候我们根本不知道这个JS文件被谁引用了，因为只要放在了HTML里面，任何js文件都可以使用，这样会出现引用关系不清晰的情况。2、如果万一没有了HTML文件呢？

2024-01-20 10:58:39 838

原创【学习前端第四十六课】ECMAScript6 (三)

生成器函数在定义的时候只需要在函数名前面添加一个星号即可，生成器的函数内部可以进行多次返回，我们把这个返回的过程就称之为迭代的过程生成器函数 --》执行 —》迭代器接口在生成器函数内部，如果要进行多次返回，我们需要使用yield，它可以多次返回//生成器函数可以返回多个值出来//生成器函数如果要返回多个，则不能使用returnyield "a";yield "b";yield "c";return "张三"//生成器函数运行以后，得到迭代器。

2024-01-20 10:58:13 839

原创【学习前端第四十五课】ECMAScript6 （二）

从结果上说是不能，因为就出在数据解构上面，我们可以打印我们new出来的对象会发现，不管是自己本身的属性还是继承来的属性统一都在对象的最外层，但是继承的方法，和自己的方法却放在原型当中，自己的方法就放在自己的原型里面，继承来的方法放在父级的原型里面，而super是指向父级的，所以我们只能通过super的指向调用放在父级原型中的方法，但是继承来的属性并没在父级的原型里面，所以就没办法用super来调用。上面的代码里面，我们让Student继承自Person，同时两个构造函数都没有参数，所以都省略了构造器。

2024-01-20 10:57:27 825

空空如也

空空如也