Introduction to the classic and easy-to-use JavaScript framework Vue.js

This article aims to introduce a useful JavaScript framework Vue.js, so that readers can have a preliminary understanding of it.

What is Vue

Vue (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern tool chain and various supporting libraries, Vue is fully capable of providing drivers for complex single-page applications.

Features of Vue - Computed Properties

Writing expressions in Vue templates is very convenient, but if you put complex logic in it, the template will be bulky and difficult to maintain. For complex logic, Vue provides calculated properties to solve it.

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})

This is a basic example of a computed property, which will output:

Original message: "Hello"
Computed reversed message: "olleH"

A computed property reversedMessage is declared here, and the function we provide in computed will be used as the value of the property vm.reversedMessage. And when vm.message changes, vm.reversedMessage will also change accordingly, and if there are other properties related to it, it will also change accordingly.

Vue’s methods and calculated properties

Actually, this is very similar to the method. We can use the method to achieve the same effect, similar to this

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage（） }}"</p>
</div>var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})

You can get the same result like this, but the difference from the calculated property is that as long as the message does not change, the calculated property will not execute the function, but directly return the previous result; while the method needs to execute the function repeatedly. Use methods when you don't need caching.

Vuex, Vue’s core plug-in

Let’s answer a question first: What is Vuex?

Vuex is a state management pattern developed specifically for Vue.js applications. It uses centralized storage to manage the status of all components of the application, and uses corresponding rules to ensure that the status changes in a predictable way. Vuex is also integrated into Vue's official debugging tool devtools extension, which provides advanced debugging functions such as zero-configuration time-travel debugging, state snapshot import and export, etc.

Basic ideas of Vuex state management

Extract the shared state of the component and manage it in a global singleton mode. In this mode, our component tree forms a huge "view". No matter where it is in the tree, any component can obtain status or trigger behavior

In addition, by defining various concepts in isolation state management and enforcing certain rules, our code will become more structured and easier to maintain.

This idea borrows from Flux, Redux, and The Elm Architecture. Unlike other patterns, Vuex is a state management library designed specifically for Vue.js to take advantage of Vue.js's fine-grained data response mechanism for efficient state updates.

When should I use Vuex?

Although Vuex can help us manage shared state, it also comes with more concepts and frameworks. This requires weighing short- and long-term benefits.

If you don’t plan to develop a large single-page application, using Vuex may be cumbersome and redundant. It's true - if your application is simple enough, it's better not to use Vuex. A simple global event bus is enough. However, if you need to build a medium to large single-page application, you will probably consider how to better manage state outside the component, and Vuex will become a natural choice.

Comparison of Vue and other plug-ins

Let’s take React as an example for comparison. First of all, they both have many similarities:

Use Virtual DOM
Provides responsive (Reactive) and componentized (Composable) view components.
Keep the focus on the core library and leave other functions such as routing and global state management to related libraries.

Runtime performance

In a React application, when the state of a component changes, it will re-render the entire component subtree with the component as the root.

In Vue applications, component dependencies are automatically tracked during the rendering process, so the system can accurately know which components really need to be re-rendered. You can understand that every component has automatically obtained shouldComponentUpdate, and there is no restriction on the subtree problem mentioned above.

This feature of Vue eliminates the need for developers to consider such optimizations and allows them to better focus on the application itself.

About web program

In React, everything is JavaScript. Not only HTML can be expressed using JSX, but the current trend is increasingly incorporating CSS into JavaScript for processing. This type of approach has its advantages, but there are also trade-offs that not every developer is comfortable with. In React, all component rendering functionality relies on JSX. JSX is a tool for writing JavaScript using XML syntax.

The whole idea of ​​Vue is to embrace classic web technologies and expand on them. In fact, Vue also provides rendering functions and even supports JSX. However, our default recommendation is templates. Any valid HTML is a valid Vue template. For many developers who are used to HTML, templates are more natural to read and write than JSX. Of course there is an element of subjective preference here, but if this difference will lead to an improvement in development efficiency, then it has objective value.

Scale

Both Vue and React provide powerful routing to handle large applications. The React community is very innovative in state management (such as Flux, Redux), and these state management patterns and even Redux itself can be easily integrated into Vue applications. In fact, Vue has taken this model (Vuex) one step further and integrated Vue's state management solution Vuex more deeply. I believe it can bring you a better development experience.

Another important difference between the two is that Vue’s routing library and state management library are officially maintained and supported and updated synchronously with the core library. React chooses to leave these issues to the community, thus creating a more decentralized ecosystem. But relatively, React's ecosystem is more prosperous than Vue.

There are other differences between React and Vue, which I won’t go into details here. Of course, which one to choose may depend on the user. What we are doing at this time is just a few suggestions for convenience. Users have a better understanding of Vue and how it is different from other plug-ins.

The above is the detailed content of Introduction to the classic and easy-to-use JavaScript framework Vue.js. For more information, please follow other related articles on the PHP Chinese website!