What is the core of vue

vue has two cores: 1. Data-driven, that is, two-way binding of data, allowing the content of the view (DOM) to change as the data changes; 2. Component-based system that can extend HTML Element that encapsulates available code.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Two cores of vue.js

• Data-driven

• Componentized system

1. Data-driven, that is, two-way binding of data

• The core of Vue's responsiveness is that dependencies will be collected during getter and setter. Will trigger dependency update

• vue will traverse all properties of the object in data and use Object.defineProperty to convert all these properties into
  getters/setters.

• These getters/setters are invisible to the user, but internally they allow Vue to track dependencies and notify changes when the property
  is accessed and modified.

• Each component instance corresponds to a watcher instance, which records the "touched" data properties as dependencies during the component rendering process.

• We will collect dependencies during getter. Dependency collection is the collection of subscription data change watchers. The purpose of dependency collection is to notify the corresponding subscribers when the responsive data changes. Process related logic.

• #Setter will trigger a dependency update. Later, when the dependency's setter is triggered, the watcher will be notified, causing its associated component to be re-rendered.

2. Component system

Componentization

Expand HTML elements and encapsulate reusable code. Each component corresponds to a ViewModel. Each independent visual/interactive area on the page can be considered a component. Each component corresponds to a project directory, and the various resources required by the component are maintained in this directory. A page is a container for components, and components can be nested and combined freely to form a complete page.

Core options of the component:

• Template: The template declares the mapping relationship between the data and the DOM that is ultimately displayed to the user. .

• Initial data (data): The initial data state of a component. For reusable components, this is usually private state.

• Accepted external parameters (props): Data is transferred and shared between components through parameters.

• Methods: Data modification operations are generally performed within the component's methods.

• Lifecycle hooks: A component will trigger multiple lifecycle hook functions. The latest version 2.0 has greatly changed the name of the lifecycle function.

• Private resources (assets): In Vue.js, user-defined instructions, filters, components, etc. are collectively called resources. A component can declare its own private resources. Private resources can only be called by the component and its subcomponents.

[Related recommendations: vue.js tutorial]

The above is the detailed content of What is the core of vue. For more information, please follow other related articles on the PHP Chinese website!