Vue源碼閱讀之8狀態初始化

進入create狀態的第二個過程就是狀態的初始化，狀態的初始化是對於Vue對象的Props,Methods,Data,watch,computed進行初始化經過這裏Vue的一些關鍵的屬性才被初始化可以去使用。

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)
  }
}

首先是爲組件對象創建監聽屬性_watchers並初始化爲空數組。

獲取傳入組件的參數並分別獲取其各部分的數據。

props屬性初始化

如果傳入的數據具有props屬性則對props屬性進行初始化，props屬性的初始化過程是獲取傳入的所有的props屬性名，生成此屬性名的合法屬性名。然後調用defineReactive函數爲此屬性設置getter和setter函數監視參數的變化。對於這個屬性組件中沒有調用proxy函數設置此組件的此屬性的getter和setter函數。

methods屬性初始化

如果傳入的值具有methods屬性則對組件的methods屬性進行初始化，遍歷methods屬性中的屬性名，如果methods屬性中的屬性名對應的屬性值爲null將會進行警告，如果此屬性名在props屬性中也存在 也將會警告，如果此屬性名是預留屬性也將會進行報錯，最後將此屬性的定義在組件上。

data屬性初始化

如果傳入的值具有data屬性則對組件的data屬性進行初始化，如果data的類型爲函數設置data的值爲調用函數後返回的值，如果是其他類型直接使用此data值。如果data的數據類型不是對象類型則會設置data爲空的對象並進行警告。遍歷data中的所有的屬性，如果這些屬性存在於props中methods中進行警告，如果屬性不在預留屬性中，將此屬性添加到組件的_data屬性中進行代理。調用observe函數觀察data數據的變化。如果沒有data屬性也會創建一個空的data屬性對象並觀察data數據的變化。

computed屬性初始化

如果傳入的數據具有computed屬性，首先創建一個空的監聽數組並判斷是否是服務器端進行渲染，遍歷computeds屬性中的所有屬性，並獲取其處理函數，如果不是服務器端渲染則爲這個屬性創建監聽器對象，如果這個屬性不存在於組件對象中調用defineComputed函數爲此組件的此函數定義getter和setter屬性，對於不是發佈模式對於此屬性也存在於data或者是props屬性中進行警告。

watch屬性初始化

如果傳入的數據具有watch屬性，遍歷watch屬性中的所有的屬性，並獲取此屬性的處理函數，如果是數組對於數組的每一個參數調用createWatcher函數在組件中添加此屬性，如果是不是數組調用createWatcher函數在組件中添加此屬性。

 經過上面的敘述我們可以看到組件相關的一些用戶定義的屬性的初始化過程，經過這個過程其中的屬性變量纔可以進行使用。但是我們可以看到methods屬性中的值可能會覆蓋props屬性，data屬性可能會覆蓋props和methods屬性，computed屬性可能會覆蓋data和props和methods屬性。當我們創建這些屬性的時候最好不要屬性名相同他們會出現屬性的覆蓋現象。