1. Data-driven, that is, two-way binding of data
After the data changes, the page will be re-rendered. This is Vue responsiveness. So how is this done?
To complete this process, we need:
Detect changes in
data Collect which data the view relies on When the
data changes, automatically "notify" the part of the view that needs to be updated, and update it
The corresponding professional sayings are:
- Data hijacking / data agency
- Dependent collection
- Publish and subscribe model
In other words: the core of Vue's responsiveness is that dependencies are collected when getter, and dependency updates are triggered when setter.
Vue will traverse all the properties of the object in the data, and use Object.defineProperty to convert all these properties into getter/setter.
These getters/setters are invisible to users, but internally they allow Vue to track dependencies and notify changes when the property is accessed or modified.
Each component instance corresponds to a watcher instance, which records the “touched” data property as a dependency during the component rendering process.
In the getter, we will collect dependencies. Dependent collection is the collection of watchers for subscription data changes. The purpose of dependency collection is to notify the corresponding subscribers to process related logic when the responsive data changes.
The dependency update is triggered when the setter is set, and then when the setter of the dependency is triggered, the watcher is notified, so that its associated components are re-rendered.
to sum up:
1) Principle:
When a Vue instance is created, Vue will traverse the properties of the data option, use Object.defineProperty to add getters and setters to the properties to hijack the reading of data (getters are used for dependency collection, and setters are used to distribute updates), and internally track dependencies , Notify changes when properties are accessed and modified.
Each component instance will have a corresponding watcher instance, which will record all dependent data attributes (dependency collection, computed watcher, user watcher instances) during component rendering, and then the setter method will notify when the dependency is changed. The watcher instance that relies on this data is recalculated (distributed updates),
So that its associated components are re-rendered.
2) The realization process:
我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。
Because there are many subscribers, we need a message subscriber Dep to collect these subscribers, and then perform unified management between the listener Observer and the subscriber Watcher. Next, we also need to have an instruction parser Compile, which scans and parses each node element,
Correspondingly initialize the relevant instruction into a subscriber Watcher, and replace the template data or bind the corresponding function. At this time, when the subscriber Watcher receives the change of the corresponding attribute, it will execute the corresponding update function to update the view. So next we perform the following 3 steps to achieve two-way binding of data:
1. Implement a listener Observer, which is used to hijack and monitor all attributes, and notify subscribers if there are changes.
2. Implement a subscriber Watcher, which can receive notifications of property changes and execute corresponding functions to update the view.
3. Implement a parser Compile, which can scan and parse the relevant instructions of each node, and initialize the corresponding subscriber according to the initialization template data
注: Proxy is a new feature of JavaScript 2015. Proxy's proxy is for the entire object, not a certain property of the object, so unlike Object.defineProperty, it must traverse each property of the object. Proxy only needs to be a proxy to monitor all property changes under the same level structure. Of course, for deep structures, recursion still needs to be performed. In addition, Proxy supports changes in the proxy array. Proxy is the method used by vue3.0
Second, the component system
Core options of components
1 Template: The template declares the mapping relationship between the data and the DOM that is finally displayed to the user.
2 Initial data (data): The initial data state of a component. For reusable components, this is usually a private state.
3 Accepted external parameters (props): The components pass and share data through parameters.
4 Methods (methods): The data modification operations are generally carried out in the component methods.
5 Lifecycle hooks: A component will trigger multiple lifecycle hooks. The latest version 2.0 has changed the names of lifecycle functions.
6 Private resources (assets): In Vue.js, user-defined instructions, filters, components, etc. are collectively referred to as resources. A component can declare its own private resources. Private resources can only be called by the component and its subcomponents.