![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue源码
黑面狐 sa~
今年只变强,不变秃!
展开
-
怎么理解vue中的diff算法
总结:1、diff算法是虚拟DOM技术的必然产物:通过新旧虚拟DOM作对比(即diff),将变化的地方更新在真实DOM上;另外,也需要diff高效的执行对比过程,从而降低时间复杂度O(n)2、vue 2.x中为了降低Watcher粒度,每个组件只有一个Watcher与之对应,只有引入diff才能精确找到发生变化的地方3、vue中diff执行的时刻是组件实例执行其更新函数时,它会对比上一次渲染结果oldVnode和新的渲染结果newVnode,此过程称为patch4、diff过程整体遵循深度优先、同层原创 2020-10-03 14:16:23 · 278 阅读 · 0 评论 -
vue源码:vue中key的作用和工作原理
结论:1、key的作用主要是为了高效的更新虚拟DOM,其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个,从而避免频繁更新不同元素,使得整个patch过程更加高效,减少DOM操作量,提高性能。2、另外,若不设置key还可能在列表更新时引发一些隐藏的bug3、vue中在使用相同标签名元素的过度切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性不会触发过渡效果一、vue的updateChildren方法走到判断虚拟dom节点的老开头原创 2020-10-03 13:57:34 · 2461 阅读 · 0 评论 -
vue源码: vue组件中的data为什么必须是个函数,而vue得根实例则没有
结论:Vue组件可能存在多个实例,如果使用对象实现定义data,则会导致它们公用一个data对象,那么状态变更将会影响所有组件实例,这是不合理的;采用函数形式定义,在initData时会将其作为工厂函数返回全新的data对象,有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制,也是因为根实例只能有一个,不需要担心这种情况。1、自定义组件// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: f原创 2020-10-03 13:35:11 · 364 阅读 · 0 评论 -
vue源码: v-if和v-for哪个优先级高
结论:1、显然v-for优先于v-if被解析(把你怎么知道的告诉面试官)2、如果同时出现,每次渲染都会先执行循环再判断条件,无论如何循环都不可避免,浪费了性能3、要避免出现这种情况,则再外层嵌套template,再这一层进行v-if判断,然后在内部进行v-for循环vue源码中的generate方法是ast转换成代码字符串,其中调用的genElement方法里先判断了v-for,再判断v-if:...原创 2020-10-03 12:40:04 · 647 阅读 · 0 评论 -
VUE源码:二、vue源码剖析01
目标环境搭建掌握源码学习方法vue初始化过程剖析深入理解数据响应式资源vue源码地址:https://github.com/vuejs/vue知识点获取vue项目地址:https://github.com/vuejs/vue迁出项目: git clone https://github.com/vuejs/vue.git当前版本号:2.6.11文件结构源码目录:调试环境搭建安装依赖: npm i安装rollup: npm i -g rollup修改dev脚本,添加s原创 2020-07-24 14:31:46 · 340 阅读 · 0 评论 -
VUE源码:一、搭建调试环境
搭建调试环境获取源码git地址:https://github.com/vuejs/vue安装依赖:npm i安装rollup: npm i -g rollup修改dev脚本(package.json): 在dev添加–sourcemap"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",执行dev脚本:npm run dev调试技巧:1、在html中引入 dist原创 2020-07-19 14:01:43 · 406 阅读 · 0 评论