weixin_46677214的博客

VUE props 实现原理（源码解析）前言我们在使用组件的时候，都会给组件传入一些属性，但是在使用时，却只是关注了它传递数据的功能，没有想过它是怎样的一个原理，具体是怎么实现的。其实我们平时写出来的组件，本质上就是一个template模板，而这个template模板在vue中，会通过render函数解析，最终生成一个VNode。那我们通过源码来看一下在生成VNode后，组件属性是怎样实现传递的。源码解析生成虚拟节点源码在生成虚拟节点这，我们可以看到这样一段代码，而这段代码中，propsData

VUE 巧用$attrs和inheritAttrs提高组件的可扩展性前言在平时创建组件时，一般使用的是利用props传值，然后通过传入的值再赋给标签的方式，来控制组件里的，这种方法在使用时的可扩展性不大，很难通过外部来动态的往组件内部添加或者修改标签属性。这个时候，就可以使用$attrs和inheritAttrs来增加组件的可扩展性步骤下面以自己封装的myInput组件来举例这里使用div包裹是为了里面可以添加更多的内容<div> <input v-bind="$

Vue Render 函数 Table内编辑 应用前言在以前版本中，通过在table中嵌套span和input的方式，来实现这个功能，但是在实际使用过程中，代码会显得特别的冗长繁琐。这个时候，可以通过使用render函数来解决这个问题。思路思路的话，大概都是一样的，通过控制其span、input的显隐来实现，点击后更改的作用。代码部分通过creatElement创建一个divVNode,在再其中创建span的和input的VNode。createElement('el-input', {}),

JavaScript 微任务和宏任务详解前言js是一门单线程语言，所以它本身是不可能异步的，但是js的宿主环境（比如浏览器、node）是多线程，宿主环境通过某种方式（事件驱动）使得js具备了异步的属性。而在js中，我们一般将所有的任务都分成两类，一种是同步任务，另外一种是异步任务。而在异步任务中，又有着更加细致的分类，那就是微任务和宏任务概念宏任务：宏任务 ---- setTimeout、setInterval、DOM事件、AJAX请求浏览器为了能够使得JS内部task与DOM任务能够有序的执行

vue 按钮 权限控制前言在日常项目中，会碰到需要根据后台接口返回的数据，来判断当前用户的操作权限。必须当有删除权限时，就显示删除按钮。没有这个权限时，就不显示或者删除这个按钮。通过查找资料，通过vuex来实现这个功能。步骤1.定义buttom权限在state中创建buttomPermission，用于保存后台接口返回的权限数据。setPermission用于接受数据，将页面权限管理传入到buttomPermission对象中。使用vuexVue.use(Vuex)创建vue实例con

VUE render函数使用和详解前言在平时编程时，大部分是通过template来创建html。但是在一些特殊的情况下，使用template方式时，就无法很好的满足需求，在这个时候就需要 通过JavaScript 的编程能力来进行操作。此时，就到了render函数展示拳脚去时候了。render的作用官网示例入口在官网的这里示例中，使用组件，将相同的内容通过solt放进h1-h6的标签中，在使用传统方式时，代码不仅冗长，而且在每一个级别的标题中重复书写了 <slot></slot&

vue.$nextTick使用前言在做一个用v-if控制input隐藏显示的功能时，显示后需要设置inpu焦点,但是ref设置焦点时，获取到的却是undefined。思路查找资料后，发现是因为input打开后立即就取查看数据导致的。就是说，在打开显示input时，vue并没有马上去更新dom数据，而是先将这个操作放入一个队列中；如果我们是重复执行的话，队列还会进去重复操作；等同一事件循环中的所有数据变化完成后，再进行处理队列中的数据。为了在数据更新操作之后操作dom，所以可以在数据变化之后立即使用

el-table 实现单元格内编辑功能功能双击单元格出现编辑框，编辑框失去焦点后保存内容。原理通过v-if控制编辑框与显示值显示和隐藏。通过el-table 组件·的cell-dblclick事件，得到row、column的数据，并且显示编辑框，隐藏显示值。通过el-input组件的blur隐藏编辑框。步骤1.显示编辑框，聚焦编辑框显示编辑框column.property是当前的template中el-table-column所填写的property值 row[column.

el-table 翻页后保留所勾选项前言在本周的开发中，碰到一个表格翻页之后，仍然保留所勾过的选项的功能。在原组件中，并没有这样的功能，所以经过查找分析，就有了下面的一个例子，分析给大家。思路查找资料后可得为了实现保留的功能，所以需要存储勾选内容的数组（selectedItems）通过el-table中的toggleRowSelection方法，可以设置行的选中状态。通过el-table中的select和select-all获得勾选或者取消的内容步骤表格勾选表格单选因为翻页之后，

uni-app 拖拽排序前言这周做一个页面时，有一个人物排序，可以手动拖动更改排序位置的功能。在经过查找之后，找到了sortable.js,它可以用来实现这个拖拽的功能。思路在查看sortable.js官方文档时，看到里面中有一个onUpdate事件，拖拽改变位置后，其中的返回值中，就有着起始index值和改变后的index值，通过这个，就可以更改数组的内容，来达到拖拽后改变位置的功能。步骤安装sortable.jsnpm install sortablejs --save-dev获取节点

JavaScript正则表达式(手机号码、邮箱、日期)在平时的工作中，经常会遇到一些验证的功能，其中如号码、邮箱、日期之类的验证，但是在平常使用时，直接就抄了一份用，并没有很详细的研究过，所以就在这儿记录了一些常用的表达式，慢慢学习的同时，也分享给大家。手机号码由于现在虚拟号码的使用，所以第二位也不似以前的3|4|5|8的固定，所以此处是选择的3-9let regu = /^1[3-9][0-9]{9}$/邮箱对于邮箱，查找了一下资料，发现基本都是名字@@域名的规律，所以根据这个，就可以大概的分

uni-app 图片懒加载功能实现图片懒加载，并且显示数组中，始终只有3张图片，上下滑动增加的同时，删除最开始的那一张。可以指定从总图片的第几张开始加载。思路要实现上下滑动时的动画效果，我这里用到是uni-app自带swiper组件。同时为了解决增加或删除数组时，会重新渲染，导致动画效果未完成，所以用的是animationfinish页面加载后触发的事件。要实现上下滑动时，动画执行完毕之后，要把执行后的那张图片，始终保持在中间位置。此处，就用到了serper组件中的current，当滑倒第3或者

canvas 柱形图前言在用uni-app做项目时，偶然遇到一个地方需要柱形图，由于插件没找到合适的, 自己就写了一个，分享给大家，如果有写得不好的地方，请大家多多指教。效果图功能：通过X轴数组的长度，计算得到每段的宽度，从而可以实现图像宽度和位置的自动分配。通过Y轴数组最大值和最小值，计算出柱形在Y轴上面对应的坐标，从而实现图形比例分配高度。自定义宽高，未定义宽度时，自适应屏幕宽度。绘制分析这个图标由xy轴、数据条形组成。轴线： 使用moveTo(x, y)和lineTo(x, y)