We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
There was an error while loading. Please reload this page.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vue源码最终是向外部抛出一个Vue的构造函数,见源码:
function Vue (options) { this._init(options) }
在源码最开始,通过installGlobalAPI方法(见源码)向Vue构造函数添加全局方法,如Vue.extend、Vue.nextTick、Vue.delete等,主要初始化Vue一些全局使用的方法、变量和配置;
installGlobalAPI
Vue.extend
Vue.nextTick
Vue.delete
export default function (Vue){ Vue.options = { ..... } Vue.extend = function (extendOptions){ ...... } Vue.use = function (plugin){ ...... } Vue.mixin = function (mixin){ ...... } Vue.extend = function (extendOptions){ ...... } }
当使用vue时,最基本使用方式如下:
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
此时,会调用构造函数实例化一个vue对象,而在构造函数中只有这句代码this.init(options);而在init中(源码),主要进行一些变量的初始化、option重组、各种状态、事件初始化;如下:
this.init(options)
Vue.prototype._init = function (options) { options = options || {} this.$el = null this.$parent = options.parent this.$root = this.$parent ? this.$parent.$root : this this.$children = [] this.$refs = {} // child vm references this.$els = {} // element references this._watchers = [] // all watchers as an array this._directives = [] // all directives ...... // 更多见源码 options = this.$options = mergeOptions( this.constructor.options, options, this ) // set ref this._updateRef() // initialize data as empty object. // it will be filled up in _initData(). this._data = {} // call init hook this._callHook('init') // initialize data observation and scope inheritance. this._initState() // setup event system and option events. this._initEvents() // call created hook this._callHook('created') // if `el` option is passed, start compilation. if (options.el) { this.$mount(options.el) } }
在其中通过mergeOptions方法,将全局this.constructor.options与传入的options及实例化的对象进行合并;而this.constructor.options则是上面初始化vue时进行配置的,其中主要包括一些全局使用的指令、过滤器,如经常使用的"v-if"、"v-for"、"v-show"、"currency":
mergeOptions
this.constructor.options = { directives: { bind: {}, // v-bind cloak: {}, // v-cloak el: {}, // v-el for: {}, // v-for html: {}, // v-html if: {}, // v-if for: {}, // v-for text: {}, // v-text model: {}, // v-model on: {}, // v-on show: {} // v-show }, elementDirectives: { partial: {}, // <partial></partial> api: https://v1.vuejs.org/api/#partial slot: {} // <slot></slot> }, filters: { // api: https://v1.vuejs.org/api/#Filters capitalize: function() {}, // {{ msg | capitalize }} ‘abc’ => ‘Abc’ currency: funnction() {}, debounce: function() {}, filterBy: function() {}, json: function() {}, limitBy: function() {}, lowercase: function() {}, orderBy: function() {}, pluralize: function() {}, uppercase: function() {} } }
然后,会触发初始化一些状态、事件、触发init、create钩子;然后随后,会触发this.$mount(options.el);进行实例挂载,将dom添加到页面;而this.$mount()方法则包含了绝大部分页面渲染的代码量,包括模板的嵌入、编译、link、指令和watcher的生成、批处理的执行等等,后续会详细进行说明;
this.$mount(options.el)
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Uh oh!
There was an error while loading. Please reload this page.
整体概览
Vue源码最终是向外部抛出一个Vue的构造函数,见源码:
在源码最开始,通过
installGlobalAPI
方法(见源码)向Vue构造函数添加全局方法,如Vue.extend
、Vue.nextTick
、Vue.delete
等,主要初始化Vue一些全局使用的方法、变量和配置;实例化Vue
当使用vue时,最基本使用方式如下:
此时,会调用构造函数实例化一个vue对象,而在构造函数中只有这句代码
this.init(options)
;而在init中(源码),主要进行一些变量的初始化、option重组、各种状态、事件初始化;如下:在其中通过
mergeOptions
方法,将全局this.constructor.options与传入的options及实例化的对象进行合并;而this.constructor.options则是上面初始化vue时进行配置的,其中主要包括一些全局使用的指令、过滤器,如经常使用的"v-if"、"v-for"、"v-show"、"currency":然后,会触发初始化一些状态、事件、触发init、create钩子;然后随后,会触发
this.$mount(options.el)
;进行实例挂载,将dom添加到页面;而this.$mount()方法则包含了绝大部分页面渲染的代码量,包括模板的嵌入、编译、link、指令和watcher的生成、批处理的执行等等,后续会详细进行说明;The text was updated successfully, but these errors were encountered: