StateMixin what the hell is this?!
Welcome to the big devil (Chen blog), skip those grandiose introduction, after all, VUE source code is saved in the hard disk data, want to tear vUE source need enough strength to tear hard disk, duck don’t duck don’t ~ ~, let’s savor, read the VUE, understand the architecture of VUE thinking
StateMixin horror horror! Hiss ～～～～ belch ~ ~ ah ~ cool! 🙂
I should have gotten straight to the point at this point and introduced what stateMixin is, right? You also think so. If you think so, you are totally wrong
intance/state.js
First of all, we can see from the inttance /index.js file that stateMixin is exposed from the state.js file
So let’s open this file and take a look at it. We’re surprised to see that the famous state is only a few dozen lines of code, full of 50 lines! You heard me right! All you need to know is 50 lines of code and you can take him! Don’t miss it! The function also has three lines of comments that tell us “When using Object.defineProperty, the flow has some problems with definition objects that are declared directly, so we have to build the object here programmatically.”
PropsDef (dataDef, propsDef, dataDef, propsDef, propsDef, dataDef, propsDef, propsDef, dataDef, propsDef) {} The dataDef get method gets this._data, and the propsDef get returns this._props, and then adds both variables to the Vue prototype via Object
Expansion of knowledge 1 ️
observe/index.js
Next is the assignment of delete and delete and delete and set on the prototype chain. The assigned variable functions come from the set and del methods exposed in the observe-index.js file
The set, del
The set method takes an object, target can be an object or an array, and determines whether the target is an array. If it is an array, it operates on the array subscript. The method called is splice, which is one of the variational methods on arrays in Vue2.0. If it is an Object, it will determine whether the key exists in the Object prototype, and will only operate on the properties passed in from the target Object… Writing on this side is a bit empty without code support, so it is better to write a comment on the source code and paste it 🙂
In this section, we introduce the implementation of set and delete and accept the format of the parameter target. We can find that set and set and delete can operate on arrays.
instence/index.js
$watch (); $watch (); $watch (); $watch (); The first argument can be a function. Slowly make a question mark.
First, let’s look at an implementation of the createWatcher method
observe/watcher.js
Second, we get to the core code of Vue, which implements the data-driven, publisher/subscriber model. Watcher is an object implemented using the Class class. The entire file is over 200 lines, not much, but not the core of this blog. Now I’m going to look at one of Watcher’s teardown methods that WE’re going to use in a moment
Initialize the watcher to determine if it is RenderWatcher or not. If not, add the watcher to vm._watchers
The tearDown method deletes the Watcher object
instence/index.js
Finally, summarize the $watch method
And last but not least, what did stateMixin do to initialize the prototype
Delete and $watch instance methods, milk ~
Expand the knowledge
Expansion of knowledge 1 ️
Use object.create (null) to create an Object that has no prototype
