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 ...
随机推荐
- 多态:JVM是如何进行方法调用的
在我们平时的工作学习中写java代码时,如果我们在同一个类中定义了两个方法名和参数类型都相同的方法时,编译器会直接报错给我们.还有在代码运行的时候,如果子类定义了一个与父类完全相同的方法的时候,父类的 ...
- C++入门经典-例2.13-左移运算
1:代码如下: // 2.13.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> using ...
- Shell中的条件测试和循环语句
1.条件测试:test或[ 如果测试结果为真,则该命令的Exit Status为0,如果测试结果为假,则命令的Exit Status为0 运行结果: 带与.或.非的测试命令[ ! EXPR ] : E ...
- spark中使用的内存文件系统-Tachyon FS 简介
转自:http://blog.csdn.net/u014252240/article/details/41810849 发布人:南京大学PASA大数据实验室顾荣 1. Tachyon是什么 Tach ...
- 谈谈DevOps和TestOps个人见解
首先是百度百科和维基百科的解释对DevOps的说明: https://baike.baidu.com/item/devops DevOps是开发运维,而TestOps则测试运维.DevOps(Deve ...
- koa 基础(一)新建/启动 项目
1.创建项目 npm init -y npm install --save koa 2.app.js // 引入模板 var koa = require('koa'); // 实例化 var app ...
- 全面解读php-php会话控制技术
一.PHP会话控制技术 1.为什么要使用会话控制技术? 因为http协议是无状态协议,所以同一个用户在请求同一个页面两次的时候,http协议不会认为这两次请求都来自于同一个用户,会把它们当做是两次请求 ...
- python出现AttributeError: module ‘xxx’ has no attribute ‘xxx’错误时,两个解决办法
运行python程序时,也许会出现这样的错误:AttributeError: module ‘xxx’ has no attribute ‘xxx’: 解决该错误有两种方法 1.手动安装该模块 2.检 ...
- 关于eclipse安装插件的问题
使用eclipse(luna)不行,其为安装了ee有关插件的 使用eclipse(Juno)可以,其为原生版本
- Sublime text3 Version 3.2.2, Build 3211破解
一.修改hosts hosts地址: C:\Windows\System32\drivers\etc #sublimetext 127.0.0.1 www.sublimetext.com 127.0. ...