ddwddw4的博客

如何获取上一轮的 props 或 state？方法1： 利用ref（主要原理是利用ref的稳定性，可以当个全局变量去使用（只会第一次初始化的时候生成，后面不会改变），加上useEffect的功能（在页面渲染完成后成执行，类似setTimeout的功能））摘自官网https://zh-hans.reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables目前，你可以通过 ref来手动实现：funct...

转载自https://blog.youkuaiyun.com/MFWSCQ/article/details/105136711useCallback 可以理解为useMemo的语法糖。主要区别是React.useMemo将调用fn函数并返回其结果，而React.useCallback将返回fn函数而不调用它。useCallbackconst memoizedCallback = useCallback( () => { doSomething(a, b);...

今天遇到一个很坑的问题，本地看怎么都没问题，线上之前也没问题。但就把master的代码重新发布了一遍，线上页面就挂掉了。找了半天才发现原因是react有个小版本更新了，导致了也没报错。具体原因是一个全局接口的loading文件是这样写的const Loading = { show: () => { // console.log('show'); const content = React.createElement('div', null, LoadSpin({ loadin

什么是微前端？微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆, 拆完后在合!2018年 Single-SPA诞生了， single-spa 是一个用于前端微服务化的 JavaScript 前端解决 方案 (本身没有处理样式隔离， js 执行隔离) 实现了路由劫持和应用加载。2019年 qiankun 基于Single-SPA, 提供了更加开箱即用的 API （ single-spa + sandbox + ...

结论：观察者模式和订阅模式很容易混淆一谈，其实订阅模式有一个调度中心，对订阅事件进行统一管理。而观察者模式可以随意注册事件，调用事件，虽然实现原理都雷同，设计模式上有一定的差别，实际代码运用中差别在于：订阅模式中，可以抽离出调度中心单独成一个文件，可以对一系列的订阅事件进行统一管理。这样和观察者模式中的事件漫天飞就有千差万别了，在开发大型项目的时候，订阅/发布模式会让业务更清晰！// 观察者模式 vue的依赖收集 // 被观察者 class Subject { .

大体思路主要分为模板编译、数据劫持、观察者（包含发布订阅）三个部分 模板编译：获取vm实例里html模板，针对其中的字符串模板{{}}及v-指令进行“翻译”，写出其底层相应操作 数据劫持：遍历vm实例里data对象，为每个数据绑定setter和getter，触发get时将当前元素watcher推入订阅者数组，触发set时，如果值更新则通知订阅者更新数据 观察者：给数据对应的元素绑定一个观察者实例，并推入订阅者数组，当数据更新时发布订阅通知元素数据变化具体模块MVVMconstr...

写在开头 不推荐你使用本文这个库，这个库会造成数据驱动断层（即你缓存后，切换回来，确实可以看到跟之前一样的dom，但是数据驱动此时失效了）,下周我会写另外一个可以不断层的库解析 ❝现代框架的本质其实还是Dom操作，今天看到一句话特别喜欢，不要给自己设限，到最后，大多数的技术本质是相同的。❞ 例如后端用到的Kafka , redis , sql事务写入 ，Nginx负载均衡算法,diff算法，GRPC,Pb 协议的序列化和反序列化，锁等等，都可以在前端被类似的大量复用逻辑，即便js和Nod

为什么要让用户选择是否离开页面 如果用户填写了很多数据此时 不小心点了其他a标签或者关闭了浏览器，不做判断，那么用户数据直接丢了 梳理需求 离开页面方式，被location.href,a标签,关闭浏览器或者当前tab页等... 需要判断数据是否跟初始化时一致（用户有无填写表单...） 用户选择离开就要继续逻辑，反之则不离开 正式开始 首先要知道一个事件:onbeforeunload,MDN的说明是：当浏览器窗口关闭或者刷新时，会触发beforeunlo

作者：anunwu链接：https://juejin.im/post/5dba938c6fb9a0205a011285来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。前言用vue-cli脚手架自动生成项目，里面的webpack配置苦涩难懂，于是下定决心想要系统学习webpack，写下此文来记录学习过程。一. webpack主要是做什么的？首...

作者：神奇的Aym链接：https://zhuanlan.zhihu.com/p/83079398来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。网上各种言论说 React 上手比 Vue 难，可能难就难不能深刻理解 JSX，或者对 ES6 的一些特性理解得不够深刻，导致觉得有些点难以理解，然后说 React 比较难上手，还反人类啥的，所以我打算写两篇文...

转载自https://www.jianshu.com/p/3a4dcd2b5b80关于setState异步同步的问题，以官方文件中较精确的说法：'它不是保证同步的"。那么什么时候异步，什么时候同步？答案是在React库控制时，异步；否则同步。如：setState方法写在constructor(props){ super(porps); this.state ...

作者：Lucas HC链接：https://www.zhihu.com/question/301860721/answer/724759264来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。谢邀。这个问题其实已经不少人邀请过，在我的 timeline 上悬浮了挺久。为什么现在突然愿意回答一下呢？2019 年已经行至年中，Vue 即将演进到 v3.0，...

1. 相当于url传值，在跳转页面this.props.location.query就可以截取到参数类似下图，当然也可以用传统的window.location.href去获取url然后在split去截取参数，再去处理。browserHistory.push(`/m/saas/regional/team/edit?id=${record.id}`);2. 用state去传参，就可以...

react jsx 中使用 switch case 示例在JSX的render html中无法写类似if，switch这样的语法，但是可以写函数或者三元表达式。所以可以利用一个立即执行的匿名函数来包装你的方法。<div> <span>适用平台：</span> <span>{(() => { switch (curren...

v-model我们可以使用 v-model 指令在 &lt;input&gt; (&lt;input&gt; 标签有多种类型，如 button、select 等等)及 &lt;textarea&gt; 元素上进行双向数据绑定。但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、chec...

在vue 开发项目中需要对路径进行设置。最简单的就是设置为绝对路径。找到项目中的build文件夹下的webpack.base.conf.js只需要看上面的配置图片即可。其实很简单的。...

最近我在使用vue全家桶开发一个移动端的页面，经过一个半月项目接近完工，处于优化的阶段。用过前端框架的都知道，spa(单页面应用)的一个最大的缺点就是首屏的加载时间比较长。缩小首屏载时间是一个重要的优化项，总结来主要有以下几种方式：1、尽可能的缩小webpack或者其他打包工具生成的包的大小 2、使用服务端渲染的方式 3、使用预渲染的方式 4、使用gzip减小网络传输的流量大小 5...

1.iview框架的modal组件中，只能用v-model，value去控制modal组件的开关。用v-if，v-show无效。 <Modal v-model="modal1" title="普通的Modal对话框标题" @on-ok="ok" @on-cancel="cancel"> <p&...

vue 再父子组件传值时，除了传统的父组件 ：属性去传值外，还可以使用 父组件v-model传值，子组件props['value']接收，而子组件也可以通过$emit('input',false)，去改变父组件中v-model 和 子组件中 value 的值 。<!--父组件--><template> <test v-model = "isSh...

刚开始使用Vue，里面的坑是一个接一个，今天就遇到一个axios POST传参的问题。因为后端要求是按表单提交的形式给他数据，我需要在请求中传递参数，然后按官方文档的格式开始操作，代码如下：axios.post('/user', {    firstName: 'Fred',    lastName: 'Flintstone'  })  .then(function ...

1.在config里面找到dev.env.js以及prod.env.js两个文件，分别写上定义的常量以及端口号，注意单引号双引号2. 在ajax的时候直接写    `${process.env.URL_PATH}/app/appLogin`   或者 url: process.env.URL_PATH+'/app/appLogin',   在实际开发中，使用vue ...

关于新版 vue-awesome-swiper 问题 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的swiper不会自动播放？ 为什么我的swiper没有css？ 使用 引入（前面的步骤和往常一样） npm insta...

案例环境通过vue-cli脚手架创建的vue项目在项目打包的时候遇到了背景图片路径出错的问题，经过谷歌一番，发现是在配置的时候对图片的限制大小过小造成的首先，出错点在url-loader上面。// url-loader配置// build/webpck.base.conf.js{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader:...

解决办法1： 一开始图片图片放在了assets文件夹下，img和background-image引用都用相对路径，build的时候设置assetsPublicPath: ‘./‘，打包出来后发现background-image的路径出现了问题 解决方法： 1、先在data里面导入这张图片，例如：bg:require(‘./openIndexBG2.jpg’) 2、...

最近项目中遇到这样一个问题，vue切换路由，页面到顶端的滚动距离仍会保持不变。 方法一： 监听路由// app.vue export default { watch:{ '$route':function(to,from){　　　　　　　　　　 document.body.scrollTop = 0； d...

在vue中引入jq用vue-cli脚手架工具构建项目成功后 当需要引入JQ，可用以下方法：  1.首先在package.json里的dependencies加入"jquery" : "^3.2.1"，  2.在终端里输入npm install jquery --save-dev  当然用 淘宝镜像 cnpm 也是可以的   注意：jquery 一定要小写 不然会提示...

本文能帮你做什么？1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完本文后对大家在阅读vue源码的时候会更有帮助&lt;本文所有相关代码均在git...

有时候在页面里做了某些操作以后，需要页面刷新一下来重新获取数据。试了几种方法，以下总结：1、this.$router.go(0)这种方法页面会一瞬间的白屏，体验不是很好，虽然只是一行代码的事2、location.reload()这种也是一样，画面一闪，效果总不是很好3、跳转空白页再跳回原页面在需要页面刷新的地方写上：this.$router.push('/emptyPage...

如题，如果直接这样去传参到computed里面的话，是报错的。:data="carCount(mes)"computed: { carCount (mes) { return XXXX }}但是有时候确实有这种需求，需要动态传个参给computed里面去计算，那可以用闭包去实现，如下：:data="carCount(mes)"computed: { carCo...

应用场景：1，每个请求都带上的参数，比如token，时间戳等。2，对返回的状态进行判断，比如token是否过期代码如下：axios.interceptors.request.use( config =&gt; { var xtoken = getXtoken() if(xtoken != null){ config.headers['X-Token'] =...

参考文档：https://github.com/yiminghe/async-validator1. 支持的基本类型<FormItem prop="UserId" :rules=" [ { required: true, message: '请选择一项', trigger: 'change',type:'number',m...

转载自 https://blog.youkuaiyun.com/crper/article/details/51902681 汇总下自己搞移动端遇到掉进去的坑，以及脱坑的方案；Flex兼容Flex想要兼容众多花样式手机，要注意以下这么些前缀要考虑2009~2012年的语法[webkit-box,flex,flex-box]少用复合属性，比如...

官网：https://aui.github.io/art-template/zh-cn/docs/index.html1. artTemplate 简洁语法模板（1）引入插件：&lt;script src="template.js"&gt;&lt;/script&gt;（2）编写模板：&lt;script id="test" type="text/html"&gt;&

v-for中的key使用v-for更新已渲染的元素列表时,默认用  就地复用 策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法;举个

vuejs修改node_mudule默认路径，多项目开发，可减少内存浪费最近整理之前做过的项目的时候，发现转移的资源内存太大？！ 查看了一下，发现之前每次都是单独引入vuejs、element-ui等等前端框架。 上手了之后，发现之前的这种做法，太浪费内存了，而且管理起来也不方便。这里总结一下：将所有项目的vuejs和element-ui等通用框架部分，提取出来，这样也便于查看和管理项目...

1  params 传参注意⚠️：params传参 ，路径不能使用path 只能使用name,不然获取不到传的数据this.$router.push({name: 'dispatch', params: {paicheNo: obj.paicheNo}})//取数据：this.$route.params.paicheNothis.$route.params.paicheNo...

mui.plusReady(function() { plus.screen.lockOrientation("portrait-primary"); //禁止横屏 document.addEventListener("netchange", wainshow, false); function wainshow() { if(plus.networkinfo.getCurrentTy...

不知道大家有没有遇到过这样一种情况？ vuex中的state会在某一个组建中使用，而这个状态的初始化是通过异步加载完成的。组件在渲染过程中，获取的state状态为空。也就是说组件在异步完成之前就已经完成渲染了，导致组件的数据没有来得及渲染。问题举例举例说明如下：// topo.vuecreated() { this.getUserAndSysIcons();},method...

转载自https://blog.youkuaiyun.com/xumoqiu/article/details/53081352官网上传成功事件、上传成功后的删除事件 API是这样的http://plugins.krajee.com/file-input#events$('#input-id').on('fileuploaded', function(event, data, previewId...