What are the two cores of vue.js

Vue.js is a library that provides two-way binding of MVVM data, focusing on the UI level. The core idea is: Data-driven, component system.

Data-driven:

The technical implementation of Vue.js data observation principle uses ES5Object.defineProperty and storage properties : getter and setter (so only compatible with IE9 and above), can be called an observation mechanism based on dependency collection. The core is VM, namely ViewModel, which ensures the consistency of data and views.

watcher: Each instruction will have a corresponding object used to observe data, called watcher, such as v-text="msg", {{ msg }}, which are two watchers. Among the watcher objects Contains the associated DOM elements to be rendered.

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Principle of observation mechanism based on dependency collection:

1 Transform the native data into an "observable object", usually, call defineProperty to change the data in the data object is a memory attribute. An observable object can have a value getter or a value setter.

2 When parsing the template, that is, during the evaluation process of the watcher, each observable object that is evaluated will register the current watcher as its own subscriber and become a dependency of the current watcher. .

3 When a dependent observable object is assigned a value, it will notify notify that all watchers subscribed to itself are re-evaluated and trigger corresponding updates, that is, the associated DOM change rendering in the watcher object.

The advantage of dependency collection is that it can accurately and proactively track data changes, without the need to manually trigger or evaluate all watchers in the scope (disadvantages of Angular dirty check implementation). Specially, for arrays, you need to use a variable method (such as push) that wraps the array to monitor changes in the array. When adding/deleting attributes, or modifying elements at specific positions in the array, you also need to call specific functions, such as obj.$add(key, value), to trigger updates. This is limited by the language features of ES5.

Component system:

The application UI can be regarded as entirely composed of component trees.

Register a component:

Vue.component('my-component', {
    // 模板
    template: '<div>{{msg}} {{privateMsg}}</div>',
    // 接受参数
    props: {
        msg: String    
    },
    // 私有数据，需要在函数中返回以避免多个实例共享一个对象
    data: function () {
        return {
            privateMsg: 'component!'
        }
    }
})
<my-component msg="hello"></my-component>

Core options of the component

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

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

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

4 Methods: Data modification operations are generally performed within the component’s methods.

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

6 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.

Webpack is an open source front-end module building tool. It provides a powerful loader API to define preprocessing logic for different file formats. This is the basis of the .vue suffix single file component form. Therefore, on this basis, the vue-loader developed by Youda allows the three elements of template, style, and logic to be integrated into the same file, forming a single-file component format with the .vue file suffix, which facilitates project architecture and development reference.

Other features:

1 Asynchronous batch DOM update: When a large amount of data changes, all affected watchers will be pushed to a queue, and each watcher The queue will only be pushed once. This queue will be executed asynchronously on the next tick of the process. This mechanism can avoid redundant DOM operations caused by multiple changes to the same data, and can also ensure that all DOM write operations are executed together to avoid layout that may be caused by DOM read and write switching.

2 Animation system: Vue.js provides a simple but powerful animation system. When the visibility of an element changes, users can not only easily define the corresponding CSS Transition or Animation effect, but also use rich JavaScript hook function for lower-level animation processing. 3 Scalability: In addition to custom directives, filters and components, Vue.js also provides a flexible mixin mechanism that allows users to reuse common features in multiple components.

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