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 ...
随机推荐
- luoguP1041 传染病控制 x
P1041 传染病控制 题目背景 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范围流行,该国政府决定不惜一切代价控制传染病的蔓延.不幸的是,由于人们尚未完全认识这种传染 ...
- oracle中更新关键字merge和 with as关键字
merge是oracle特有的语句,两表关联操作(增.删.改)就效率非常高 merge into table_name alias1 using (table|view|sub_query) alia ...
- C++入门经典-例3.14-使用while循环计算从1到10的累加
1:代码如下: // 3.14.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...
- HTML5 localStorage setItem getItem removeItem
HTML5 WEB存储中提供了两种客户端的数据存储方法:localStorage 还有sessionStorage localStorage: localStorage 方法存储的数据没有时间限制.第 ...
- LeetCode 46. 全排列(Permutations)
题目描述 给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [ ...
- 三、Linux下mysql的完整安装
参考资料:http://www.cnblogs.com/fly1988happy/archive/2011/11/21/2257682.html http://www.cnblogs.com/xion ...
- Mysql 基础操作命令
1,查看mysql的建表语句 show create table tableName; #tableName 库中已存在的表名
- GetRGB下载
下载地址:https://pan.baidu.com/s/11EyUPa2WxhIgdsTRZtj_eg 07年6-8月做的,用于屏幕取色. 2019年8月30日13点50分
- sqlToolbox 1.82 Beta版 下载
下载链接:https://pan.baidu.com/s/1jCTRe0NGgEb5qF3BDN_jTQ 久违的回忆. 2019年8月30日13点43分
- BOSCH汽车工程手册————自适应巡航速度控制ACC
驾驶员通过自动速度控制器操纵键,将汽车行驶速度控制在预设的期望速度上. ACC系统则在自动速度控制的基础上检测本车到前面行驶汽车的距离以及相对速度,以及其他车道上的信息. 利用这些数据就能控制两车之间 ...