vue
人人都能懂的Vue源码系列—09—initEvents
上篇文章中,我们主要讲了initLiftcycle方法,它的作用是初始化vm实例中和生命周期相关的属性。今天为大家介绍另一个方法——initEvents。
从这个方法的名称来看,我们知道它是和事件相关的方法,具体怎么相关,我们先来看源码。
export function initEvents (vm: Componen
...
人人都能懂的Vue源码系列—08—initLifecycle
上篇文章,我们讲了vm._renderProxy相关的内容。主要是通过Proxy为我们vm属性添加一些自定义的行为。今天我们回到init方法中,为大家讲解initLifecycle。
initLifeCycle方法用来初始化一些生命周期相关的属性,以及为parent,child等属性赋值,来看源码。
export fu
...
人人都能懂的Vue源码系列—07—initProxy
前几篇文章中,我们主要讲了merge options的一些操作。今天我们回到init方法往下讲。
if (process.env.NODE_ENV !== ‘production’) {
initProxy(vm)
} else {
vm._renderProxy = vm
}
上面的代码逻辑很简单,主要就是
...
人人都能懂的Vue源码系列—06—mergeOptions-下
上篇文章,我们讲到了mergeOptions的部分实现,今天接着前面的部分讲解,来看代码,如果大家觉得看讲解枯燥可以直接翻到本文的最后看mergeOptions的整个流程图。
const extendsFrom = child.extends
if (extendsFrom) {
parent = me
...
人人都能懂的Vue源码系列—05—mergeOptions-上
前几篇文章中我们讲到了resolveConstructorOptions,它的主要功能是解析当前实例构造函数上的options,不太明白的同学们可以看本系列的前几篇文章。在解析完其构造函数上的options之后,需要把构造函数上的options和实例化时传入的options进行合并操作并生成一个新的options。
这
...
人人都能懂的Vue源码系列—04—resolveConstructorOptions函数-下
上一篇文章中说道,resolveConstructorOptions函数要分两种情况进行说明,第一种是Ctor为基础构造器的情况,这个已经向大家介绍过了,今天这篇文章主要介绍第二种情况,Ctor是Vue.extend创建的"子类"。
Ctor是Vue.extend创建的"子类"
...
人人都能懂的Vue源码系列—03—resolveConstructorOptions函数-上
上篇文章介绍了Vue构造函数的部分实现,当前Vue实例不是组件时,会执行mergeOptions方法。
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
merge
...
人人都能懂的Vue源码系列—02—Vue构造函数
上篇博文中说到了Vue源码的目录结构是什么样的,每个目录的作用我们应该也有所了解。我们知道core/instance目录主要是用来实例化Vue对象,所以我们在这个目录下面去寻找Vue构造函数。果然我们找到了Vue的构造函数定义。
function Vue (options) {
if (process.env.N
...
人人都能懂的Vue源码系列(一)—Vue源码目录结构
阅读Vue的源码,或者阅读一个框架的源码,了解它的目录结构都是很有帮助的。下面我们来看看Vue源码的目录结构。
Vue各目录简介
Vue源码各个目录的详细介绍
熟悉每个模块具体的功能,对之后深入研究源码还是很有帮助的。
下次我们谈论的主题是Vue的构造函数,当new Vue实例的时候,会发生什么呢?生成的Vue实例
...
记一次 vue项目中使用 scss
一 概述
随着sass/less等css预处理器的出现,编写css变的越来越有乐趣。所以现在越来越多的人在项目中喜欢使用scss或者less。(我自己就是一个)。由于最近在写一个vue项目。所以就把写项目期间每天的一些知识点写在博客里。所以最近的博客应该都会和vue有关。今天要和大家分享的就是如何在vue项目中引入sc
...