随笔分类 -  mark

虚拟DOM
摘要：VNode:用Js计算性能来换取操作真实Dom所消耗的性能。 ● 当数据发生变化时，生成真实dom对应的虚拟dom节点，跟本地缓存的虚拟dom进行对比，找出差异所在，然后将差异更新到真实dom上，可以最小程度的减少操作dom。对比新旧VNode找出差异的过程 DOM-Diff（核心所在）。 Dom- 阅读全文
posted @ 2023-03-21 11:03 阿兰儿 阅读(39) 评论(0) 推荐(0)
webpack
摘要：webpack基本流程 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译 确定入口：根据配置中的 entry 找出所有的入口文件 编译模块：从入口文件出发， 阅读全文
posted @ 2022-03-23 09:14 阿兰儿 阅读(58) 评论(0) 推荐(0)
bind,call,apply
摘要：共同点： 功能角度：三者都能改变 this 指向，且第一个传递的参数都是 this 指向的对象。 传参角度：三者都采用的后续传参的形式。 不同点： 传参方面： call 的传参是单个传递（序列），而 apply 后续传递的参 数是数组形式。而 bind 与call相同。 执行方面： call 和 a 阅读全文
posted @ 2022-03-02 10:59 阿兰儿 阅读(35) 评论(0) 推荐(0)
this.$nextTick
摘要：概念： vue的响应式并不是只有数据变化之后，dom就会立即发生变化，而是按照一定策略更新dom的。 即放到nextTick中的操作不会立即执行，而是等数据更新，dom更新完成之后执行。在准确的说就是，将nextTick的方法延迟到下次dom更新循环之后执行。 分析： 2.2.5中vue使用muta 阅读全文
posted @ 2022-02-28 16:15 阿兰儿 阅读(156) 评论(0) 推荐(0)
箭头函数和普通函数区别
摘要：箭头函数 箭头函数的this指向父级作用域的this，通过查找作用域链来确定的，也就是上下文的this.指向的定义它的对象。普通函数指向它的调用者。 箭头函数没有prototype原型. call,apply,bind无法改变箭头函数的this，因为箭头函数的this在定义时就确定了不会修改。 箭头 阅读全文
posted @ 2022-02-24 10:10 阿兰儿 阅读(265) 评论(0) 推荐(0)
vue2 和 vue3 对比
摘要：一、Vue3的优点 1、diff算法的提升 vue2中的虚拟DOM是全量的对比，也就是不管是写死的还是动态节点都会一层层比较，浪费时间在静态节点上。 vue3新增静态标记（patchflag ），与之前虚拟节点对比，只对比带有patch flag 的节点，可通过flag信息得知当前节点要对比的具体内 阅读全文
posted @ 2022-02-10 14:32 阿兰儿 阅读(6111) 评论(0) 推荐(0)
虚拟DOM-vue和react
摘要：虚拟dom和真实dom？ 虚拟dom： const vNode={ key=null, props:{ children:[ {type:'span'}, {type:'span'} ], className:'red', onclick:()=>{} }, ref=null, type='div' 阅读全文
posted @ 2022-02-09 17:01 阿兰儿 阅读(333) 评论(0) 推荐(0)
javascript的设计模式-发布订阅者模式
摘要：观察者模式：通常被称作发布-订阅模式 在vue中，数据的双向绑定的原理： 采用数据劫持 结合 发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相关监听回调。 对于mvc和mvvm的理解： mvc 阅读全文
posted @ 2022-02-09 15:35 阿兰儿 阅读(364) 评论(0) 推荐(0)
vue3---ref,reactive,toRef,toRefs
摘要：在vue2中，数据的响应式是根据 Object.defineProperty方法实现的，所以需要拦截的属性key必须是已知的，也就是对于新增的key无能为力。 在vue3中，使用了代理Proxy。该方法不需要关心key，他拦截的是data，不管是新增还是已知的key，都会被捕捉到。 vue3和vue 阅读全文
posted @ 2022-01-25 11:12 阿兰儿 阅读(331) 评论(0) 推荐(0)
vuex实现数据持久化
摘要：vuex-状态管理工具 对于vuex来说，它只是一个状态管理工具，当有些变量不止在组件间用时，可能很多页面都会复用。我们使用vuex进行管理。 state:设置初始值状态。 getters：store仓库的计算属性，主要作用是派生出一些新的状态。比如将state状态的数据进行一次映射或者筛选。 mu 阅读全文
posted @ 2022-01-05 16:30 阿兰儿 阅读(1254) 评论(0) 推荐(0)