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 ...