Vue源码解读-构造函数
src/core/instance/index.js
此文件主要实现了Vue初始化
// 引入模块
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'
// 什么时候需要把代码放到util包呢,个人感觉如果代码能够复用而且脱离项目能够应用到另一个项目可以考虑放到util
/*
构造函数 大家在这里可能会觉得,既然选择打包工具,那为啥不选择class呢,应该是和后边需要定义Vue静态方法和属性有关,
es6语法暂不支持对静态属性的定义
*/
function Vue (options) {
// this instanceof Vue 可以判断函数是不是 new关键字调用
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
// 封装好的警告方法 console.warn();
warn('Vue is a constructor and should be called with the `new` keyword')
}
// 调用初始化方法
this._init(options)
}
/*
Mixin 混入的意思在这里大家可以理解成扩展
以下方法在vue prototype 中扩展方法
这里通过不同的函数来给vue prototye添加不同的功能,
这种代码拆分思想很值得借鉴,尤其是在写复杂逻辑,
将复杂逻辑拆分成不同的功能,这样代码清晰方便维护
*/
// Vue 初始化 简言之就是 合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher
initMixin(Vue)
// 在这里state可以理解为 在vue原型vue.prototype扩展了vue实例中$date,$props,$set,$delete,$watch
stateMixin(Vue)
// 对事件的扩展 包括$on,$once,$emit,$off 应用的设计模式为观察者模式
eventsMixin(Vue)
/*
扩展生命周期方法
Vue.prototype._update
Vue.prototype.$forceUpdate 强制更新
Vue.prototype.$destroy 销毁
*/
lifecycleMixin(Vue)
/*
Vue.prototype.$nextTick = function (fn: Function) {}
Vue.prototype._render = function (): VNode {}
*/
renderMixin(Vue)
export default Vue
原文地址:https://segmentfault.com/a/1190000017080309
Vue源码解读-构造函数的更多相关文章
- Vue 源码解读(1)—— 前言
当学习成为了习惯,知识也就变成了常识. 感谢各位的 点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github 仓库 liyongning/blog ...
- Vue 源码解读(2)—— Vue 初始化过程
当学习成为了习惯,知识也就变成了常识. 感谢各位的 点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github 仓库 liyongning/blog ...
- Vue 源码解读(5)—— 全局 API
目标 深入理解以下全局 API 的实现原理. Vue.use Vue.mixin Vue.component Vue.filter Vue.directive Vue.extend Vue.set V ...
- Vue 源码解读(6)—— 实例方法
前言 上一篇文章 Vue 源码解读(5)-- 全局 API 详细介绍了 Vue 的各个全局 API 的实现原理,本篇文章将会详细介绍各个实例方法的实现原理. 目标 深入理解以下实例方法的实现原理. v ...
- Vue 源码解读(11)—— render helper
前言 上一篇文章 Vue 源码解读(10)-- 编译器 之 生成渲染函数 最后讲到组件更新时,需要先执行编译器生成的渲染函数得到组件的 vnode. 渲染函数之所以能生成 vnode 是通过其中的 _ ...
- Vue 源码解读(3)—— 响应式原理
前言 上一篇文章 Vue 源码解读(2)-- Vue 初始化过程 详细讲解了 Vue 的初始化过程,明白了 new Vue(options) 都做了什么,其中关于 数据响应式 的实现用一句话简单的带过 ...
- Vue 源码解读(4)—— 异步更新
前言 上一篇的 Vue 源码解读(3)-- 响应式原理 说到通过 Object.defineProperty 为对象的每个 key 设置 getter.setter,从而拦截对数据的访问和设置. 当对 ...
- Vue 源码解读(8)—— 编译器 之 解析(上)
特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了上下两篇,所以在阅读本篇文章时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(下)一起阅读. 前言 V ...
- Vue 源码解读(8)—— 编译器 之 解析(下)
特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了两篇文章,本篇是对 Vue 源码解读(8)-- 编译器 之 解析(上) 的一个补充,所以在阅读时请同时打开 Vu ...
随机推荐
- codevs 5960 信使x
题目描述 Description •战争时期,前线有n个哨所,每个哨所可能会与其他若干个哨所之间有通信联系.信使负责在哨所之间传递信息,当然,这是要花费一定时间的(以天为单位).指挥部设在第一个哨所. ...
- JSP中EL表达式不能使用的问题
在JSP2.0中,增加了EL语言,可以通过EL语言,可以通过EL语言,实现获取数据,进一步将scriptlet 代码从JSP页面中分离出来.EL语言给大家带来了方便,但有时,也会遇到EL表达式不能显示 ...
- Spring Boot教程(二十五)返回JSON格式
在上述例子中,通过@ControllerAdvice统一定义不同Exception映射到不同错误处理页面.而当我们要实现RESTful API时,返回的错误是JSON格式的数据,而不是HTML页面,这 ...
- springboot 使用redis
安装redis教程:https://www.cnblogs.com/nongzihong/p/10190489.html 依赖: <!--配置redis--> <dependency ...
- 对于Java培训出身的同学,接下来该怎么学习技术?
首先恭喜从培训班出来找到工作的同学,确实挺不容易的,4个月的培训,每天从早上9点到晚上9点,也是996,主要的活动地方就是宿舍和教室, 让我现在也去培训,我估计还熬不下来. 尤其是对于从小白开始的同学 ...
- 20175212童皓桢 《Java程序设计》第11周学习总结
20175212童皓桢 <Java程序设计>第11周学习总结 教材学习内容总结 一.URL类 1.一个URL对象通常包含最基本的三部分信息:协议.地址.资源 2.构造方法: public ...
- sql server关键字大全
保留关键字 Microsoft® SQL Server™ 2000 使用保留关键字定义.操作和访问数据库.保留关键字是 SQL Server 使用的 Transact-SQL 语言语法的一部分,用于分 ...
- LeetCode 24. 两两交换链表中的节点(Swap Nodes in Pairs)
题目描述 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 示例: 给定 1->2->3->4, 你应该返回 2->1->4->3. 说明: 你的算法只能 ...
- weblogic域,管理服务器,受管服务器,集群和机器的基本知识
1.域(Domain) •它是什么? –是一个逻辑上管理的WebLogic Server组,这些组从管理上当作一个整体来操作 •域里面有什么? –服务器 –服务器集群 –机器 •规则: –同一个域中的 ...
- centos6.4编译gcc6.4
#!/bin/bash dir=$(pwd) echo $dir cd $dir #wget https://gmplib.org/download/gmp/gmp-6.1.2.tar.xz .tar ...