vue源码解读-构造函数

KunMinX 发布于2019-08-26 13:23 / 2023人阅读

摘要：此文件主要实现了初始化引入模块什么时候需要把代码放到包呢，个人感觉如果代码能够复用而且脱离项目能够应用到另一个项目可以考虑放到构造函数大家在这里可能会觉得，既然选择打包工具，那为啥不选择呢，应该是和后边需要定义静态方法和属性有关，语法暂不支

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

GPU云服务器云服务器源码解读 webrtc源码解读构造函数 webrtc fec源码解读

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108743.html

Vue源码解读(1)--src/core/index.js 入口文件

摘要：生产版本设为可以启用检查。只适用于开发模式和支持的浏览器上指定组件的渲染和观察期间未捕获错误的处理函数为的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效，在生产环境下它会被忽略。 Vue源码主入口:src/core/index.js import Vue from ./instance/index // 引用Vue构造器 import { initGlobalAPI }...

tangr206 2019-08-22 17:36 评论0 收藏0
vue源码解读-目录结构

摘要：目录结构构建相关的文件，一般情况下我们不需要动钩子别名配置目录结构 ├── scripts ------------------------------- 构建相关的文件，一般情况下我们不需要动│ ├── git-hooks ------------------------- git钩子│ ├── alias.js -------------------------- 别名配...

philadelphia 2019-08-23 13:51 评论0 收藏0
(解析)vue源码解读

摘要：前言为什么要做源码解读我们新到一个环境，第一件事情就是熟悉环境熟悉项目，这个很考验阅读源码的能力以及耐心。构造函数拉到最下面，导出的是一个构造函数。前言 A: 为什么要做源码解读？Q: 我们新到一个环境，第一件事情就是熟悉环境熟悉项目，这个很考验阅读源码的能力以及耐心。vue是个很好的库，知名度高，对js的学习具有向上性，所以搞清楚逻辑是有好处的。A: 阅读源码的程度？Q: 我们完全...

mingde 2019-08-23 12:38 评论0 收藏0
【Vue 2.0】核心源码解读 -- 不定期更新

摘要：观察员由模板解析指令创建的观察员负责模板中的更新视图操作。观察员种类目前了解情况来看主要分三类视图指令的计算属性的用户自定义的介绍关于 Vue.js 的原理一直以来都是一个话题。经过几天的源码学习和资料介绍，我将一些个人理解的经验给写下来，希望能够与大家共勉。附上GITHUB源码地址, 如果有任何不解可以在文章下面提出或者写下issue, 方便大家回答和学习, 有兴趣可以St...

sunsmell 2019-08-21 16:51 评论0 收藏0
vuex 2.0源码解读（一）

摘要：简单点说，当你使用构造函数，它实际上做了这么几件事，首先定义给实例定义一些内部属性，之后就是绑定和的上下文对象永远是实例上，之后根据传入的充实内部状态等等。函数执行的结果是返回一个对象，属性名对应于传入的对象或者数组元素。转载请注明出处 https://segmentfault.com/a/11... vuex2.0 和 vuex1.x 相比，API改变的还是很多的，但基本思想没什么...

luqiuwen 2019-08-20 11:32 评论0 收藏0