分类：Vue2.x

2021
03-30

Vue2.x 项目性能优化之代码优化的实现

众所周知，Vue项目采用了数据双向绑定和虚拟DOM基础，在数据驱动代替DOM频繁渲染已经算是非常高效了，对开发者而言已经非常优化了，那为什么还会有Vue性能优化这一说呢？因为目前Vue2.x使用了webpack等第三方打包构建工具，并且支持其他第三方的插件，我们在项目中使用这些工具时可能不同的操作在运行或打包效率上会有不同的效果，下面就来详细说明优化的方向。1v-if和v-show的使用v-if为false的时候不会渲染DOM到视图，为... 继续阅读 >

2021
03-24

移动端Vue2.x Picker的全局调用实现

什么是Picker组件对标PC端的Select标签,移动端的选择框一般是在viewPort底部弹出Picker组件存在的问题Picker通常以fixed布局，但是我们在写Picker组件时有遇到过该组件无法在viewport的底部弹出，而是在组件内部弹出，导致样式混淆，不符合C端审美，造成以上问题的原因是因为[层叠上下文]的原因，fixed布局并不是基于viewport为底板，而是当前的层叠上下文Picker若是放置在根组件下的话会造成数据流流向出现混淆，嵌套过深层... 继续阅读 >

2021
03-05

Vue2.x-使用防抖以及节流的示例

utils://防抖exportconstdebounce=(func,wait=3000,immediate=true)=>{lettimeout=null;returnfunction(){letcontext=this;letargs=arguments;if(timeout)clearTimeout(timeout);if(immediate){varcallNow=!timeout;//点击第一次为true时间内点击第二次为false时间结束则重复第一次timeout=setTimeout(()=>{timeout=null;},wait);//定时器IDif(callNow)fun... 继续阅读 >

2020
09-27

vue2.x数组劫持原理的实现

接上篇Vue2.x对象劫持，继续来写数组劫持实现原理：1重新定义原生数组方法pushunshiftshiftpopsplicesortreverse因为这些方法可以修改原数组。2拿到原生数组方法Object.create(Array.prototype)3AOP拦截,再执行重写数组方法前，先执行原生数组方法核心监听Observer代码//把data中的数据都使用Object.defineProperty重新定义es5//Object.defineProperty不能兼容ie8及以下vue2无法兼容ie8版本import{arrayMetho... 继续阅读 >