Vue源码

1.起因 公司内部系统用户反馈页面无法操作，必须关闭页面重新打开才能解决。按道理业务代码只是做data设置和方法操作，不应该导致整个vue都失效。 2.定位问题 打开控制台，发现输出了 undefin

1.起因 最近发现公司项目偶发性发生 奔溃现象。 刚开始以为是代码写了一些死循环，检查完并未发现。 后面通过 performance 检查 发现内存飚到了1个多G， 可能是内存没有正常的回收，而项目是

1.vue的渲染原理 通过.vue模版文件转换为AST抽象语法树 AST转换成render函数 render函数生成vnode 虚拟dom 通过patch比较当前真实与虚拟dom差异，做dom操作更新

1.vue-loader 的使用 相关的loader： vue-loader vue-style-loader vue-template-compiler css-loader 如果使用css扩展语言

1.整体思路 响应式是什么 为什么vue需要响应式 它能给我们带来什么好处 响应式源码实现 vue3中的优化 2.源码分析 2.1. vue2中的响应式实现 原理 使用defineProperty做数

1.定义 在DOM更新完毕之后执行一个延迟的回调，在修改数据后可以立即获取最新dom内容。 是vue的全局api 2.在什么场景使用 在更新data后，想获得最新的dom，则需要使用nextTick方

1. 什么是diff算法 diff算法是使用虚拟dom的必然产物，因为使用虚拟dom就需要比较新旧两个节点之间的差异，而diff就是比较两者的算法。 vue2中watcher颗粒度的降低，(vue1是

1.例子 2.需要实现的效果 在位置C前面插入F元素 3.源码分析 path -> pathVnode -> updateChildren -> sameVnode()方法 -> pathVnode

调试环境搭建 迁出Vue3源码： git clone https://github.com/vuejs/vue-next.git 安装依赖： yarn --ignore-scripts ⽣成sourc

1.事件生成的render 2.事件类型 2.1 原生事件 2.1.1执行流程 Vue -> Vue._init -> Vue.$mount -> mountComponent -> watcher

1.模板编译 1.1定义 主要将模板template 转化为 渲染函数 render， 由于vue需要使用vnode做比较更新，所以需要用到render来返回vnode 为了方便用户生成render函

1.pathVnode 节点比较算法 1.1更新流程 注意这里做的是具体的dom操作，只是利用新旧的vnode找出更新内容，直接做dom操作。每次循环都会直接做dom，性能消化大，所以需要加上key做

1.准备 1.1安装 安装rollup 拉取源码 修改启动文件package.json，添加 --sourcemap，生成新的dist 引入，dist/vue.js调试 通过chrome，debugg

1. 原理 1.1 defineReactive简单版 利用Object.defineProperty() 实现数据的响应,注意需要用一个temp把 值存起来 1.2 defineReactive闭包

1使用 2.代码实现 3.getters 实现 4.getters 缓存实现1使用 2.代码实现 3.getters 实现 4.getters

1.vue-router使用方式 2.代码实现 1. 定义插件 和 类 2. 定义两个组件标签 router-link和router-view 3. 实现监听url变化#hash响应 通过变量值+vu