创建Vue类的过程

更新日期: 2019-12-14阅读: 1.8k标签: 

1.构造函数

// src/core/instance/index.js
//构造函数
function vue (options) {
  ...
  this._init(options)
}

2.全局配置对象

// src/core/global-api/index.js
//全局config对象,我们几乎不会用到
import config from '../config'
Vue.config = {
  keyCodes,
  // LIFECYCLE_HOOKS in src/shared/constants.js
  _lifecycleHooks: ['beforeCreate', 'created', ...]
}

3.默认options配置

// src/core/global-api/index.js
// 默认的options配置,我们每个组件都会继承这个配置。
Vue.options = Object.create(null)
ASSET_TYPES.forEach(type => {
  Vue.options[type + 's'] = Object.create(null)
})
Vue.options._base = Vue
extend(Vue.options.components, builtInComponents)

// 最后的结果:
Vue.options = {
  beforeCreate, // 比如 vue-router 就会注册这个回调,因此会每一个组件继承
  components, // 前面提到了,默认组件有三个 `KeepAlive`,`transition`, `transitionGroup`,这里注册的组件就是全局组件,因为任何一个组件中不用声明就能用了。所以全局组件的原理就是这么简单
  directives, // 默认只有 `v-show` 和 `v-model`
  filters // 不推荐使用了
}

4.一些全局方法

// src/core/global-api/index.js
Vue.component // 注册组件
Vue.directive // 注册指令
Vue.set = set// 添加全局方法 数据的修改操作
Vue.delete = del
Vue.nextTick = nextTick // 添加全局方法 Vue.nextTick 下一个tick执行函数
initUse(Vue)// 添加全局方法 Vue.use 注册插件
initMixin(Vue)// 添加全局方法 Vue.mixin 混入mixin用的
initExtend(Vue)
initAssetRegisters(Vue)

5.Vue.prototype 上不同作用的方法

// src/core/instance/index.js
initMixin(Vue)// 添加的 _init 方法,是Vue实例初始化的入口方法,会调用其他的功能初始化函数
stateMixin(Vue)// 添加的三个用来进行数据操作的方法 data,props,watch
eventsMixin(Vue)// 添加的事件方法 on,off,one,emit
lifecycleMixin(Vue)// 添加的生命周期相关的方法 _update,$forceUpdate,$destroy
renderMixin(Vue)// 添加的 $nextTick,_render和一堆renderHelper

链接: https://www.fly63.com/article/detial/6926

es6之js的类

ES6 的类让 JS 中的继承变得更简单,因此对于你已从其他语言学习到的类知识,你无须将其丢弃。 ES6 的类起初是作为 ES5 传统继承模型的语法糖,但添加了许多特性来减少错误。

利用 es6 new.target 来对模拟抽象类

最近在使用 Symbol 来做为唯一值,发现 Symbol 无法进行 new 操作,只能当作函数使用,只要进行了new 就会发生类型错误,在不考虑底层实现的情况下,在代码层面是否能够实现一个函数只可以进行调用而不可以进行 new 操作呢?

Js即将加入私有字段和私有方法

尽管 JavaScript 在 2015 年就有了类,但仍然没有私有字段和私有方法。由于 TC39 委员会 内部存在分歧,这些功能在最初版本中被取消。有三个规范草案打算在不久的将来将这些功能引入到 JavaScript 类中。

ts中类的定义

类里面的修饰符 typescript里面定义属性的时候给我们提供了 三种修饰符public :公有 在当前类里面、 子类 、类外面都可以访问,protected:保护类型 在当前类里面、子类里面可以访问 ,在类外部没法访问

javascript中uber实现子类访问父类成员

上面代码通过实例化子类和父类,分别调用toString()实现了继承的关系。这个时候有这样的需求;不实例化父类,直接通过子类完完整整的调用父类的方法或属性。

如何在Vue中动态添加类名

能够向组件添加动态类名是非常强大的功能。它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体。添加动态类名与在组件中添加 prop :一样简单。

了解JavaScript中的类

javascript是一种基于原型的语言,javascript中的每个对象都有一个名为[[原型]]的隐藏内部属性,可用于扩展对象属性和方法。直到最近,勤奋的开发人员使用构造函数来模仿JavaScript中面向对象的设计模式。

javascript如何定义类?

JavaScript中没有类或接口的概念,即不能直接定义抽象的类,也不能直接实现继承。不过,为了编程的方便,我们可以在JavaScript中模拟类和继承的行为。

JS一些类实现方式的性能研究

这再次证明了JS的写法很灵活(举个反面的例子,如Python,其哲学原则是one way to go!)。这里整理一下,研究一下各种实现的性能问题

在Vue中如何避免在动态绑定类出现空类的情况?

传递空字符串,这可能会导致 DOM 输出中的类为空。 在三元运算符中,我们可以返回null,这可以确保 DOM 中没有空类

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!