VUE source code based on VUE responsive principle of understanding
VUE uses Obsever to instantiate data to the Object itself. The Dep property in the instance Object is used to collect dependencies, and object.defineProperty is used to convert properties into getters and setters. A deP constant is referenced by a closure in the getter/seter to trace dependencies. The get function is responsible for returning the correct attribute value and tracing dependencies, while the set function is responsible for correctly setting new values for attributes and triggering dependencies. Each instance corresponds to a Watcher instance that informs Wacher when a dependency’s seter/getter fires, causing its associated data to be re-rendered. Before proxy, VUE could not listen for object attribute changes. VUE provided $set and vue. set methods to enable us to add new attributes to the object and trigger dependencies, which in fact trigger the DEP () in OB instantiated object. VUE intercepts array methods and triggers dependencies in array methods to listen for array changes. Proxy, as opposed to defineProperty, cares about the specific key and intercepts changes and reads of Object.key, while DefineProperty cares about the Object itself
Calculate attribute
The computed attribute is a computed object defined by the user. First, define the Watchers array and computedWatchers as an empty object. Then, the computed object passed in by the user is traversed and the function passed in by the user is obtained as the getter of the computed attribute. Then generate a Watcher for each key of the calculated attribute and put it in the Watchers array. After initialization, the Watcher will save a status object, which makes the calculated attribute implement lazy evaluation. We then call defineComputed to proxy the calculated property under this and use DEP to collect the dependencies so that they can be notified during evaluation. In the process of calculation, the current value of the calculated attribute will be first obtained and compared with the last calculated value. Only when the value changes, the view will be triggered to re-render and the cache of the calculated attribute will be realized.
Listen to attribute
Watch is not cacheable, but more of an observer, listening for certain data to perform callbacks. When we need to listen deeply for properties in an object, we can turn on the deep: True option, which will listen for each item in the object. Computed properties are suitable for most scenarios, but listening properties are recommended when asynchronous or expensive operations need to be performed
nextTick
Schedule view updates asynchronously through NextTICK. When you manipulate the DOM during the Create() life cycle, you can do it in Nexttike because the DOM has not yet started rendering. Or actions that need to be performed after a data change can be performed in a NextTick callback.
The diff algorithm
Vue will use Pointers to mark the old and new head nodes and the old and new tail nodes respectively to make a cross-comparison between head and end. If no match is found after comparison, all the keys of the old nodes will be used as a mapping and the KEY of the new node will be used to find the location that can be reused in the old node. The matching pointer is then continuously shrunk inward until the Pointers of the old and new nodes meet. If index is used as the Key, when components are reordered, the component that can be fully reused changes because the Key value does not change, and thus a more performance-consuming update process is triggered. In addition, the wrong node will be deleted due to the key value.
VUE life cycle
First, the beforCreat lifecycle is initialized. This phase initializes props, Methods, data, computed, and Watch. Then the Created phase compiles the template, generates the AST abstract syntax tree, generates the Rander tree, and renders in the beforeMount phase. Build the Vnode using the Rander tree generated in the previous step, create a new node using the createElement function and render it into the Dom node. If there is a child component, it enters the life cycle of the child component. After the child component mounts, the parent component enters the mounted life cycle. In the (Mounted) stage, Dom elements are already accessible. This is followed by the beforeUpdate and Update lifecycle, where components are re-rendered if there are changes to the props data. The component rendering update process is complete until updated. The beforeDestory life cycle of a component before destruction clears some relationships between components, turns off logic such as watcher, and then goes to deatory.
VUEX
VUEX is a state management mechanism. It consists of state View and Action. State is responsible for managing state. VUEX’s core container is the Store, which contains most of the state in the application. Vuex’s state store is responsive and cannot directly change the state in the Store. VUEX can be registered globally so that each component can obtain the state through this.$store.state. A getter is equivalent to a calculated property in VUEX. When the state in State changes, the getter automatically recalculates. Mutation is the only way to change state in a store. The state in the store can be changed by mutation displayed in the component. It is important to note that mutation can only run synchronous code. Actions are used to handle asynchronous changes and can be triggered by a displayed Dispatch in a component. Change the state in the action with commit mutation.
VUE-router
Vue routing has two modes. The default hash route is used, and the windows.history pushState, replaceState API is called to change the route. Fallback is listening for the browser’s popState or hash event and executing the transitionTo method. This.router.push essentially calls the internal history. Method push, calculates a new path with hash values, and executes transitonTo to switch routes. The router is defined as a responsive property during initialization, so the router-view can be re-rendered when the router changes