preface

I have been working for one year since graduation, and I have been developing React project. But before graduation, I basically used VUE to develop my internship. The work was relatively easy for a while, and since I haven’t written vUE project for a long time, I want to get familiar with VUE again. But infatuated me, actually want to see vUE source, so I went online to buy a source code to explain the class. I looked at it twice. Maybe I was too stupid to forget it after a while, so I decided to go to the third time and take notes. Below I will share my record with you.

Preschool guidelines

If you want to debug the vue source code, you can create a vue project with vue create my-app, and then go to vue. Esm. js or vue. Runtime.esm. js in the dist folder of vue under node_modules

What have you done since new Vue()

initMixin(Vue);   // Vue. Prototype add _init() method
renderMixin(Vue);  // Vue. Prototype adds the _render() method
lifecycleMixin(Vue); // Add the _update() method to vue.prototype
Copy the code

This chapter focuses on the code derived from these three lines of code, but let’s start by looking at what initMixin(Vue) does.

initMixin(Vue)

function initMixin (Vue) {
  Vue.prototype._init = function (options) {
     var vm = this; Create a vm,...$options = vm.$options = vm.$options = vmvm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ); }... initLifecycle(vm);// Initial life cycle
   initEvents(vm); // Initialize the event
   initRender(vm); // The initial render function
   callHook(vm, 'beforeCreate'); // Execute the beforeCreate lifecycle hook. initState(vm);// Initialize data, props, methods computed, watch. callHook(vm,'created');  // Executes an Created lifecycle hook
   
   if (vm.$options.el) {
      vm.$mount(vm.$options.el); // This is also the key point}}Copy the code

Take a look at what initMixin() does from the code.

  1. The first step is to create a VM, (this VM is very important, be sure to hit the debugger to debug the following, see what the VM output).
  2. $options = vm.$options = vm.$options = vm.
  3. The third step starts to initialize the life cycle, events, render functions, and so on,
  4. Step 4 Execute the VM.options.el);

What does initState(VM) do? What function does it execute

initState(vm)

function initState (vm) {... var opts = vm.$options;if (opts.props) {  // If your.vue file defines props, then initProps() is invoked
        initProps(vm, opts.props); 
     } 
     if (opts.methods) {  // If methods are defined in your.vue file, initMethods() will be executed
        initMethods(vm, opts.methods); 
     }
     if (opts.data) {// If your.vue file defines data, initData() will be executed.
        initData(vm);
     } 
     if (opts.computed) { // If you define computed in your.vue file, then initComputed() is executed
        initComputed(vm, opts.computed); 
     }
     if(opts.watch && opts.watch ! == nativeWatch) {// If you have.watch, initWatch() will be executedinitWatch(vm, opts.watch); }}Copy the code

The code we’re going to put in initState must have something familiar to us. The code here should be very easy to read with comments. Since there is a lot of code, I chose initData(VM) to explain it in detail

function initData (vm) {
   var data = vm.$options.data;  // Get the data defined in the.vue file
       data = vm._data = typeof data === 'function'
       ? data.call(vm, vm) // If data defines a function, point data's this to the VM: data || {}; . var keys =Object.keys(data);
       var props = vm.$options.props;
       var methods = vm.$options.methods;
      // Pass through, data, props, methods, to see if the same key is defined, and if the same name is not defined, the console will give a message. var i = keys.length;while (i--) {
           var key = keys[i];
           proxy(vm, "_data", key); 
        }
      // Add publish to data, subscribe to Object. defineProperty()
       observe(data, true /* asRootData */); Finally, add reactive, which will be explained in more detail in a later section.function proxy (target, sourceKey, key) {
    sharedPropertyDefinition.get = function proxyGetter () {
       return this[sourceKey][key]
    };
    sharedPropertyDefinition.set = function proxySetter (val) {
       this[sourceKey][key] = val;
    };
    Object.defineProperty(target, key, sharedPropertyDefinition);
}
Copy the code

Let’s look at what initData() does in the code.

  1. Determine whether data is a function or an object (this is a very common interview question).
  2. The second step is to get the key of the data, the key of the props, and the key of the methods, and see if there are any identical keys. If there are no identical keys, pass through the data defined in the data and add the publish subscribe with Object.defineProperty(). If you are not familiar with object.defineProperty (), you can use _data here, and this._data.msg can also be used to get data in project development

conclusion

So that’s it for new vue(), next time we’ll get down to it, if you don’t know, you can comment below and get the video from me