闪烁之狐
谈谈Vue3中模板编译做了哪些优化 谈谈Vue3中模板编译做了哪些优化
1.1 PatchFlags 优化Diff 算法无法避免新旧虚拟 DOM 中无用的比较操作,通过 patchFlags 来标记动态内容,可以实现快速 diff 算法 <div> <h1 a='a
2024-03-25
key的作用和原理 key的作用和原理
1.1 key 的概念 key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类
2024-03-22
Vue中的diff算法 Vue中的diff算法
1.1 Diff 概念vue 基于虚拟 DOM 做更新 。diff 的核心就是比较两个虚拟节点的差异 。Vue 的 diff 算法是平级比较,不考虑跨级比较的情况。内部采用深度递归的方式 + 双指针的方式进行比较。 1.2 Vue2 Dif
2024-03-22
Vue 中如何进行依赖收集 Vue 中如何进行依赖收集
1.1 依赖收集的流程 每个属性都拥有自己的dep属性,存放他所依赖的 watcher,当属性变化后会通知自己对应的 watcher 去更新 默认在初始化时会调用 render 函数,此时会触发属性依赖收集 dep.depend 当属性发生
2024-03-22
Vue 中如何检测数组变化? Vue 中如何检测数组变化?
1.1 Vue2 中采用重写数组方法的方式 数组考虑性能原因没有用defineProperty对数组的每一项进行拦截,而是选择重写数组(push,shift,pop,splice,unshift,sort,reverse)方法。数组中如果是
2024-03-22
如何将template转换成render函数 如何将template转换成render函数
Vue 中含有模版编译的功能,它的主要作用是将用户编写的 template 编译为 js 中可执行的 render 函数。 Vue 中的模版转化流程 将 template 模板转换成 ast 语法树 - parserHTML (ast 描述
2024-03-22
请说一下你对响应式数据的理解? 请说一下你对响应式数据的理解?
1.1 如何实现响应式数据数组和对象类型当值变化时如何劫持到。对象内部通过defineReactive方法,使用Object.defineProperty将属性进行劫持(只会劫持已经存在的属性),数组则是通过重写数组方法来实现。 多层对象是
2024-03-22
既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异? 既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
Vue 的数据劫持是通过 Object.defineProperty 或 Proxy 来实现的。 虚拟 DOM 是用于比较两次渲染之间的虚拟树,找出差异并仅更新必要的部分。从而提高性能,减少直接操作实际 DOM 的次数。(直接操作真实
2024-03-22
谈谈vue组件化的理解 谈谈vue组件化的理解
WebComponent 组件化的核心组成:模板、属性、事件、插槽、生命周期。 组件化好处: 高内聚、可重用、可组合 组件化开发能大幅提高应用开发效率、测试性、复用性等; 降低更新范围,只重新渲染变化的组件; 补充: Vue 中的每
2024-03-22
Vue为什么需要虚拟DOM Vue为什么需要虚拟DOM
1.1 基本概念 基本上所有框架都引入了虚拟 DOM 来对真实 DOM 进行抽象,也就是现在大家所熟知的 VNode 和 VDOM Virtual DOM 就是用 js 对象来描述真实 DOM,是对真实 DOM 的抽象,由于直接操作 D
2024-03-21
谈谈你对vue的理解 谈谈你对vue的理解
1.谈谈你对 vue 的理解 ?官方: Vue是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层 声明式渲染(data,mathod),功能不够,大型项目需要拆分,提供了组件化功能,有提供了客户端路由的模式,需要通信,提供了
2024-03-21
echarts自适应问题高级解决方案 echarts自适应问题高级解决方案
1. 背景在移动端或者 PC 端当页面尺寸发生变化时,echarts 图表需要自适应,以适应页面尺寸的变化。 2. 解决方案增加图表 resizewindow.addEventListener("resize", function () &
2024-01-26
4 / 11