![](https://img-blog.csdnimg.cn/20200711130247743.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
++ Vue
‘’
风中依旧笑着过
目前就职亚信科技高级前端开发工程师,常用 vue2、vue 3进行开发,开发过的项目涵盖 PC端、小程序、H5;擅长使用 flex 布局,熟悉 vue 父子组件通讯、生命周期函数、路由、vuex 、 webpack 打包过程,对可视化技术有一定的了解使用过 ThreeJS、G6,参与过 WebGIS 开发使用过超图 GIS ,对后端 java、php、mysql 技术有一定的基础。
展开
-
nextTick使用和原理
Vue有个异步更新策略,意思是如果数据变化,Vue不会⽴刻更新DOM,⽽是开启⼀个队列,把组件更新函数保存在队列中,在同⼀事件循环中发⽣的所有数据变更会异步的批量更新。这⼀策略导致我们对数据的修改不会⽴刻体现在DOM上,此时如果想要获取更新后的DOM状态,就需要使⽤nextTick。以上就是我对nextTick使用和原理的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。nextTick是用于获取下次DOM更新后才调用使⽤的函数。原创 2023-03-11 19:07:46 · 912 阅读 · 0 评论 -
Vue中key的作用
下图是不使用key的情况,那么就会出现undefined == undefined 也就是ture,那么就从C=>F,D=>C,E=>D,这三次比较都认为是相同节点,导致3次强行更新,以及一次E节点追加。以上就是我对Vue中key作用的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。下图是使用key的情况,就进行掐头去尾,最后发现只剩下一个F,并且这个时候游标停在了C点,就直接创建并且插入C前面。原创 2023-03-11 14:52:32 · 64 阅读 · 0 评论 -
vue中的diff算法
以上就是我对vue中的diff算法的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。执⾏的时刻是组件内响应式数据变更触发实例执⾏其更新函数时,更新函数会再次执⾏。视图中每个依赖均有更新函数对应,可以做到精准更新,因此并不需要虚拟。粒度,每个组件只有⼀个 Watcher与之对应,此时就需要引⼊。,通过⽐对两者找到变化的地⽅,最后将其转化为对应的DOM。算法才能精确找到发⽣变化的地⽅并⾼效更新。函数,并传⼊新旧两次虚拟。原创 2023-03-10 17:14:20 · 474 阅读 · 0 评论 -
说说你对虚拟DOM的理解?
如果这时响应式数据发生变化,就会引起重新reder,此时就会生成新的vdom,这时新旧Dom就会进行diff算法,得到一个清单(最小的dom操作),然后进行视图更新。(2).操作 dom 是比较昂贵的操作,频繁的dom操作容易引起页面的重绘和回流,但是通过抽象VNode 进行中间处理,可以有效减少直接操作dom的次数,从而减少页面重绘和回流。以上就是我对虚拟DOM的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。原创 2023-03-09 13:10:45 · 135 阅读 · 0 评论 -
对Vue响应式的理解
为了解决Vue2中Object.defineProperty带能的性能问题,已经实现的复杂性问题,所以Vue3重新编写了这一部分的实现,利用的是Es6的新语法Proxy代理来实现的,在Vue3中就不在需要特殊api了,初始化的性能和内存消耗也得到提升。(1).MVVM框架中要解决的核心问题数据驱动视图,数据的改变引起视图的更新,那么要实现这一点那么就是需要对数据做响应式的处理,这样才能实现数据改变立即做出更新处理。(1).所谓的数据响应式就是能够使数据变化可以被检测到并且对这种变化做出响应式的机制。原创 2023-03-08 22:00:11 · 751 阅读 · 0 评论 -
v-if和v-for哪个优先级更高
以上就是我对v-if和v-for哪个优先级更高的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。的,同样vue3也不能把它们两者写在一起,正因为v-if优先于v-for,并且v-if又依赖v-for的数据源,在这个情况下将会出现报错的情况。把它们放在同一个标签上时,页面每次渲染的时候都会重复的进行判断是十分消耗性能的。(2).如果是需要进行是否显示判断的话,也可以将v-if移到。过滤下不需要的数据,也可以使用。原创 2023-03-06 20:44:01 · 4384 阅读 · 2 评论 -
vscode格式化保持标签不换行
好看美观的代码格式能提高不少的工作效率!强迫症的我今天就在研究,使用vsocde保存如何做到便签不自动换行顺便记录下,我最终完成的效果如下图:遇到的问题1.每次在开发时保存代码都会将我的代码换行,个人感觉阅读起来不是很方便,使用vscode的shift+alt+下 快捷键CV都不是那么方便!配置vscode1.首先打开vscode的 >文件 >首选项 >设置>工作台>外观>打开setting.json文件2.打开setting....原创 2021-11-01 17:26:59 · 3925 阅读 · 0 评论 -
element封装表格组件el-table-column列顺序错乱
1、父组件给子组件传递对象,子组件使用 :style="[customStyle]" 绑定,达到父组件随意修改子组件的目的。2、判断文件后缀是否允许// 允许上传的图片后缀limitType:{ type: Array, default() { return ['png', 'jpg', 'jpeg', 'webp', 'gif']; }},checkFileExt(file) {// 检查是否在允许的后缀中 let noArrowExt = false; // 获取后缀名 le原创 2021-11-01 11:02:38 · 4050 阅读 · 0 评论 -
vue中的动态keyframes参数
最近在负责项目中大屏模块,遇到了点小问题.现在来记录下先来讲下项目是基于Vue现要在keyframes中动态的传递高度(top)。最后的效果如下图(主要涉及到动画效果,中间部分左右两边不说):### 主要思路使用animation配合@keyframes来使用上下移动动画**问题1:** 如何将不同柱子的top值传递给@keyframes中?使用==document.styleSheets[0].insertRule ==...原创 2021-09-28 16:12:45 · 2969 阅读 · 0 评论 -
element表格使用表单校验
哈喽,最近公司都在赶项目在做的过程中也踩了不少的坑。现在来记录下产品的需求:需要在表格中修改内容,并且对填入的数据进行校验后通过才可提交。我最终完成的效果如下图(主要涉及到表单的校验和表格行列合并):主要思路表单验证主要是通过 el-form的model 属性绑定对象 结合 el-form-item的prop和rules属性 外加 el-input的v-model绑定的值来进行触发验证。(其中 prop 的值是绑定v-model值的字段名,必须对应上否则无法触发 )问题1: 后端返回的数据是数组中原创 2021-01-04 10:09:12 · 2066 阅读 · 1 评论 -
JS获取本周、上周、本月、上月时间段
哈喽,最近公司都在赶项目在做的过程中产品提了一个需要查看本周、上周、上个月的需求,现在来记录下代码能直接使用。最后的效果如下图(主要涉及Date()对象的使用):主要思路(获取周时间段)/***核心思路:先得到startDateTime(开始时间),随后+6就能得出endDateTime(结束时间)开始时间的计算方式:通过getDay()先获取要计算时间是属于星期几(可能出现:0~6),再通过getDate()获取要计算时间是属于本月中那一天结果会出现两种情况:1、利用本月的天数-归属星期几原创 2020-12-14 23:42:54 · 1118 阅读 · 3 评论 -
【Vue/components】实践深入组件——第一章动态绑定
哈喽,接下来我将会持续的更新博客,本次主要通过学习uniapp中的uView框架来学习Vue,我在这里做下一些笔记,如果对读者们有一丢丢帮助的话都可以点赞或者有不足之处希望大佬们能指出,【180°鞠躬】感谢大家。一、如果没有动态绑定,那么Vue中的Css就莫得玩了【1.丢出一段代码】:class="!headerFlag?'header-title':'header-title-small'"【2.再丢出一段代码】:class="[{'header-title':headerFlag,'head原创 2020-10-31 23:53:18 · 274 阅读 · 1 评论 -
element table相同数据行合并
哈喽,最近公司都在赶项目在做的过程中也踩了不少的坑,现在来记录下先来讲下Vue+Element使用table表格的合并功能。最后的效果如下图(主要涉及到表格行列合并):主要思路由于项目后期数据报表模块的日表、月表、年表展示的数据字段不相同并且会继续扩展。这里为了前端后续的维护方便直接将表格以组件的方式封装,然后共用 el-tabs导航和头部搜索 。在开发时候在下面这两处有出现问题:问题1: 给表头某列加提示语,我这里是使用 table的 :render-header来实现的,听@晟哥说还能通过给表头原创 2020-10-28 16:22:34 · 6997 阅读 · 16 评论 -
通过npm发布vue组件
创建Vue空项目1、为了再打包过程之后避免出现冲突,创建webpack-simple创建一个vue空项目。vue init webpack-simple 项目名称2、在 src 目录下新建子目录components,将已经写的组件放进去。3、注意点:写好的Vue组件需要设置name属性,后面导出是会使用到export default { name:"operation-bar", .... }还需要在和组件的同级目录下创建一个index.js文件用于导出:import colo原创 2020-10-20 09:41:09 · 180 阅读 · 0 评论 -
mvc和mvvm模式的理解与区别
1、从了解MVC开始几乎所有的项目都在做这么一件事:将数据展示给用户看,并处理用户对界面的操作。MVC的思想:一句话描述就是Controller负责将Model的数据用View显示出来,换句话说就是在Controller里面把Model的数据赋值给View,比如在controller中写document.getElementById("box").innerHTML = data.titleM(模型)Model(模型):是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。原创 2020-09-20 23:10:23 · 488 阅读 · 0 评论 -
Vue适配Pc端不同分辨率——lib-flexible
核心思路Vue项目使用 vue-cli 脚手架创建使用阿里可伸缩布局方案 lib-flexible 依赖使用 px2rem-loader 将px转化为rem添加依赖npm install lib-flexible --save //阿里可伸缩布局方案依赖npm install px2rem-loader --save // 将px转化为rem依赖安装好之后在main.js中引入// 阿里可伸缩布局方案 import 'lib-flexible'运行项目查看F12,看到图上属原创 2020-09-13 23:11:23 · 959 阅读 · 3 评论 -
Vue将两张图片合并下载——html2canvas
<template> <div> <el-dialog v-dialogDrag :visible="CreateModalShow" :close-on-click-modal="false" title="鍒嗕韩" width="400px" @close="closeDialog" custom-class="showDialog-game" append-to-.原创 2020-09-13 08:29:56 · 1543 阅读 · 5 评论 -
VSCode快速生成.Vue模板
1. 在扩展商店中下载vetur插件2.创建模板代码片段文件->首选项->用户代码片段->点击新建代码片段。取名vue.json 确定3.黏贴.vue模板{ "Print to console": { "prefix": "vue", "body": [ "<!-- $1 -->", "<template>", "<div class='原创 2020-08-27 14:56:16 · 310 阅读 · 0 评论 -
Vue配置全局过滤工具
Vue项目开发过程之中必不可少的就是时间戳转化、金额前添加¥符号等等操作,为了方便统一管理我使用filter(过滤器)并且将这些操作全部抽取出来。在src/utils/目录下创建filter.js文件:const filterMoney = (val) => { return '¥' + val}const timestampToDate = (val) => { if (String(val).length === 10) { val = val * 1000 }原创 2020-08-03 14:15:54 · 182 阅读 · 0 评论 -
Vue使用async、await、promise解决异步
昨天在做公司Vue项目时遇到了异步问题,正好时需要使用到async、await、promise这三个关键字。这里我简单的描述下问题:页面需要在页面初始化的时候先请求接口获取地区码,在使用地区码继续请求获取列表数据。(要求不能使用套娃的方式请求)问题代码重现 created(){ this.getAreaCode() //获取地区码 this.getListData() //获取列表 }, methods:{ getAreaCode()原创 2020-07-03 23:14:41 · 1296 阅读 · 0 评论