“This is the 25th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Vue.js source code analysis – componentization

Now we’re going to reviewVueComponentization of, componentization isVueA very important concept in,VueThe core components of theData bindingandcomponentization

Componentization review

  • A Vue component is a Vue instance with predefined options
  • A component can make up a functional area on a page, and a component can contain
    • The script
    • style
    • The template

As shown in the figure below, we can divide the page into many modules, which we can splice together as needed. Just like building blocks, each component may have other components nested in smaller granularity, making it easier to reuse

Which raises a question:

  • Is the granularity of components as small as possible?

Comments and discussions are welcome!

The component registration

Let’s review how components are registered

  • Global registration: any scope on the page can be used
  • Local registration: only available in the current registration scope

Let’s go through a bit of code to recall how components are registered

Vue.component('comp', {
      template: '<h1>hello</h1>'
})
Copy the code

Let’s take a look at the implementation of Vue.com Ponent

component

Vue.com Ponent is a static method

  • Path: the SRC \ core \ global – API \ assets. Js
  • Create the component’s constructor and mount it toVueThe instancevm.options.component.componentName = Ctor
// src\core\global-api\index.js
// Register vue.directive (), Vue.component(), vue.filter ()
initAssetRegisters(Vue)

// src\core\global-api\assets.js
if (type === 'component' && isPlainObject(definition)) {
    definition.name = definition.name || id
    definition = this. The options. _base. The extend (definition)}...// Global register, store resources and assign values
// this.options['components']['comp'] = Ctor
this.options[type + 's'][id] = definition

// src\core\global-api\index.js
// this is used to identify the "base" constructor to extend all plain-object
// components with in Weex's multi-instance scenarios.

Vue.options._base = Vue

// src\core\global-api\extend.js

Vue.extend()
Copy the code

extend

In Vue.com Ponent, if the second argument is passed to a component option object, the vue.extend method is called internally to convert the component’s option object to its subclass of options, the component’s constructor, so we say that the component is also a Vue instance

  • Path to the SRC \ core \ global – API \ extend js
const Sub = function VueComponent (options) {
    this._init(options)
}

Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = Sub
Sub.cid = cid++
Sub.options = mergeOptions(
    Super.options,
    extendOptions
)
Sub['super'] = Super

// For props and computed properties, we define the proxy getters on
// the Vue instances at extension time, on the extended prototype. This
// avoids Object.defineProperty calls for each instance created.
if (Sub.options.props) {
    initProps(Sub)
}

if (Sub.options.computed) {
    initComputed(Sub)
}

// allow further extension/mixin/plugin usage
Sub.extend = Super.extend
Sub.mixin = Super.mixin
Sub.use = Super.use

// create asset registers, so extended classes
// can have their private assets too.
ASSET_TYPES.forEach(function (type) {
    Sub[type] = Super[type]
})

// enable recursive self-lookup
if (name) {
    Sub.options.components[name] = Sub
}
Copy the code