M78_国产007-CSDN博客

原创 git代码回退

图例说明reset是彻底回退到指定的commit版本，该commit后的所有commit都将被清除，包括提交历史记录；revert仅仅是撤销指定commit的修改，并不影响后续的commit，但所撤销的commit被后续的commit修改了同一地方则会产生冲突；reset执行后不会产生记录，revert执行后会产生记录；reset执行后无法再次恢复，revert执行后因为不会清除记录，并且会产生新纪录，所以文件不会丢失，你可以多次执行revert恢复到某次改变之前的状态；

2024-03-11 18:26:24 416

原创前端存储方案

这三个浏览器兼容性最高的三种前端储存方案。

2024-03-11 18:23:56 891

原创 hook之useRoducer

useReducer用最简单的话来说，就是允许我们在函数组件里面像使用redux一样通过reducer和action来管理我们组件状态的变换。我们可以通过useContext配合实现一个函数组件中的redux。useReducer的标准写法：)参数解析：state 通过解构得到当前组件的状态；dispatch 是用来触发某些改变state的action而不是直接设置state的值，至于不同的action如何产生新的state的值则在reducer里面定义；

2022-10-17 22:37:34 542 1

原创 hook之useContext

useContext这个hook，我们通过翻译就可以大致知道它的用途，译为使用上下文。context上下文我们在前面就已经使用过了，它是一种用于跨组件之间的传值的技术。我们学过Context，再来学习useContext这个hook就会变得简单很多。

2022-10-15 01:03:33 1399

原创 hook之useMemo

2、useCallback 缓存的结果是函数，主要用于缓存函数，应用场景如需要缓存的函数，因为函数式组件每次任何一个state发生变化，会触发整个组件更新，一些函数是没有必要更新的，此时就应该缓存起来，提高性能，减少对资源的浪费；我们通过父组件传来的值在isg1函数中得到一个结果，当父组件传来的值不变时我们就没有必要去从新执行这个函数得到结果，直接复用就好。这个hook的作用有点像我们以前学习的计算属性一样，它会缓存我们上次的结果，只有当特定的属性改变时才从新计算。其余情况直接取前面运行时缓存的值。

2022-10-14 19:58:32 1549

原创 hook之useCallback

当我们在函数组件里面调用useCallback函数的时候，React背后要做一系列计算才能保证当dependencies不发生变化的时候，我们拿到的是同一个函数，因此如果我们滥用useCallback的话，并不会带来想象中的性能优化，反而会影响到我们的性能。点击按钮会从新渲染页面，副作用函数依赖于fn函数只有当fn函数变化时才会触发副作用函数并打印，按理来说我们并没有修改fn，但是副作用函数还是运行了，那么就证实了从新渲染页面内嵌的函数会被从新定义。在函数组件中，在函数体内我们常常定义一些内嵌的函数。

2022-10-14 19:07:21 896

原创 hook之useRef

这个Hook的作用是获取我们的元素节点的，就跟我们以前学习Vue中的ref相似，在元素节点中ref绑定，然后this.$refs对象中就可以获取我们绑定ref的元素。在React中，我们通过useRef()来实现。

2022-10-14 15:25:28 799

原创 hook之useEffect

在Hook出来之前，如果我们需要在组件中进行副作用的话就需要将组件写成类组件，然后在组件的生命周期函数里面写副作用，这其实会引起很多代码设计上的问题，Hook出来之后，开发者就可以在函数组件中使用useEffect来定义副作用了。useEffect(() => { return () => { } }, []) //组件第一次渲染执行,组件移除时触发clean函数。第三个参数（可选）是副作用函数的return的函数，并在组件下一次渲染前执行，一般用于清除副作用影响。useEffect()有三个参数，

2022-10-13 23:14:06 648

原创进入hook的学习——useState

这些hook就有点像类组件中的生命周期钩子，官方来帮我们调用，因此在函数组件内我们能够实现类组件的生命周期的功能。但是它们在本质上还是有区别。React Hook是React 16.8版本之后添加的新属性，用最简单的话来说，React Hook就是一些React提供的内置函数，这些函数可以让函数组件和类组件一样能够拥有组件状态（state）以及进行副作用（side effect）。），这是因为函数组件每次执行的时候都会生成新的函数作用域所以同一个组件的不同渲染（render）之间是不能够共用状态的。

2022-10-13 21:51:34 707

原创利用上下文对象——传值

很多优秀的React组件都通过Context来完成自己的功能，比如react-redux的< Provider />，就是通过Context提供一个全局态的store，拖拽组件react-dnd，通过Context在组件中分发DOM的Drag和Drop事件，路由组件react-router通过Context管理路由状态等等。如果要Context发挥作用，需要用到两种组件，一个是Context生产者(Provider)，通常是一个父节点，另外是一个Context的消费者，通常是一个或者多个子节点。

2022-10-13 19:54:04 654

原创 React中函数组件和类组件解决无效渲染

组件是构成React视图的一个基本单元。有些组件会有自己本地的状态(state), 当它们的值由于用户的操作而发生改变时，组件就会重新渲染。在一个React应用中，一个组件可能会被频繁地进行渲染。这些渲染虽然有一小部分是必须的，不过大多数都是无用的，它们的存在会大大降低我们应用的性能。即简单理解为，无效渲染就是一些状态值的改变我们没有必要也发生渲染，例如我们程序中设置的值前后相等的，但是执行了setState后还是会发生渲染，render函数即会被调用。

2022-10-13 18:54:42 1884

原创缓存相关知识点

如果协商缓存没有命中，浏览器从服务器加载资源时，Last-Modified的值会被重新更新并加在response的header上返回给客户端，下次请求时if-Modified-Since的值就会启动上次请求返回的Last-Modified的值。2.1、no-cache：不使用本地缓存，需要使用协商缓存。当浏览器再次向该资源发起请求时，首先会去获取该资源第一次请求时缓存的响应报文的header信息，判断是否命中强缓存和expries信息，若命中，直接从缓存中获取资源信息，本次请求根本就不会与服务器通信。

2022-09-25 00:25:07 790

原创 TypeScript的基础类型

TypeScript我们简称ts,它有12种基础类型：布尔型、数字、字符串、数组、元组、枚举、any、void、null、undefined、never、object。ts的一大特点就是具有类型系统，在声明变量时指定类型。

2022-09-23 18:36:08 1788

原创 css中的也有变量

css变量的声明与我们在JS语法环境中正常声明一个变量的规则相同，可以是字母、数字、下划线、中划线的组合，但是不能数字打头。在我们声明的变量前面加上两个减号（--）就形成了，符合标准的css变量如：div {}注意：属性名严格区分大小写还有一个特点：计算时有效性，自定义属性值可以是任何内容，就算是不是css内有效的数值，只要属性名符合要求，在使用自定义属性的地方，最终计算结果是有效的就行了。

2022-09-22 20:40:34 655

原创 Pinia相关知识点

Pinia 是 Vue 的存储库，它支持vue2和vue3。因此在写项目中，我们可以使用pinia代替vuex,就我个人而言，我觉得pinia使用起来方便的多。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

2022-09-22 17:25:21 1099

原创 Vue3.0中配置公共数据并完成axios网络请求工具的全局配置

vue2.0使用公共配置时一般绑定在原型上无论是否使用都在每一个组件的this链上,这样的设计不太友好,因此我们在vue3.0中为我们提供了专门公共数据配置的方式: globalProperties getCurrentInstance。rewrite: (path) => path.replace(/^\/api/, '/'), // 路径重写。target: 'http://127.0.0.1:7001', // 代理的目标地址。// port:"5173",//默认可以不写。

2022-09-21 22:59:11 1665

原创组合式API之isRef、toRef、toRefs

前面我们学习了ref这个API，它的作用是将数据变成响应式数据。今天这学习与之相关的三个API。

2022-09-21 21:48:16 693

原创 Vue3.0种中新增的teleport和suspence标签

我们通过vue创建的项目，最终的html文件，只会有aap那个div标签，所有组件都是基于这个div显示。然而，有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置。这个标签的用途是对异步组件加载时的一种效果优化，其实在vue2.0的时候，高级异步加载组件也可以实现这个效果，但是有点复杂就没有什么人用。可以看到在teleport中是可以获取setup中的数据的，我们想要添加的内容也到了app2这个div的内部。

2022-09-21 18:06:30 1141

原创 setup中使用watch

有关引用数据还有一个问题，当监听reactive处理过的引用数据内的一个引用数据时，这时它不具备默认深度监听，需要手动开启。并且如果要监听某个引用数据的属性，watch的第一个参数不再是写对象的引用，而是要写为。不过当监听的是引用数据时，有几点需要注意：1、处理函数获取不了旧值，我们打印出来的跟新值一样，这是vue3.0的一个bug；，用法也是：watch("数据名"，处理函数，配置对象（可省）)，用法：watch("数据名"，处理函数，配置对象（可省）)当点击按钮，a的value值-37，被监听到。

2022-09-20 18:04:27 4453

原创在setup中使用计算属性

在学习vue3.0后，我们一般都不再单独配置data、methods、computed、filters和生命周期函数等，我们一般给script标签行内加上setup,使整个标签环境都为setup函数环境，然后在这个环境管理全部配置。data和methods内的数据和方法，我们直接在setup函数环境下声明即可。但是计算属性computed需要缓存它所监控的数据的结果，当页面第一次渲染后，只有计算属性内所使用的数据发生变化时才会再次触发计算属性的方法。

2022-09-16 22:53:10 1346

原创 vue3.0的setup函数以及解决其内的数据不是响应式数据的问题

1.这个函数内部的变量/函数是局部的；2.如果想要使用其的数据或函数，需要return出来，这个就好比我们学的闭包。这个函数的返回值可以被当前组件的任意地方使用；3、但是函数内不可以使用外部的数据或函数，即setup内不能使用this。4、setup返回的对象中的数据和data中的数据同名了 setup优先级更高5.setup在组件加载期间只会运行一次setup还有一个语法糖，直接在script标签行内写setup。

2022-09-16 21:25:43 4035 1

原创进入vue3.0之前了解一下新的打包工具vite

在前面我们已经将vue2.0的知识差不多学习完了，今天我们来进入vue3.0的学习。vue3.0作为一个大版本的升级，使用起来也是做了很多改变，接下来我们一点一点的来学习。在学习vue3.0之前，我们学习一个新的打包工具vite.。

2022-09-16 19:43:41 1918

原创 Vue的仓库vuex

Vue.js是一个渐进式的框架，是一个分层的设计模式。一共分为五层，核心库为基础，在这基础上添加组件系统、客户端路由、大规模状态管理和开发环境。其中大数据状态管理对应的技术就是vuex，它是由Vue框架开发团队提供的一个插件。能够在vuex中集中管理共享的数据，易于开发和后期维护；能够高效地实现组件之间的数据共享, 提高开发效率；存储在 vuex中的数据都是响应式的，能够实时保持数据与页面的同步。

2022-09-14 00:27:58 940

原创路由守卫相关知识点

所有守卫的执行顺序：beforeRouteLeave 、beforeEach 、 beforeRouteUpdate 、beforeEnter 、 beforeRouteEnter 、 beforeResolve 、 afterEach出发路由，预备从当前组件离开，判断路由变化，判断组件是否重用，判断新路由初始化，判断组件初始化，路由与组件初始化完毕，路由组件重定向完毕。

2022-09-13 19:43:19 344

原创 Vue框架中路由的三种模式

history 底层切换组件的方式是使用的H5的window.history的技术，其中history对象提供了两个方法pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。当地址栏的history状态发生变化时切换了router-view渲染的组件来"欺骗"用户到达切换新网页的效果,需要后端配合。

2022-09-11 03:23:00 1476

原创 Vue中的路由嵌套

我们还可以做一个优化，在home路由对应的组件加载到页面时，我们需要默认加载一个子路由时，我们需要做一个重定向，在home路由中redirect:"重定向的子路由网址"。路由嵌套，即在当前路由中注册子路由中，形成父子结构，显示子路由对应的组件，需要网址在父路由的pathname下才能实现，后面再具体演示。子路由内也可以注册它的子路由，一直下去就可以形成一个庞大的“家族”。这个时候子路由已经注册好了，子路由的path路径都是在父路由的基础下创建，我们再在对应引入组件的位置创建好组件。

2022-09-11 02:06:41 2605

原创路由之间的转跳及传参

2、编程式转跳，通过vue对象的原型上的$router对象的push方法，$router对象是我们配置路由插件时，Vue.use(VueRouter)给vue对象的原型添加的，在任何组件中都可以直接使用。点击跳转到/xthis.$router.push({path:"/x",query:{参数1:'aa',参数2:'bbb'}})

2022-09-11 01:02:14 1354

原创认识Vue中的路由

vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 vue-router就是专门做的功能,它是一个单独的技术,依赖vue。SPA（Single Page Application）单网页应用，整个网站只有一个页面。

2022-09-10 23:02:07 203

原创 Vue中的异步组件

一个网站的开发是由非常多的组件构成，如果当我们在打开网页的时候，突然一下子把这些所有的组件加载上来，这么多的请求全部同时开始请求，势必会造成网页打开很慢，使客户得到的是非常差劲的体验。：通过异步加载的组件会缓存起来，当你下一次再用到这个组件时，丝毫不会有任何的疑迟，组件很快会从缓存中加载出来。异步组件是对网站的一种优化，其意思就是懒加载，当我们需要用到那个组件的时候才去打包挂载到DOM树上。：用不到的组件不会加载，因此网页打开速度会很快，当你用到这个组件的时候，才会通过异步请求进行加载；

2022-09-09 00:49:56 894

原创 Vue中的动态组件和缓存组件

因此：我们运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，而写在created或mounted中其只会在首次加载该组件的时候起作用。，首先我们要明白为什么要引入缓存组件，我们在通过动态组件时切换组件时，被切换掉的组件会被销毁掉，如果我们之前在这个页面还有数据也会被丢失，很明显这在实际产品中是不被允许的。实现思路：创建三个子组件对应三个页面，导入父组件注册，当我们点击对应的按钮时将对应的组件名传入component标签的is属性中，实现对应组件在页面的渲染。

2022-09-09 00:13:55 872

原创组件之前的传值——中央事件总线bus

因为如果像以前那样在一个组件内定义一个事件，只能在引入该组件的组件中绑定事件，但是vm对象内所有组件都可以访问。我们一般给这个vm对象命名为$bus，即我们称为中央事件总线，我们可以把中央事件总线看做是一个桥梁，也可以把它看作是一个运输工具，它可以将两个组件的信息相互传输，传输完毕以后自己是不产生任何信息数值的。如果不再使用可以将事件解绑，绑定的事件不再会触发：this.$bus.$off("事件名"，callback解绑时触发)。1.触发x组件的a事件: x.$emit("a事件",参数...)

2022-09-08 22:12:47 362

原创组件之间的传值——provide和inject

在需要获取数据的组件内直接用inject注入到当前组件中，不管你处于那一层都能够获取到，inject属性的值为一个字符串数组，或一个对象，对象的情况可具体查看官方API。组件之间的多层传值我们前面学习过了通过$attrs和$listeners，今天我们来学习一个更为简单的方法利用组件对象的属性provide和inject,它们与data、methods这些属于同级。但是它有一个缺点就是数据不是响应式的，如我在爷爷组件方法内修改提供的值，但是子组件中获取的值不会改变。父亲组件：可以被注入提供的数据。

2022-09-08 20:00:31 1195

原创多层组件传值$listeners/$attrs和获取组件$ parent/$root/$children/$refs

在组件中传值，在父子级组件很好就实现了，但是如果第一层的组件向第六层或者更高的层次传值时，我们就非常难办了，在我们以前学习的知识来实现。可以在组件或者原生元素绑定ref属性(类似于id)，在通过$refs来获取对应的组件或元素节点，只会在组件渲染完成之后生效，并且它们不是响应式的。尽管框架为我们提供了多层组件传值的方法，但是我们还是要一层一层的去配置v-bind="$attrs"和v-on="$listeners"。我们来三个组件来演示父组件向孙组件传数据，孙数据向父组件传数据。

2022-09-07 23:44:28 479

原创难点组件之间的传值——反向传值

在这之前我们已经学习过了组件的属性，它可以用于组件的传值，将父组件的数据传给子组件。但是它只能实现单向的组件传值，还不能实现子传父。在此基础上，我们今天来研究组件之间的反向传值。

2022-09-07 22:22:55 454

原创 Vue框架中的面试相关问题

当数据发生变化以后: 当状态(数据)变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异，把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch)，视图就更了。1、组件中的data是函数的设计是因为组件被复用时，data数据源才不会共用，每次复用该组件生成的data数据源都是相互独立的，不会受到相互之间的影响；拿属性传值为例，父组件能够向子组件传值，父组件传的值改变子组件接收的值对应改变，但是子组件中修改传来的这个值，并不能够修改父组件的这个值。

2022-09-07 20:20:02 171

原创在Vue官方提供的脚手架中做网络请求

首先我们需要在脚手架中下载axios包用于我们做网络请求：npm i axios然后我们可以在两个地方做网络请求，一个是在我们的组件中，另外一个是在main.js入口文件做网络请求。在做网络请求前，我们先在egg框架中写一个数据接口并启动服务器，我们在vue脚手架中去请求数据。

2022-09-07 00:54:55 493

原创 Vue中自定义事件

事件我们并不陌生，以前我们都是用的框架帮我们配置好的事件，我们称为原生事件。通过v-on:或者@绑定事件，事件触发时执行对应的程序。今天我们自己来创建一个事件，我们要先知道事件的三要素：事件源 target 、事件类型type 、监听器handler在自定义事件中，事件源就是我们设置的组件，事件类型我们自己命名，监听器就是事件绑定的那个函数，我们想要完成一个组件的完成，我们需要在组件中用到vm对象原型上的一个方法：this.$emit("事件类型名","要给触发的事件的函数handler传入值(可省)")我

2022-09-06 21:00:28 895

空空如也

空空如也