Vue.js (pronounced /vju/, similar to view) is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue adopts a bottom-up incremental development design. Vue's core library only focuses on the view layer, and is very easy to learn and integrate with other libraries or existing projects. On the other hand, Vue is fully capable of driving complex single-page applications developed with single-file components and libraries supported by the Vue ecosystem.
The goal of Vue.js is to enable reactive data binding and composed view components with the simplest possible API.
Vue.js itself is not a catch-all framework - it only focuses on the view layer. So it is very easy to learn and very easy to integrate with other libraries or existing projects. On the other hand, Vue.js is also perfectly capable of driving complex single-page applications when used with related tools and supporting libraries.
Vue.js template syntax
Vue.js uses an HTML-based template syntax that allows developers to declaratively bind the DOM to the underlying Vue instance's data.
At its core, Vue.js is a system that allows you to declaratively render data into the DOM using a clean template syntax.
Combined with the reactive system, Vue can intelligently calculate the minimum cost of re-rendering components and apply them to DOM operations when the application state changes.
MVVM is shorthand for Model-View-ViewModel.
Vue.js is a very typical MVVM program structure. The whole program is roughly divided into
1. Global design: including global interface, default options, etc.
2. VM instance design: including interface design (vm prototype), instance initialization process design (vm constructor)
In the whole instance initialization process, the most important thing is to establish an association relationship between the data (Model) and the view (View). Vue.js and many MVVM ideas are similar, mainly do three things:
1. Monitor the data through the observer, and provide the ability to subscribe to changes in a data item
2. Parse the template into a document fragment, and then parse the directives to get the data items that each directive depends on and its update method. For example, after v-text="message" is parsed (this is only for illustration, the actual program logic will be more rigorous and complex): the dependent data item this.$data.message, and the corresponding view update method node.textContent = this .$data.message
3. Combine the above two parts through the watcher, that is, subscribe the data dependency in the directive to the observer of the corresponding data, so that when the data changes, the observer will be triggered, and then the view update method corresponding to the relevant dependency will be triggered, and finally the The original associated effect of the template.
So the core of the entire vm is how to implement the three things of observer, directive (parser), and watcher
Unlike Angular, there are no complicated concepts such as module, controller, scope, factory, service, etc. in the API of Vue.js. Everything is based on "ViewModel instance" as the basic unit
Implementation of data observation
The implementation principle of data observation in Vue.js is fundamentally different from that in Angular. Readers who know Angular may know that Angular's data observation uses a dirty checking mechanism. Each instruction will have a corresponding object used to observe the data, called watcher; there will be many watchers in a scope. Whenever the interface needs to be updated, Angular iterates over all watchers in the current scope, evaluates them one by one, and compares them with the old values saved before. If the result of the evaluation changes, the corresponding update is triggered. This process is called the digest cycle. Dirty checks have two problems:
1. Any data change means that every watcher in the current scope needs to be re-evaluated, so when the number of watchers is large, the performance of the application will inevitably be affected, and it is difficult to optimize.
2. When the data changes, the framework cannot actively detect the change and needs to manually trigger the digest cycle to trigger the corresponding DOM update. Angular circumvents this problem by automatically triggering the digest cycle part of the DOM event handler, but there are still many cases where the user needs to trigger it manually.
Vue.js uses an observation mechanism based on dependency collection. In principle, it is the same as the old MVVM framework Knockout. The rationale for dependency collection is:
1. Transform native data into "observable objects". An observable can be valued or assigned a value.
2. During the evaluation process of the watcher, each valued observable will register the current watcher as one of its own subscribers and become a dependency of the current watcher.
3. When a dependent observable is assigned, it will notify all watchers that subscribe to it to re-evaluate and trigger the corresponding update.
4. The advantage of relying on collection is that changes in data can be tracked accurately and actively, and there are no two problems of dirty checking mentioned above. However, traditional dependency collection implementations, such as Knockout, usually need to wrap native data to create observable objects, and function calls need to be used when obtaining and assigning values, which is cumbersome and unintuitive when performing data manipulation. Object support for nested structures is also not ideal.
Vue.js uses the Object.defineProperty method of ES5 to directly transform the properties of native data objects into getters and setters, implements dependency collection and triggering within these two functions, and perfectly supports nested object structures. For arrays, changes to the array are monitored by a mutable method that wraps the array (such as push). This makes manipulating Vue.js data almost the same as manipulating native objects [Note: When adding/deleting attributes or modifying elements at specific positions in an array, you need to call specific functions, such as obj.$add(key, value) to Trigger an update. This is limited by ES5 language features. ], the logic of data operation is clearer and smoother, and the integration with third-party data synchronization solutions is also more convenient.
Vue.js components can be understood as ViewModel classes with predefined behaviors. A component can predefine many options, but the core ones are the following:
Template (template): The template declares the mapping 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 passed and shared between components through parameters. Parameters default to one-way binding (top-to-bottom), but can also be explicitly declared to be two-way bound.
Methods: Changes to data are generally performed within the component's methods. User input events can be bound to component methods through the v-on directive.
Lifecycle hooks: A component triggers multiple lifecycle hooks, such as created, attached, destroyed, etc. In these hook functions, we can encapsulate some custom logic. Compared with traditional MVC, it can be understood that the logic of the Controller is dispersed into these hook functions.
Private resources (assets): In Vue.js, user-defined instructions, filters, components, etc. are collectively referred to as resources. Since globally registered resources are prone to naming conflicts, a component can declare its own private resources. Private resources can only be called by the component and its subcomponents.