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源码解读-构造函数的更多相关文章

  1. Vue 源码解读(1)—— 前言

    当学习成为了习惯,知识也就变成了常识. 感谢各位的 点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github 仓库 liyongning/blog ...

  2. Vue 源码解读(2)—— Vue 初始化过程

    当学习成为了习惯,知识也就变成了常识. 感谢各位的 点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github 仓库 liyongning/blog ...

  3. Vue 源码解读(5)—— 全局 API

    目标 深入理解以下全局 API 的实现原理. Vue.use Vue.mixin Vue.component Vue.filter Vue.directive Vue.extend Vue.set V ...

  4. Vue 源码解读(6)—— 实例方法

    前言 上一篇文章 Vue 源码解读(5)-- 全局 API 详细介绍了 Vue 的各个全局 API 的实现原理,本篇文章将会详细介绍各个实例方法的实现原理. 目标 深入理解以下实例方法的实现原理. v ...

  5. Vue 源码解读(11)—— render helper

    前言 上一篇文章 Vue 源码解读(10)-- 编译器 之 生成渲染函数 最后讲到组件更新时,需要先执行编译器生成的渲染函数得到组件的 vnode. 渲染函数之所以能生成 vnode 是通过其中的 _ ...

  6. Vue 源码解读(3)—— 响应式原理

    前言 上一篇文章 Vue 源码解读(2)-- Vue 初始化过程 详细讲解了 Vue 的初始化过程,明白了 new Vue(options) 都做了什么,其中关于 数据响应式 的实现用一句话简单的带过 ...

  7. Vue 源码解读(4)—— 异步更新

    前言 上一篇的 Vue 源码解读(3)-- 响应式原理 说到通过 Object.defineProperty 为对象的每个 key 设置 getter.setter,从而拦截对数据的访问和设置. 当对 ...

  8. Vue 源码解读(8)—— 编译器 之 解析(上)

    特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了上下两篇,所以在阅读本篇文章时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(下)一起阅读. 前言 V ...

  9. Vue 源码解读(8)—— 编译器 之 解析(下)

    特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了两篇文章,本篇是对 Vue 源码解读(8)-- 编译器 之 解析(上) 的一个补充,所以在阅读时请同时打开 Vu ...

随机推荐

  1. luogu P1362 兔子数 x

    P1362 兔子数 题目描述 设 S(N ) 表示 N 的各位数字之和,如 S(484) = 4+8+4 = 16, S(22) = 2+2 = 4.如果一个正整数满足 S(x*x) = S(x) * ...

  2. ORA-01440:要减小精度和标准,则要修改的列必须为空

    修改字段的精度时,提示“ ORA-01440:要减小精度和标准,则要修改的列必须为空 ” 解决方法:将该表中的数据全部删除即可

  3. 实验吧(你真的会PHP吗)CTF之代码审计最终版---解析是错的 我的才是对的

    0X01代码的详细讲解 0X02代码分析完了 我们来理一下 思路 条件 A POST提交一个number参数的值不能为纯数字 C number取整数后是回文数 D number经过strval转译后的 ...

  4. [CSP-S模拟测试]:点亮(状压DP+树上背包DP)

    题目传送门(内部题121) 输入格式 第一行,一个正整数$n$. 第二行,$n-1$个正整数$p_2,p_3,...,p_n$.保证$p_u$是在$1$到$u-1$中等概率随机选取的. 接下来$n$行 ...

  5. 我的 CSDN 博客目录索引(主要记录了我学习视频、书籍的笔记,持续更新中)

    我的 CSDN 博客地址: lw_power的专栏 - 博客频道 - CSDN.NEThttp://blog.csdn.net/lw_power 佟刚老师<Spring4视频教程>学习笔记 ...

  6. Python统计学statistics实战

    python机器学习-乳腺癌细胞挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003&u ...

  7. MobileNets: Efficient Convolutional Neural Networks for Mobile Vision Applications

    1. 摘要 作者提出了一系列应用于移动和嵌入式视觉的称之为 MobileNets 的高效模型,这些模型采用深度可分离卷积来构建轻量级网络. 作者还引入了两个简单的全局超参数来有效地权衡时延和准确率,以 ...

  8. 第一篇 python数据类型

    IO文件输出 问题1:Python如何实现print不换行? 默认情况下Python的print()函数是换行的,如 print("你好大成") print("!!!&q ...

  9. go-ethereum开发问题

    1. abigen 参考文档(Native DApps: Go bindings to Ethereum contracts) abigen --sol token.sol --pkg token - ...

  10. Flex TabNavigator

    1.获取子项个数 TabNavigator.numChildren(int) 2.对于静态的TabNavigator的如何处理权限显示 for(var i:int=0;i <tab.numChi ...