簡單描述new Vue發生了什么
Vue是function實作的class，當執行new Vue()的時候，會進入到這個function，執行this._init()初始化，同時傳入options引數，_init方法是在原型上掛載的方法，它是在什么時候被定義的呢？實際上我們初始化的時候下面會執行initMixin()混入，這個方法是在init.js中被定義的，方法中在原型上掛載_init方法
_init方法做了一堆初始化的操作，比如定義uid，合并options，它會把傳入的options合并到$options等等，我們就可以通過$options.el訪問的到代碼中的el，$options.data訪問到代碼中的data
然后還初始化了一下生命周期，事件，render函式，state等等，一堆初始化操作結束之后判斷當前的$options.el有沒有el，el: '#app'最侄訓轉換成dom物件字串，之后呼叫$mount掛載
我們在data中定義的message為什么可以在其他地方通過this訪問到，實際上初始化的時候執行了initState方法，這個方法做了什么呢？
如果定義了props就初始化props,如果定義了methods就初始化methods，如果定義了data就呼叫initData初始化data
initData方法中，從$options.data中拿到拿到定義的data物件，之后判斷這個物件是不是一個function，通過我們推薦data是一個函式return一個物件，如果data是一個函式就呼叫getData方法
里面回傳了data.call()方法的呼叫，就是data中return的物件，除了賦值給data之外，還賦值給了vm._data
如果判斷data不是一個函式就報一個警告data functions should return an object
接下來就拿到data的key值和prop以及methods的值，做一個對比，比如說如果在data中定義了message這個變數，那么接下來就不能在prop和methods中定義這個變數，因為他們最終都掛載到vm上，也就是this，是Vue，這個主要是通過proxy(vm, '_data' , key)來實作的，proxy是一層代理
通過sharedPropertyDefinition物件定義的get和set這兩個函式和Object.defineProperty(target, key, sharedPropertyDefinition)這個target就是傳入的vm,sourceKey就是傳入的_data，key是傳入的message，所以最后通過this[sourceKey][key]相當于this._data.message拿到值
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/260614.html
標籤：其他