自己看了很多的文檔的讀書筆記，也還沒整理好。。。。。
先說明一點每一個組件其實就是vue的實例 每一個組件內部都有一個watcher的實例 每一個watcher實例都有更新渲染dom節點的update方法 dep的實例保存着很多watcher實例
創建一個組件或者vue的實例過程中執行以下步驟： 搭配官網生命周期圖食用
2. vm._self = vm
3. /*初始化生命周期*/
4. initLifecycle(vm)
5. /*初始化事件*/
6. initEvents(vm)
7. /*初始化render*/
8. initRender(vm)
9. /*調用beforeCreate鈎子函數並且觸發beforeCreate鈎子事件*/
10. callHook(vm, 'beforeCreate')
11. initInjections(vm) // resolve injections before data/props
12. /*初始化props、methods、data、computed與watch*/
13. initState(vm)
14. initProvide(vm) // resolve provide after data/props
15. /*調用created鈎子函數並且觸發created鈎子事件*/
16. callHook(vm, 'created')
17.
18. /* istanbul ignore if */
19. if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
20. /*格式化組件名*/
21. vm._name = formatComponentName(vm, false)
22. mark(endTag)
23. measure(`${vm._name} init`, startTag, endTag)
24. }
25.
26. if (vm.$options.el) {
27. /*掛載組件 內部創建一個watcher實例 */
28. vm.$mount(vm.$options.el)
29. }
1初始化事件函數以及初始化生命周期函數 初始化render函數
事件函數就是 on emit once這些事件 聲明周期函數就是 created啊 beforecreated這種
執行完成之后執行beforeCreated鈎子
2 初始化狀態 初始化注入值
其中初始化狀態中執行了這么一些方法 看圖
首先通過proxy方法(原理還是Object.defineProperty) 對data中的值進行代理
第二 通過observer方法中的defineReactive 對data中的數據重寫get set方法
然后在get方法中進行了依賴收集 判斷當前的Dep.target（就是當前實例的watcher對象）是否存在 存在的話吧watcher丟進dep.的sups中 還有set方法先不說
Dep類(發布者)
執行完成之后執行Created鈎子（這時候可以訪問data屬性和以及一些方法）
3 判斷當前實例是否含有el屬性 如果有的話會再次判斷是否有template屬性 有的話把template編譯成render函數 --- 沒有el的話 等到組件注冊調用才會調用mount方法
------------執行beforeMounted方法 這時候可以獲取生成的虛擬dom vndom但是因為沒有掛載 所以是無法獲取dom結構的
4 執行$mount.方法 這個方法是干嘛的呢！ 非常重要
回到get 方法 get方法 干了什么呢
先說明一點 在對每一個data中的屬性進行getset方法綁定的同事 內部定義了一個dep實例（什么意思呢 就是可以說每一個data中的屬性都有一個dep實例） get方法中先判斷是否有dep.target 上面new watcher 把當前的實例watcher賦值給了dep.target 所以也就是把需要相應更新的watcher實例push進了subs中 這就進行了依賴收集
------------如果是第一次更新的話執行Mounted生命周期鈎子 如果是之后修改值觸發set操作執行beforeUpdate生命周期鈎子(內部有一個標示量進行判斷 執行了mounted賦值為true) 這時候可以獲取dom結構 已經進行了掛載了
這時候修改值 然后觸發set操作的時候會調用dep實例的notify方法 然后循環里面所有的watcher訂閱者進行update方法—update方法會重新生成一個rendertree然后通過diff算法計算需要渲染的節點重新渲染
大佬們的圖解釋
