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 ...
随机推荐
- Springboot 系列(十七)迅速使用 Spring Boot Admin 监控你的 Spring Boot 程序,支持异常邮件通知
1. Spring Boot Admin 是什么 Spring Boot Admin 是由 codecentric 组织开发的开源项目,使用 Spring Boot Admin 可以管理和监控你的 S ...
- Luogu P4708 画画 (Burnside引理、组合计数)
题目链接 https://www.luogu.org/problem/P4708 题解 看上去Luogu P4706-4709是Sdchr神仙出的一场比赛,一道水题和三道很有趣的题终于全过了纪念QAQ ...
- 【Python】学习笔记一:Hello world
前言 在我看来,无论我们学习什么语言第一个学习的估计都是Hello world,那么接下来就从Hello world说起! 编写代码 我在本机上已经安装了pycharm,所以我所编辑的代码都是在pyc ...
- .tcc文件
今天看源码时碰到一个MemoryPool.h文件和MemoryPool.tcc文件,毫不犹豫在vs工程下把.tcc加到了源文件文件夹下, 把.h文件放到了头文件文件夹下.结果闹了笑话: 以下是解释, ...
- CentOS 7下载
CentOS 7官方下载地址:https://www.centos.org/download/ 转载https://blog.csdn.net/yxwmzouzou/article/details/7 ...
- spark 笔记 14: spark中的delay scheduling实现
延迟调度算法的实现是在TaskSetManager类中的,它通过将task存放在四个不同级别的hash表里,当有可用的资源时,resourceOffer函数的参数之一(maxLocality)就是这些 ...
- leetcode 509斐波那契数列
递归方法: 时间O(2^n),空间O(logn) class Solution { public: int fib(int N) { ?N:fib(N-)+fib(N-); } }; 递归+记忆化搜索 ...
- [Flask]使用sqlite数据库
app.py from flask import Flask from flask_sqlalchemy import SQLAlchemy import os basedir = os.path.a ...
- web开发(三) 会话机制,Cookie和Session详解
在网上看见一篇不错的文章,写的详细. 以下内容引用那篇博文.转载于<http://www.cnblogs.com/whgk/p/6422391.html>,在此仅供学习参考之用. 一.会话 ...
- java:(九大内置对象,计算服务器访问次数,filter过滤器,MVC框架,MVC和三层架构的关系)
1.九大内置对象: <%@ page language="java" import="java.util.*" pageEncoding="UT ...