看 Vue 源码步骤前言本文主要记一下看Vue源码的步骤,以 Vue 2.6 为例，研究一下 Vue 到底对 data

前言

本文主要记一下看Vue源码的步骤,以 Vue 2.6 为例，研究一下 Vue 到底对 data 做了什么

第一步

首先进入 Vue 官网
点击 Github

第二步

点击 dev 输入自己想要看的分支版本，切换到这个分支

截屏2021-12-19 下午11.50.22.png

选择 src 这个目录

截屏2021-12-19 下午11.52.45.png

进入后选择 core

截屏2021-12-19 下午11.53.11.png

想研究哪个就去看哪个目录

这里去看一下 Vue 的实例

截屏2021-12-19 下午11.55.59.png

第三步

点开 index.js

import { initMixin } from './init'  // 4. initMixin 从这里来的，于是去找当前目录的 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. 构造了一个Vue的函数，有一个 options，它做了啥？
  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. 初始化了 options，那这个 _init, 做了啥？
}

initMixin(Vue)  // 3. 看名字 init，利用排除法 感觉是它做的，然后去看 initMixin 哪来的（ cmd/ctrl + f 搜索一下）
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

第四步

来到当前目录的 init.js

链接

截屏2021-12-20 上午12.09.12.png 在 Vue 原型上加了 init属性，接收一个 options,那它到底做了啥？于是就往下面找

截屏2021-12-20 上午12.12.09.png 感觉是这个 initState(vm) 因为找不到 data，退而求其次看它，其他的看的不像
于是去看initState(vm)它是从哪里来的

截屏2021-12-20 上午12.15.55.png 去找当前目录下的 state 目录

第五步

全局查找 initState

截屏2021-12-20 上午12.19.24.png

if (opts.data) { 
  initData(vm)  // 如果你传了data 它就会初始化 data  
} else { 
  observe(vm._data = {}, true /* asRootData */)
}

全局查找 initData

function initData (vm: Component) {
  let data = vm.$options.data  // 拿到 options 里的 data
  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)   // 对 vm 进行代理，用 _data 进行存储那个 key ，这段代码在源码147行
    }
  }
  // observe data
  observe(data, true /* asRootData */)  // 监听原始对象
}

去看看代理咋写的

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)  // 最核心的一行，它会对vm 进行代理
}