图片的原始尺寸，就是图片原始的拍摄或者生成出来的大小naturalWidth,原始宽度naturalHeight,原始高度样式尺寸img标签上的width，height缩放倍率，受浏览器缩放影响大小，跟操作系统设置也有关系，反正最后就是个值window.devicePixelRatio清晰度高满足如下公式原始尺寸 = 样式尺寸 * 缩放倍率画一个canvas来试试 {代码....

svg组件 {代码...} webpack配置--loader {代码...}

{代码...} 定义一个refconst classifyRef = ref()setup里面 {代码...}

/ Repo releases /[链接]/ Repo commits /[链接]/ Private feed (You can find Subscribe to your news feed in dashboard page after login) /[链接]/ Repo tags /[链接]/ User activity /[链接]

pwa离线应用缓存使用APP在实际应用中很多会用到重要插件：workbox-webpack-plugin下载安装在webpack.config.js文件配置引入使用plugins中添加 {代码...} 使用，在入口文件引入service-worker {代码...} service-worker需要运行在服务器端serve插件serve -s (目录)暴露目录文件，并创建一个服务，访问项目

1、由 React 控制的事件处理程序，以及生命周期函数调用 setState 不会同步更新 state 。2、React 控制之外的事件中调用 setState 是同步更新的。比如原生 js 绑定的事件，setTimeout/setInterval 等。

{代码...} Promise > MutationObserver > setImmediate > setTimeoutMutationObserver能监听一个DOM对象上发生的子节点删除、属性修改、文本内容修改等 {代码...} 熟悉任务执行机制就能了解

理解：错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面特点：只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误使用方式：getDerivedStateFromError 配合 componentDidCatch {代码...} 示例： {代码...}

只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低

react中模拟vue的slot插槽：使用children props: 通过组件标签体传入结构使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性

最近从vue使用转到react使用，之前研究过vue的diff算法，闲来看了看react的diff源码，写一点自己的见解1.vue的diff算法diff算法发生在虚拟dom上判断是否同一个节点：selector和key都要一样diff规则：只比较同层的节点，不同层不做比较。删除原节点，并且新建插入更新节点（实际开发中很少遇到）新旧节点是同层节点，但不...

项目技术栈：umi3+react17+antd pro5项目需要打印功能，需要能自定义打印模版，极短的时间找到了一个叫hiprint的插件官方地址：hiprint插件该插件基于Jquery，所以在react项目中需要引入jquery，好难受哇先从官网下载对应的文件，得到hiprint文件包。官方示例看源代码可以用鼠标右键->查看源码踩坑从引入插件开始，首...

umi架构下：ts项目中redux定义module每次都要写一遍类型定义麻烦得很typing文件夹下创建Redux.d.ts声明文件 {代码...} 如何使用models文件夹下创建staff.ts {代码...}

在后台项目中使用tabs导航是一个重要的功能下面介绍一下如果配合umi框架和对应的插件实现此功能参考：react-activation参考实现：实现一个tabs目前项目用的架构设计是umi3+react17+antd pro51.引入使用相关插件插件地址: umi-plugin-keep-alive {代码...} 2.公共组件封装components文件夹下创建KeepAvlieTabs对应的less...

因为useState不能像setState那样进行合并更新，当使用useState第二个参数进行数据更新的时候，必须传入一个完整的结构，而不仅仅只是改变的那一部分。

直接安装就行了，运行过程中有无法加载的问题，需要进入bios打开电脑的虚拟机模拟设置（有些电脑可能不支持）。具体的操作在百度搜一下一大堆，这儿就不再说了

可以看到新版的生命周期中 componentWillMount, componentWillReceiveProps, componentWillUpdate 三个生命周期被干掉了，其实还没被干掉，使用时会报警告：（componentWillReceiveProps也一样的警告）

vue3.x已经发布了这么久，相关的生态也慢慢起来了，包括vite这个新的打包工具，在vue3.0学习过程中有一些实用性的api对比，希望能在开发中给大家做个示范，准确的使用对应的api去完成我们的项目开发

前端小伙伴儿应该都听过reduce这个数组的方法，总结一下我在开发过程中遇到的reduce的一些好玩儿的用法老规矩，上MDN：reduce-MDN简单介绍一下一些重要的点定义：reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。示例： {代码...} reducer 函数接收4个参数: {代...

代码的复杂度是评估一个项目的重要标准之一。较低的复杂度既能减少项目的维护成本，又能避免一些不可控问题的出现。然而在日常的开发中却没有一个明确的标准去衡量代码结构的复杂程度，大家只能凭着经验去评估代码结构的复杂程度，比如，代码的程度、结构分支的多寡等等。当前代码的复杂度到底是个什么水平？什么时候就...

【vue.js】bin/vue.js利用commander来定义命令选项create，将create命令匹配到create方法(lib/create.js)，执行该方法;

谷歌浏览器内嵌了性能测试工具Lighthouse，F12打开能看到，使用参考： Lighthouse工具前端性能监控，设置监控超时的任务，回传到服务器完整代码如下 {代码...} 为了监测工具不占用主线程的 JavaScript 解析时间。因此，最好在页面触发 onload 事件后，采用异步加载的方式： {代码...}

商城项目中，有鼠标移入图片放大的功能，研究一下实现 {代码...} 具体效果复制下去打开看看

在代码精简优化过程中，我们总会想着要去简练我们的代码，尽量做到用最少的代码完成最好的功能下面介绍4个JS开发优化的高级运算符使用1、(param ? res1 : res2)三元运算符三元运算符，又叫条件运算符接受三个运算数：条件 ? 条件为真时要执行的表达式 : 条件为假时要执行的表达式基本示例： {代码...} 三元运算符用于变...

一、引入并创建nuxt项目确认已经安装 npx ( npx 依附于 npm 5.2.0 安装引入) {代码...} 或者在 npm v6.1版本后 可以这样创建: {代码...} 或者用： yarn: {代码...} 二、引入axios库1、使用nuxt自带模块 {代码...} 1) 、在 nuxt.config.js 中引入 {代码...} 2) 、页面内使用 $axios 获取数据，并用 $config 获取 API 接口...

在vuecli中构建使用vue-awesome-swiper组件没有任何问题，但是加上ssr就一直会报错，原生组件的切换上一个下一个的按钮不显示，即便是显示了点击也不会生效，后面排查也不知道是不是电脑硬件的问题，我们使用要求切换按钮需要自定义（包括按钮行为）

秉持低耦合的观念，拆分各个功能函数，做到清晰控制，数据单向流转定义中间件对象 {代码...} 使用 {代码...} 配合API接口数据返回后的操作函数 {代码...} 通过中间件以此注册 {代码...}

这样在页面中只要调用那个定义的方法，然后传参(参数可以用对象的形式传过去，自己改一下就行了)过去就能实现弹窗，不用再每个页面去引入组件，data定义一个变量去保存message，components注册组件，再调用加载绑定

大型项目中，不管首页需不需要那么多变量，vuex都会一次性打包进去，vuex会很大，因为都是一次性加载的需求：按需异步加载vuex解决方案如下第一步： 把.vue文件对应的vuex拆分出来，第二步：在xxx.vue文件里面添加 name 和 isNeedVuex 属性注意：为了保证引入store下的文件名字跟组件命名一样，请自行选择合理的命名方式...

这是一篇教程，从创建项目到改造项目vue-cli创建一个项目在放你做demo的地方，创建一个项目 {代码...} 经过漫长的等待，下载好文件开始我们的改造之路文件目录进入vue-ssr文件夹，使用命令 {代码...} 把vue-router装上先安装几个依赖插件 {代码...} 修改package.json文件 {代码...} 根目录下创建vue.config.js {代码...}...