preface

This article mainly notes the steps to see Vue source code, Vue 2.6 as an example, to study what Vue does to data

The first step

First go to Vue official website and click on Github

The second step

Click dev to enter the version of the branch you want to see and switch to that branch

Select the directory SRC

Enter and select Core

Go to any directory you want to study

Take a look at an example of Vue here

The third step

It opens at index. Js

import { initMixin } from './init'  // 4. InitMixin comes from here, so go to the current directory init
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '.. /util/index'

function Vue (options) {  // 1. Construct a Vue function with an options, what does it do?
  if(process.env.NODE_ENV ! = ='production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')}this._init(options)  // 2. If options are initialized, what does _init do?
}

initMixin(Vue)  InitMixin (CMD/CTRL + F); // If (CMD/CTRL + F)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue
Copy the code

The fourth step

Go to init.js in the current directory

link

Add init property to Vue prototype, receive an options, so what does it do? So he looked down

It feels like this.initState(vm)Because I can’t find data, I look at it next to anything else

Then go to theinitState(vm)Where did it come from

Go to the state directory in the current directory

Step 5

Find initState globally

if (opts.data) { 
  initData(vm)  // If you pass data, it will initialize data
} else { 
  observe(vm._data = {}, true /* asRootData */)}Copy the code

Find initData globally

function initData (vm: Component) {
  let data = vm.$options.data  // Get the data in options
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  if(! isPlainObject(data)) { data = {} process.env.NODE_ENV ! = ='production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    )
  }
  // proxy data on instance
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if(process.env.NODE_ENV ! = ='production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if(props && hasOwn(props, key)) { process.env.NODE_ENV ! = ='production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if(! isReserved(key)) { proxy(vm,`_data`, key)   // Proxy vm, _data store that key, this code in source code line 147}}// observe data
  observe(data, true /* asRootData */)  // Listen on the original object
}
Copy the code

Go see what the agent wrote

export function proxy (target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)  // The core line, which proxies the VM
}
Copy the code

This code uses the get set and passes it to Object.defineProperty. This key has the get set property and can access the original data VM through the proxy. Once the _data proxy is used, call Observe (data).

Step 6

Global search observe where did it come from

Enter.. /observer/index.js

Find the function of Observe

The value of the above code represents that it will receive a value (that value is the data)

In line 124, let’s see what this observer does

If it’s an array, observe. If it’s not, walk

Let’s see what the walk does

It defineReactive for every attribute of this object

Let’s see what this defineReactive is

This function is going to get an object and its corresponding key, val is the original value, what does this key do?

It overrides the original property, gets it and it reads its val first (line 161)

When I write to the data on the right, I try to read it (174 lines), and then go back to val (188 lines)

conclusion

Don’t casually look at the source code, have to know the principle can go to see the source code, even the principle don’t know how to learn through the source code? Basic knowledge is not firm, to learn ***, so through the source code to learn to have a premise, that is, you are a master, I also do not understand = =, a small rookie, this article is just a simple record of a ha, see source code learning is not advisable, the foundation of the first solid, some things do not need to see the source code can also know about how to write. \

If you don’t know about Object.defineProperty, check out this article

  • Learn more about Object.defineProperty