-
vue中的keep-alive问题（2）
1：keep-alive生效的前提，组件都要声明一个name属性，并确保唯一性 2：A/C跳转B页面，返回A/C,缓存C二级路由，则需要同时缓存一级路由A，否则缓存不生效,设置缓存需要写在beforeRouteEnter里面 beforeRouteEnter(to, from, next) { next(vm => { //详情->私募待办(销毁)->我的理财之后，再走我的理财-…- 5
- 0
-
vue中使用keep-alive的问题（1）
问题：A页面--->B页面，A页面 --->C页面。其中B页面返回A页面时，A页面不刷新。C页面返回A页面时，A页面刷新。 解决思路：应该都能想到如果想要缓存应该要使用keep-alive，问题是在C返回A页面的时候A页面刷新怎么处理。那么我们有两个解决思路： 就是在离开A进入C的时候，销毁组件A,那么再返回A就是新组件， 在C返回A的时候重置A的数据 回顾一下组件内的路由守卫： be…- 1
- 0
-
react学习（10）
1：Redux 集中状态管理工具，可以独立运行。 使用步骤 1.定义一个reducer函数（根据当前想要做的修改返回一个新的状态） 2.使用createStore方法传入reducer函数，生成一个store实例对象 3.使用store实例的subscribe方法订阅数据的变化（数据一旦变化，可以得到通知） 4.使用store实例的dispatch方法提交action对象触发数据变化（告诉redu…- 1
- 0
-
react学习（11）
1：Redux管理数据流程梳理 为了职责清晰，数据流向明确，redux把整个数据修改的流程分成了三个核心概念，分别是state,action,reducer 1.state一个对象，存放着我们管理的数据状态。 2.action一个对象，用来描述你想怎么改数据。 3.reducer一个函数，根据action的描述生成一个新的state。 image.png 2：在react中使用redux，官网要求…- 1
- 0
-
react学习（12）
提交action传参 在reducers的同步修改方法中添加action对象参数，在调用actionCreater的时候传递参数，参数会被传递到action对象payload属性上 import {createSlice} from '@reduxjs/toolkit' const counterStore = createSlice({ name:'counter&…- 0
- 0
-
vue中使用@scroll不生效的问题
问题描述：给一个div绑定@scroll，发现滚动的时候不生效 问题解决：可能会奇怪，明明页面滚动了呀，为什么没有触发scroll事件呢，大概率是滚动事件不是div触发的，大家可以写成window.addEventListener('scroll',function(){})就会生效。 解决办法： 1:如果可以接受使用window.addEventListener，那么如果你发…- 0
- 0
-
使用npm install -g pnpm的时候报错
问题：使用的是nvm管理node，切换node版本后，使用pnpm install -g pnpm报错mkdir,就是没有权限的意思。如果是window系统使用管理员权限就可以。云桌面，则需要修改一下权限 Linux更改文件夹及其下级文件权限 sudo chmod -R 777 /opt/nvm/versions/node- 1
- 0
-
react学习（8）
1：useEffect useEffect是一个react hook函数，用于在react组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送ajax请求，更改dom等等。 语法 useEffect(()=>{},[]) 参数1是一个函数，可以称之为副作用函数，在函数内部可以放置要执行的操作。 参数2是一个数组（可选项），在数组中放置依赖项，不同依赖项会影响第一个参数函数的执行时机。当…- 0
- 0
-
react学习（9）
1：自定义hook函数 概念：自定义hook是以use打头的函数，通过自定义hook函数可以实现逻辑的封装与复用。 规则 1:只能在组件或者其他自定义hook函数中使用。 2：只能在组件的顶层调用，不能嵌套在if,for,或其他函数中。 可以使用json-server这个工具插件来mock数据 2：拆分组件：App组件为“智能组件”负责数据获取，item作为"UI组件"或者叫做…- 0
- 0
-
react学习(5)
1：受控表单绑定 概念：使用react组件的状态（useState）控制表单的状态。 image.png const [value,setValue] = useState(''); setValue(e.target.value)} /> 2: react中获取dom(非受控的方式) (1):使用useRef生成ref对象，绑定到dom身上。 (2):dom可用时，通过…- 2
- 0
-
react学习（6）
1: 组件通信 组件通信就是组件之间传递数据，根据组件嵌套关系的不同，有不同的通信方法。 image.png 父传子 1：父组件传递数据；在子组件标签上绑定数据 2：子组件接收数据；子组件通过props接收数据 function Son(props){ return {props.name} } function App(){ const name ='this is app name&…- 0
- 0
-
react学习（7）
1： 使用状态提升来实现兄弟组件通信 image.png 实现思路：借助“状态提升”机制，通过父组件进行兄弟组件之间的数据传递。父组件作为一个桥梁 //子组件A function A({getName}){ const name='A component name'; return getName(name)}>点击 } //子组件B function B({name})…- 0
- 0
-
i++和++i的区别
i++ 即后加加，原理是：先自增，然后返回自增之前的值 ++i 即前加加，原理是：先自增，然后返回自增之后的值 示例 let a=1; let b=a++; //a:2,b:1 let a=1; let b=++i; //a:2,b:2- 0
- 0
-
webpack学习（2）性能优化
性能优化 开发环境性能优化：优化打包构建速度；优化代码调试。 生产环境性能优化：优化打包构建速度；优化代码运行性能。 devServer配置，可以让开发环境自动化。也算开发环境优化 devServer:{ contentBase:resolve(__dirname, 'build'),//项目构建后路径 //压缩 compress:true, open:true,//自动打开浏…- 2
- 0
-
react学习（1）
1：创建react项目 npx create-react-app react-basic 2：jsx 含义：是javascript和xml（html）的缩写，表示在js代码中编写html模版结构，是react中编写UI模版的方式。 优势：（1）HTML的声明式模版写法；（2）js的可编程能力 本质：jsx并不是标准的js语法，是js的扩展语法，浏览器本身不能识别，需要通过解析工具（babel）解析…- 0
- 0
-
react学习（2）
1：事件绑定 语法：on+事件名称={事件处理程序}，整体上遵循驼峰命名 function App(){ const clickHandler=()=>{ console.log('按钮被点击了'); } return 按钮 } 获取事件对象参数 function App(){ const clickHandler=(e)=>{ console.log(e); } …- 0
- 0
-
react学习（3）
1: React中的组件：首字母大写的函数，内部存放了组件的逻辑和UI视图，渲染组件，只需要把组件当成标签书写即可。 2：useState 定义：一个react hook函数，允许我们像组件添加一个状态变量，从而控制影响组件的渲染结果。 和普通的JS变量不同，状态变量发生变化，组件的视图UI也会发生变化（数据驱动视图） const [count,setCount] = useState(0); u…- 0
- 0
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×