源码
前端小白 - GavinWu
keep learning
展开
-
解析vue2.x源码之组件的生命周期
基本概念介绍: 在日常开发中,我们会在组件的生命周期函数内编写代码,等待组件在适当的时机调用。 生命周期函数有: beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryd。 那么组件是在什么时候调用这些生命周期函数的?在调用生命周期函数时又分别做了什么呢? created: 在...原创 2020-03-08 18:52:08 · 351 阅读 · 0 评论 -
解析vue2.x源码之vue实例方法与全局API
基本概念介绍: vue实例方法:vm.$set、vm.$del、vm.$nextTick等,挂在Vue.prototype上的方法。 全局API: Vue.directive、Vue.filter、Vue.component等,挂在Vue构造函数上的方法。 本章从源码角度分析,Vue.js是如何实现这些功能的 一、Vue实例方法的实现: Vue构造函数源码: import { ini...原创 2020-03-07 22:06:44 · 390 阅读 · 0 评论 -
解析vue2.x源码之模板编译
基本概念介绍: 在vue框架中,我们写的html模板会被编译成渲染函数,渲染函数会生成vnode,最终以vnode渲染视图。 渲染流程如下: 本章内容讲模板编译的过程,vue是如何讲html模板转化成render函数的呢? 模板编译可分为三个步骤: 1、将html模板转换化成AST(AST即抽象语法树,是一个用来表示html的js对象) 2、将AST中的静态节点打上标签 3、用A...原创 2020-01-01 18:35:19 · 504 阅读 · 2 评论 -
vue3.0 响应式原理实战
最近在学习vue3.0的源码,对照着源码手写了一个响应式demo。 用proxy实现响应式数据,改变数据时自动更新视图。 在线demo:http://gavincat.cn:8081/ 具体实现原理可看源码,我在里面做了详细的注释。 源码链接:https://github.com/752848087coder/vue3.0-reactiveDemo vue3.0响应式源码...原创 2019-12-22 23:13:12 · 399 阅读 · 0 评论 -
解析vue2.x源码之API $set、$del
本章内容是基于vue变量侦测的相关API,对vue变量侦测的源码不了解的同学可以先看这篇文章: 解析vue2.x源码之Object与Array的变化侦测 基本概念介绍: 上一章讲过vue的变量侦测存在缺陷,以下两种情况vue无法侦测到数据的变化,导致依赖无法被触发 1.object新增或者删除key 2.通过下标修改array的值 针对这个缺陷,vue提供了$set, $del用于...原创 2019-12-13 00:08:15 · 272 阅读 · 0 评论 -
解析vue2.x源码之Object与Array的变化侦测
基本概念介绍: Vue框架是如何实现变量的变化侦测的呢? Object 利用了 Object.defineProperty 进行变量的getter与setter拦截,但数组的实现与 Object 有所不同,下面会从源码层面具体讨论这两种类型的变量如何实现变化侦测。 首先我们需要先了解Vue源码中的三个类: 一、Observer Observer类负责将复杂类型的变量转化成响应式数据,转化...原创 2019-12-06 00:53:11 · 468 阅读 · 0 评论 -
解析vue2.x源码之diff算法
tips: 本章内容需要 vnode(虚拟DOM) 作为基础,对vnode还不太了解的小伙伴可以先看一下这一篇文章 解析vue2.x源码之虚拟DOM 基本概念介绍: 在vue框架中,我们写的html模板会被编译成渲染函数,渲染函数会生成vnode,最终以vnode渲染视图。 渲染流程如下: 若是首次渲染,此时并没有oldVnode,直接以vnode为模板渲染视图。 若并非首次渲...原创 2019-11-20 01:34:34 · 483 阅读 · 1 评论 -
解析vue2.x源码之虚拟DOM
基本概念介绍: 虚拟DOM节点, vue源码中命名为vnode。 vnode是一个用来描述真实DOM节点的js对象,它与真实DOM节点一一对应,vue渲染视图时会根据vnode为模板进行渲染。 vnode源码: export default class VNode { tag: string | void; data: VNodeData | void; children: ...原创 2019-11-28 22:47:52 · 219 阅读 · 0 评论