随笔分类 - vue2源码
摘要：Vue组件间传值的方式及之间区别 通过props传递：父组件传递数据给子组件 使用 // chilid,vue props:{ // 字符串形式 name:String // 接收的类型参数 // 对象形式 age:{ type:Number, // 接收的类型为数值 defaule:18, //
阅读全文
摘要：异步组件 Vue 中异步组件的写法有很多，主要用作大的组件异步加载的markdown组件editor组件。就是先渲染一个注释标签，等组件加载完毕，最后再重新渲染 forceUpdate（图片懒加载）使用异步组件会配合 webpack 原理：异步组件默认不会调用 Vue.extend()方法 所有Ct
阅读全文
摘要：Vue.set方法是如何实现的 vue.set 方法是vue中一个补丁方法（正常我们添加属性是不会触发更新的，我们数组无法监控到索引和长度） 如何实现的 我们给每一个对象都添加了一个 dep 属性 vue3 中不需要此方法了（当属性添加或者删除时，手动触发对象本身的 dep 来进行更新） 源码： /
阅读全文
摘要：computed和watch的区别 computed 和watch的相同点。底层都会创建一个 watcher（用法的区别：computed 定义的属性可以在模板中使用，watch 不能在视图中使用） computed 默认不会执行 只有取值的时候才会执行 内部会维护一个 dirty 属性，来控制依赖
阅读全文
摘要：nextTick在哪里使用？原理是什么？ nextTick内部采用了异步任务进行包装（多个nextTick调用会被合并成一次，内部会合并回调）最后在异步任务中批处理。 主要应用场景就是异步更新（默认调度的时候就会添加一个·nextTick 任务）用户为了获取最终的渲染结果需要在内部任务执行之后再执行
阅读全文
摘要：mixin的使用和原理 使用： 可以通过 Vue.mixin 来实现逻辑的复用,问题在于数据来源不明确。声明的时候可能对导致命名冲突 vue3 采用的就是 compositionAPI 局部混入： var myMixin = { created: function () { this.hello()
阅读全文
摘要：Vue的生命周期 钩子函数是如何实现？ 内部利用一个发布订阅模式，将用户写的钩子维护成一个数组，后续依次调用hooks。主要靠的是mergerOptions 方法有哪些？ 引用自https://vue3js.cn/interview/vue/lifecycle.html#%E4%BA%8C%E3%8
阅读全文
摘要：diff算法 diff算法的特点就是平级比较，内部采用了双指针方式进行优化，优化了常见的操作。采用了递归比较的方式。 针对一个节点的diff算法 先拿出根节点来进行比较如果是同一个节点则比较属性，如果不是同一个节点则直接换成最新的即可。 同一个节点比较属性后，复用老节点 比较儿子 一方有儿子 一方没
阅读全文
摘要：异步更新 异步更新原因 以下情况下： vm.name = '123' vm.name = '234' vm.name = '123' ... 如果我们频繁的修改一个数据，就会多次触发视图渲染dep.notify->watcher.update 这样就会降低性能，因此就需要采用异步更新策略，仅仅在最后
阅读全文
摘要：依赖收集的过程 前言 使用真实节点替换原始节点，主要涉及以下步骤： 1.新老节点的更新方案。 2.虚拟节点与真实节点映射。 3.实现新老节点的替换。 依赖收集 已经完成了Vue的两大核心部分：响应式数据和数据渲染，即完成了整个Vue的初始化流程： 当new Vue()时，执行_init初始化，通过m
阅读全文
摘要：虚拟DOM转化为真实DOM vnode虚拟节点创建真实节点，主要有以下几步： Vue原型方法_update的扩展。 patch方法：既有初始化的功能又有更新的逻辑。 createElm方法：根据虚拟节点创建真实节点。 _update方法： // 将vnode转化为真实dom Vue.prototyp
阅读全文
摘要：根据render函数生成vnode 上文介绍 上面已经将模板编译成了render函数，下面就要使用render函数，从而完成渲染的操作： 首先，根据render函数生成虚拟节点；然后根据虚拟节点+真实数据生成真实节点。 实现mountComponent方法，完成渲染 虚拟节点生成 封装vm._ren
阅读全文
摘要：生成render函数 前言 上篇，生成ast语法树，而这篇使用ast语法树生成render函数。 export function compileToFunction(template) { // 1，将模板编译称为 AST 语法树 let ast = parserHTML(template); //
阅读全文
摘要：将模板编译成ast语法树 complileToFunction方法 vue数据渲染：template模板->ast语法树->render函数，模板编译的最终结果结果就是render函数。 在complileToFunction方法中，生成render函数，需要以下两个核心步骤： 通过parserHT
阅读全文
摘要：解析模板参数 前言 在vue中，vue的初始化流程中，会做两件事： 状态初始化：实现数据的响应式 将数据挂载到页面上 因此后面就要实现将数据挂载到页面上。 export function initMixin(Vue) { Vue.prototype._init = function (options
阅读全文
摘要：数组的劫持 数组劫持的思路 对于数组劫持的目标是实现数组的响应式： 在Vue中，我们很少会使用索引进行操作数组，并且认为有七个方法能够改变数组： push、pop、splice、unshift、reverse，sort。所以，需要对七个方法进行特殊处理，是他们能够劫持到数组的数据变化，就能够实现数组
阅读全文
摘要：对象响应式原理 初始化操作，扩展init方法： // index.js function Vue(options) { this._init(options) } initMixin(Vue) // 扩展了init方法 export default Vue 在initMinin方法中，扩展了init
阅读全文
摘要：npm init -y创建初始化package.json并修改script为"dev": "rollup -cw " 安装rollup及其插件: npm install rollup rollup-plugin-babel @babel/core @babel/preset-env --save-d
阅读全文
