1. Data Driven
-Data responsive, two-way binding, data-driven
-Data response:
The data model is just an ordinary JavaScript object, and when we modify the data, the view will be updated,
Avoid complex DOM operations and improve development efficiency.
-Two-way binding
Data changes, view changes; view changes, data changes.
We can use v-model to create two-way data binding on form elements
-Data-driven is one of the most unique features of Vue
During the development process, you only need to pay attention to the data itself, not how the data is rendered on the view.
Two, Vue2.X responsive principle
-When you pass a normal JavaScript object into a Vue instance as the data option, Vue
It will traverse all the properties of this object and use Object.defineProperty to set these properties
Sex is all converted to getter/setter. Object.defineProperty is one of ES5
The shim (downgrade) feature is the reason why Vue does not support IE8 and lower browsers.
Three, Vue3.X responsive principle
-Use Proxy to monitor objects instead of properties, which has better performance than defineProperty.
Four, publish and subscribe mode
-We assume that there is a "signal center", and when a task is completed, "publish" to the signal center
A signal, other tasks can "subscribe" to the signal center to subscribe to this signal, so as to know what they are
Time can start execution. This is called the "publish/subscribe pattern" publish-subscribe pattern
Five, the observer mode
-Watcher
-Target Dep
-subs array: store all observers
-addSub(): add observer
-notify(): When an event occurs, call the update() method of all observers
-No event center
Six, virtual DOM
-Manual DOM operation is more troublesome, and browser compatibility issues need to be considered. Although there are libraries such as jQuery to simplify DOM operations,
But with the complexity of the project, the complexity of DOM operations increases
-In order to simplify the complex operations of the DOM, various MVVM frameworks have emerged. The MVVM framework solves the problem of synchronization of views and states.
In order to simplify the operation of the view, we can use the template engine, but the template engine does not solve the problem of tracking state changes.
So Virtual DOM appeared
-The advantage of Virtual DOM is that it does not need to update the DOM immediately when the state changes, only a virtual tree needs to be created to describe the DOM,
Virtual DOM will figure out how to effectively (diff) update the DOM
-Refer to the description of virtual-dom on github:
-Virtual DOM can maintain the state of the program and track the last state
-Update the real DOM by comparing the difference between the two states before and after
Seven, the role of virtual DOM
-Maintain the relationship between views and states
-Improve rendering performance in complex view situations
-In addition to rendering DOM, SSR (Nuxt.js/Next.js), native applications (Weex/React Native), applets, etc. can also be implemented