vue学习
文章平均质量分 87
weixin_42936434
这个作者很懒,什么都没留下…
展开
-
【Vue组件通信方式---超全!!!!!】
组件通信在工作中很常见,但通讯的方式很多且使用场景也不同,故在此记录和总结。父组件level1,向level2传递属性a、b、c和事件getA()、getB()、getC()return {getA() {组件level2使用,接收父组件未在props和emits中定义的属性和事件return {getX() {原创 2023-01-17 12:31:05 · 379 阅读 · 0 评论 -
【Vue源码分析——nextTick的使用及实现源码】
在开发中,也会遇到用nextTick的情况,面试中也经常考到。因此,总结了下nextTick的使用及实现原理。 {原创 2022-11-26 14:04:51 · 513 阅读 · 0 评论 -
【vue源码学习】——模板编译
Vue.js提供了模板语法,允许我们声明式地描述状态和DOM之间的绑定关系,通过模板来生成真实DOM并将其呈现在用户界面上。在底层实现上,Vue.js会将模板编译成虚拟DOM渲染函数。当应用内部的状态发生变化时,Vue.js结合响应式系统,聪明地找出最小数量的组件进行重新渲染以及最少量地进行DOM操作。原创 2022-10-30 23:31:48 · 298 阅读 · 0 评论 -
vue为什么要加key?
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。原创 2022-10-23 13:45:07 · 997 阅读 · 0 评论 -
Vue源码学习(三):虚拟DOM
虚拟DOM是随着时代发展的产物。早期,页面交互效果比较简单,无复杂状态管理,无需频繁操作DOM,使用jQuery开发即可。随着需要越来越复杂,操作DOM越来越频繁。用jQuery开发,那会有相当多的代码操作DOM,状态也很难管理。现在,Vue.js、Angular和React都是声明式操作DOM。即通过描述状态(变量)和DOM直接的映射关系,就可以将状态渲染成视图。不用手动操作DOM。而当状态发生改变时,DOM要重新渲染,这时如果渲染整个DOM无疑是浪费了一些性能。原创 2022-10-16 22:07:28 · 555 阅读 · 2 评论 -
Vue源码学习(二):Object的变化侦测
Object 和Array的变化侦测采用不同的处理方式(后面会解释原因),这一篇将介绍Object的变化侦测。Vue.js会自动通过状态生成DOM,并将其输出到页面显示出来,这个过程叫渲染。通常,在运行时应用内部的状态会不断发生变化,此时需要不停地重新渲染。那如何知道状态发生变化了呢,变化侦测就是用来追踪状态变化的,一旦变化,就重新更新视图。变化侦测有两种类型,一种是“推”,一种是“拉”。原创 2022-10-15 17:03:47 · 274 阅读 · 0 评论 -
Element-UI源码学习——弹框组件
首先,分析一下Element-UI的对话框,点击,会弹出一个对话框。对话框由具体的弹框内容、关闭或确认按钮、外围的遮罩层组成。原创 2022-07-17 20:17:50 · 7202 阅读 · 1 评论 -
【手写reactive】
每次count.value修改之后,effect函数如何知道count已经变化了呢?我们先来看整体的流程。vue3的响应式是通过proxy实现的。effect中获取counter.num1 和counter.num2的时候,就会触发counter的get函数。get函数,会把当前的effect函数注册到一个全局的依赖地图。因此,counter.num1修改的时候,就会触发set拦截函数,去依赖地图找到注册的effect函数。1、首先,reactive是通过ES6的Proxy特征实现的属性拦截(可参考MDN原创 2022-07-09 18:02:28 · 177 阅读 · 0 评论 -
vue项目性能优化——断点续传
用element-ui提供基于文件流的上传方案:2、基于BASE64的上传方案二、如何实现断点续传?1、拿到文件,对文件进行切片,有两个方式,一种时固定数量,另一种时固定大小。2、用SparkMD5库对每一个分片进行命名(服务器接口后,会对相同hash的文件进行合并)3、发请求传文件,可以有串行和并行两种方式。这里使用串行,一个一个发,方便点击暂停上传的时候取消发送。4、可以拿一个数组保存待发的文件,上传成功的文件可以从数组里面删除。这样,当再次点击继续发送的时候,就不需要重复发送了。5、原创 2022-07-02 17:47:20 · 4244 阅读 · 0 评论 -
axios获得文件流,转为blob,出现部分文件乱码问题解决思路
axios获得文件流,转为blob,出现部分文件乱码问题解决思路一、 什么是blob?blob对象表示一个不可变、原始数据的类文件对象。blob文档Blob表示的不一定是JavaScript原生格式的数据。File接口基于Blob,继承了blob的功能并将其扩展使其支持用户系统上的文件。Blob()构造函数返回一个新的Blob对象。blob的内容由参数数组中给出的值的串联组成。二、前后端如何进行文件传输?前后端分离,文件是通过文件流的形式进行传输的,前端通过axios请求后端接口,得到的原创 2020-11-07 11:20:05 · 3032 阅读 · 0 评论 -
vue+axios+promise+mockjs开发
https://segmentfault.com/a/1190000016680014原创 2020-10-18 14:22:35 · 270 阅读 · 0 评论