Vue深刻響應式原理

Vue.js實現響應式的核心是利用了es5的object.defineProperty，這也是vue.js不能兼容ie8及如下瀏覽器的緣由。

Object.defineProperty

Object.defineProperty方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，並返回這個對象，看下它的語法：

Object.defineProperty(obj,prop,descriptor)

obj是要在其上定義屬性的對象;prop是要定義或修改的屬性的名稱;descriptor是將被定義或修改的屬性描述符。descriptor裏有不少可選鍵值，咱們最關心的是get和set,get是一個給屬性提供的getter方法，當咱們訪問了該屬性的時候會觸發getter方法;set是一個給屬性提供的setter方法，當咱們對該屬性作修改的時候會觸發setter方法。一旦對象擁有了getter和setter，咱們能夠簡單地把這個對象稱爲響應式對象。

initState

在Vue的初始化階段,_init方法執行的時候，會執行initState(vm)方法，它的定義在src/core/instance/state.js中。

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}
複製代碼

initState方法主要是對props、methods、data、computed和watcher等屬性作了初始化操做。這裏咱們重點分析下props和data，

initProps

function initProps (vm: Component, propsOptions: Object) {
  const propsData = vm.$options.propsData || {}
  const props = vm._props = {}
  // cache prop keys so that future props updates can iterate using Array
  // instead of dynamic object key enumeration.
  const keys = vm.$options._propKeys = []
  const isRoot = !vm.$parent
  // root instance props should be converted
  if (!isRoot) {
    toggleObserving(false)
  }
  for (const key in propsOptions) {
    keys.push(key)
    const value = validateProp(key, propsOptions, propsData, vm)
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      const hyphenatedKey = hyphenate(key)
      if (isReservedAttribute(hyphenatedKey) ||
          config.isReservedAttr(hyphenatedKey)) {
        warn(
          `"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
          vm
        )
      }
      defineReactive(props, key, value, () => {
        if (vm.$parent && !isUpdatingChildComponent) {
          warn(
            `Avoid mutating a prop directly since the value will be ` +
            `overwritten whenever the parent component re-renders. ` +
            `Instead, use a data or computed property based on the prop's ` + `value. Prop being mutated: "${key}"`, vm ) } }) } else { defineReactive(props, key, value) } // static props are already proxied on the component's prototype
    // during Vue.extend(). We only need to proxy props defined at
    // instantiation here.
    if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }
  }
  toggleObserving(true)
}
複製代碼

props的初始化主要過程，就是遍歷定義的props配置。遍歷的過程主要作兩件事，一是調用defineReactive方法把每一個prop對應的值變成響應式，能夠經過vm._props.xxx訪問到定義props中對應的屬性。另外一個是經過proxy把vm._props.xxx的訪問代理到vm.xxx上。

initData

function initData (vm: Component) {
  let data = vm.$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)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}
複製代碼

拿到option.data賦值給vm._data變成一個對象，而後遍歷全部的keys值，而後在某些狀況下報一些警告，而後把_data上的東西代理到咱們的vm實例上。另外調用observe觀測整個data的變化，把data也變成響應式，能夠經過vm._data.xxx訪問到定義data返回函數中對應的屬性。

proxy

代理的做用是把props和data上的屬性代理到vm實例上，這也就是爲何咱們定義了以下props，卻能夠經過vm實例訪問到它。

let test = {
    props:{
        msg:'hello world'
    },
    methods:{
        getTest(){
            console.log(this.msg)
        }
    }
}
複製代碼

咱們在getTest函數中經過this.msg訪問到咱們定義的props中的msg,這個過程發生在proxy階段:

const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop
}
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)
}

複製代碼

經過Object.defineProperty把target[sourceKey][key]的讀寫變成了對target[key]的讀寫。因此對於props而言，對vm._props.xxx的讀寫變成了vm.xxx的讀寫，而對於vm.xxx訪問定義在props中的xxx屬性了。同理對於data而言，對vm._data.xxxx的讀寫變成了對vm.xxxx的讀寫，而對於vm._data.xxxx的讀寫，咱們能夠訪問到定義在data函數返回對象中的屬性，因此咱們就能夠經過vm.xxxx訪問到定義在data函數返回對象中的xxxx屬性了。