loushumei-CSDN博客

原创认识Babel ***

Babel是什么？用于解析ES6，甚至比ES6更高级的语法，到ES5或ES4级别，满足浏览器的兼容性环境搭建 & 基本配置① package.json配置安装："devDependencies": { "@babel/cli": "^7.7.5", "@babel/core": "^7.7.5", "@babel/preset-env": "^7.7.5" "@babel/plugin-transform-runtime": "^7.7.5",},"dependencie

2021-02-04 19:12:29 233

原创 Webpack性能优化「七」-- 优化产出代码 ***

本篇讲的是 Webpack 对于优化产出代码，也就是对于产品性能的优化，优点：代码体积更小；合理分包不重复加载；速度更快，内存使用更少。懒加载 import提取公共代码IgnorePlugin 避免引入无用模块小图片base64编码 // 减少请求次数bundle加hash使用 CDN加速使用 productionScope Hosting 作用域提升小图片base64编码减少请求次数webpack.prod.js：module: { rules: [ // 图

2021-02-03 18:54:09 388 1

原创 Webpack性能优化「六」-- 优化打包构建速度 ***

本篇讲的是 Webpack 对于优化打包构建速度，也就是对于开发体验和效率的优化。有如下几处可以优化：优化 babel-loaderIgnorePlugin 避免引入无用模块noParse 避免重复打包happyPack //多进程打包工具ParalleUglifyPlugin //多进程打包压缩自动刷新热更新DLLPlugin1.优化 babel-loader在babel-loader后加cacheDirectory，开启缓存，没有改动的es6代码会启用缓存，不会重新编译[w

2021-02-02 19:01:03 749

原创 Webpack高级配置「五」-- 懒加载 & 处理JSX & 处理vue ***

1.懒加载abc.js 文件中定义数据：export default { message: "this is dynamic data"}动态引入数据 - 实现懒加载：setTimeout(() => { import('./abc.js').then(res => { console.log(res.message) })}, 1500);最后产出一个独立的js，等同于定义一个chunk2.处理JSX修改 .babelrc 配置为："presets"

2021-01-21 16:15:51 227

原创 Webpack高级配置「四」-- 抽离公共代码和第三方模块 ***

为什么要抽离公共模块、第三方模块？多入口打包时引入公共部分，公共部分会进行重复打包，打包效率降低，打包文件体积变大；第三方模块不会改变，但页面发生任何变动，第三方模块都需要重新打包，通过抽离第三方模块，页面变动时命中缓存，只打包开发部分代码，提升打包性能。1. 将第三方模块、公共模块分别打包为chunk将第三方模块、公共模块分别打包，分别产出对应的chunk，以便按需引用；将两者均放在cacheGroups做缓存分组中，将包作为缓存使用，避免重复打包；optimization.splitC

2021-01-20 19:39:25 800

原创 Webpack高级配置「三」-- 抽离CSS文件并压缩

本地开发环境不需要压缩css,配置保持不变;生产中压缩css可以优化产出代码，故只在生产环境进行css压缩;在开发和生产分别配置如下：1.在生产配置中配置css抽离压缩加载：抽离css文件：安装分离css插件 mini-css-extract-plugin在plugins中新增抽离css文件的配置压缩css文件：安装压缩css插件 terser-webpack-plugin、optimize-css-assets-webpack-plugin在optimization中新

2021-01-19 18:17:12 183

原创 Webpack高级配置「二」-- 配置多入口

1.js文件多入口配置：在公共配置中配置多入口[webpack.common.js]:entry: { index: path.join(srcPath, 'index.js'), other: path.join(srcPath, 'other.js')},生产环境配置多出口[webpack.prod.js]：output: { // filename: 'bundle.[contentHash:8].js', // 单入口配置打包代码时，加上 hash 戳 filen

2021-01-19 17:09:21 186

原创 Webpack「一」-- 基本配置

1.拆分配置和mergewebpack配置文件拆分为：webpack.common.js 存放公共配置webpack.dev.js 存放开发环境配置webpack.prod.js 存放生产环境配置开发环境和生产环境分别引入 webpack.common.js：安装webpack-merge以用来引入webpack.common.js：const webpackCommonConf = require('./webpack.common.js')const { merge } = req

2021-01-18 21:08:03 124

原创 Vue性能「十九」-- Vue常见性能优化方式 ***

合理使用v-show和 v-if合理使用computed(缓存)v-for中加key,避免和v-if同时使用自定义事件和DOM事件及时销毁（否则会导致内存泄露）合理使用异步组件（import）合理使用缓存组件（keep-alive）合理使用异步渲染（$nextTick）data层级不要太深（导致深度监听时递归的次数比较多）使用vue-loader在开发环境做模板编译（预编译）使用SSR(服务端渲染)1.合理使用v-show和 v-ifv-show和 v-if的区别：v-show.

2021-01-12 19:00:01 579

转载 Vue原理「十八」-- computed和watch的区别及原理 ***

计算属性 computedcomputed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理场景：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化，这里的这个总金额使用computed属性来进行计算是最好的选择。（适合多对一的场景）多对一的场景使用：<p>{{luFei_Name}}</p>vm = n

2021-01-12 18:55:22 398

原创 Vue3.0「十七」-- vue3.0升级新特性及Proxy重写响应式讲解

vue3.0 升级内容全部用TS重写的（响应式、vdom、模本编译）性能提升，减少代码量会调整部分APIProxy重写响应式vue2.x 马上要过时了吗vue3.0从正式发布到推广，还需要一段时间vue2.x应用范围广，有大量项目需要维护升级proxy存在兼容性问题，且不能ployfill社区热门知识点：Proxy重写响应式讲解回顾vue2.*的响应式原理 [object.defindeProperty]object.defindeProperty缺点：深度监听需要一次性递归无法

2021-01-04 20:24:42 644

原创 Vue状态管理模式「十六」-- Vuex***

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。一个状态管理实例const store = new Vuex.Store({ state: { count: 0, todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false } ] }, gette

2020-11-17 21:46:10 167

原创 Vue路由「十五」-- vue-router的路由模式***

vue-router的路由模式有 hash模式和 history模式，默认使用 hash 模式hash模式：使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。例如 http://yoursite.com/#/user/idhistory 模式：URL 就像正常的 url，例如 http://yoursite.com/user/id前置知识：网页url组成部分https://127.0.0.1:8082/lesson/419.html?a=100&am

2020-11-17 20:59:41 282 2

原创 Vue原理「十四」-- 组件渲染过程***

1.初次渲染过程解析模板为render函数（或在开发环境中已完成，vue-loader）触发响应式，监听data属性的getter setter执行render函数，生成vnode, patch(elem,vnode)2.更新过程修改data，触发setter(此前getter中已被监听)重新执行render函数，生成newVnodepatch(vnode,newVnode)每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依

2020-11-16 19:11:21 623

原创 Vue原理「十三」-- 模板编译 *****

前置知识：JS的 with 语法vue template complier将模板编译为render函数执行render函数生成vnodevnode可以渲染到浏览器的DOM元素上vnode可以在组件修改后触发更新1、with语法const obj ={a:100,b:200}console.log(obj.a) //100console.log(obj.b) //200console.log(obj.c) //undefinedwith(obj){ console.log(.

2020-11-16 14:14:43 207

原创 Vue原理「十二」-- vdom和diff算法 *****

diff 算法概述diff即对比，是一个广泛的概念，如linux diff、git diff两个JS对象也可以做diff两颗树做diff，如vdom diff树diff 时间负责度是o(n^3)第一，遍历tree1；第二，遍历tree2第三，排序1000个节点，要计算 1亿次，算法不可用优化时间复杂度到o(n)之比较同一级，不跨级比较tag不相同，则直接删掉重建，不再深度比较tag和key两者都相同，则认为是相同节点，不再深度比较patchVnode（）diff算法总结pa

2020-10-30 19:21:48 441

原创 Vue原理「十一」-- 响应式原理 *****

Vue响应式：组件data数据一旦变化，立刻触发视图的更新1. 核心API - Object.defineProperty基本用法const data={}var name='zhangsan'Object.defineProperty(data,"name",{ get:function(){ console.log('get') return name }, set:function(newVal){ console..

2020-10-30 19:02:39 189

原创 Vue原理「十」-- 组件化和MVVM ***

组件化很久以前的组件化：asp jsp php 已经有组件化了nodejs 中也有类似的组件化传统组件，只是静态渲染，更新还要依赖于操作DOM现在的组件化：数据驱动视图 -Vue MVVM数据驱动视图 -React setStateMVVM 数据驱动视图 *****view 视图-DOMModel 模型-vuex的数据viewModel 监听事件、监听指令，在视图和数据绑定器之间进行通信。...

2020-10-30 19:01:41 311

原创 Vue高级特性「九」-- mixin 混入

vue中提供了一种混合机制–mixins，用来更高效的实现组件内容的复用mixin使用实例index.vue 引入了mixin.js<template> <div> {{name}} {{major}} {{city}} <button @click="showName">点击</button> </div></template><script>import myMixin from '

2020-10-29 21:14:48 161

原创 Vue高级特性「八」--keep-alive 缓存组件 ***

keep-alive是什么keep-alive用于保存组件的渲染状态。keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，避免组件反复创建和渲染。应用场景频繁切换，不需要重复渲染(tab切换)，如果标签简单可以使用 v-showVue性能优化方法之一在动态组件中的应用例如：点击事件，切换不同的子组件<button @click="state ='A'">A</but

2020-10-29 20:58:30 242 1

原创 Vue高级特性「七」--动态组件\异步组件***

使用场景：需要根据数据（新闻详情页），动态渲染的场景，即组件类型不确定。基本使用<component :is="nextTickName"></component>import nextTick from './nextTick'export default { components:{ nextTick, }, data() { return { nextTickName:"nextTick" }; }, };

2020-10-27 22:04:59 165

原创 Vue高级特性「六」--slot 插槽

基本使用父组件在引用的子组件中添加内容<slotDemo :url="website.url"> {{website.title}} //父组件添加的内容</slotDemo>data() { return { website:{ url:'http://www.baidu.com', title:'百度', }, };},子组件 slotDemo.vue<template> <div>

2020-10-27 21:15:36 229

原创 Vue高级特性「五」--$nextTick

$nextTickdata改变之后，DOM不会立刻渲染，获取不到最新的DOM节点；$nextTick会在DOM渲染之后被触发，以获取最新DOM节点<template> <div> <ul ref="ul1"> <li v-for="(item,index) in list" :key="index">{{item}}</li> </ul> <button @click="add"&gt

2020-10-24 22:51:37 177

原创 Vue高级特性「四」--自定义 v-model

父组件 index.vue<p>{{name}}</p><CustomVmodel v-model="name" />子组件 CustomVmodel.vue<template> <div> <input type="text" :value="text1" @input="$emit('change1',$event.target.value)" > <!--

2020-10-24 22:30:05 177

原创 vue基础「三」--组件生命周期

单个组件的生命周期挂载阶段beforeCreatecreated： new vue的实例初始化完，网页还没开始渲染deforeMountmounted ：网页已经渲染完了更新阶段beforeUpdateUpdated销毁阶段beforeDestroy 解除绑定销毁子组件以及事件监听器destroyed 销毁完成父子组件生命周期父组件：index.vue子组件：list.vue挂载阶段：index createdlist createdlist mountedind

2020-10-24 21:56:08 352

原创 vue基础「二」--组件间的通讯

1. 父子组件通讯：props 和 $emit父组件 index.vue给子组件 Input 传递事件 addHandler给子组件 List 传递数据list、事件 deleteHandler<template> <div> //传递 addHandler事件 <Input @add="addHandler"/> //传递 list数据、deleteHandler事件 <List :listFather="list"

2020-10-24 17:02:48 188

原创 Vue基础「一」-- 基本使用

1. 插值、指令（模板）//模板 1.插值、表达式、 <p>文本插值：{{message}}</p> <p>JS表达式{{flag?'yes':'no'}}(只能是表达式，不能是js语句)</p> 2.指令、动态属性 <p :id="myId">动态属性</p> 3.v-html：会有XSS风险，会覆盖子组件 <p v-html="myhtml">

2020-10-24 16:05:37 183

转载 js数组方法整理

1. 数组有哪些常用方法，功能、返回值、是否会对原数组造成影响?方法功能返回值改变原数组(Y\N)pop()删除最后一位删除的数据Ypush()在最后一位新增一或多个数据长度Yshift()删除第一位删除的数据Yunshift()在第一位新增一或多个数据长度Yslice()截取指定位置的数组截取后的结果Nsplice()删除指定位置，并替换删除的数据Yconcat()合并数组合并之后的数据Njoin

2020-10-22 21:10:37 183

原创手写数组flatern数组拍平，考虑多层级

知识先填坑：concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。如：const res= [].concat(1, 2, [3, 4], 5)console.log(res) //[1, 2, 3, 4, 5] 只有一层数组，完成数组拍平const

2020-08-25 16:01:39 450

原创获取当前页面url参数的三种方法

知识先填坑：location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号(包含？)?之后的部分）假设访问路径为：file:///Users/xiao**/learn/js_basics/11.html?a=100&b=20&c=30；分别通过【正则匹配】、【拆分字符串成数组】、【新API URLSearchParams】三种方式获取参数方法如下：方法一、正则方法匹配需要的参数//search属性获取到带？的参数字符串console.l

2020-08-25 15:52:48 3570

原创 [10,20,30].map(parseInt)返回结果解析

话不多说，直接上结果：[10, NaN, NaN]剖析使用的方法和参数：map的参数和返回值map() 方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。array.map(function (currentValue, index, arr), thisIndex).currentValue：必须。当前元素的的值。index：可选。当前元素的索引。arr：可选。当前元素属于的数组对象。thisIndex可选。

2020-08-24 19:36:18 792 2

原创手写深度比较

思路：判断对象是否相等，进行深度比较，因为不知道对象层级多深，首先应该是一个递归操作；Step1: 判断两者是否为对象（包括数组、对象），如果不是对象，进行值类型比较；返回两者比较结果；Step2. 两者都是对象，判断【是否是同一个对象】，用===判断对象地址是否一致；一致代表是同一个对象，直接返回true；Step3.两个都是对象或者数组，但是不全等，【比较个数】，如果不相等结束进程，返回结果；Step4.如果两者都是对象，同时个数相等，依次递归调用方法比较两个对象的值，直到返回结果；如果全程没

2020-08-24 19:15:43 149

空空如也

空空如也