Shulou(Shulou.com)06/02 Report--

This article focuses on "what are the advantages of using Vue.js". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the advantages of using Vue.js.

1. Use Vue slots to make your code easy to understand

Parent-child relationships are one of the most common ways to connect components to each other, but this may not be the best choice in some cases. Imagine that when you have a large number of subcomponents in a parent component, you will have to use a large number of props and emit events to deal with these subcomponents, which will become a mess in a short period of time. This is exactly what you will face in a large project, and Vue.js has a good solution to this problem.

Slots (Slots) are used in Vue.js to provide another way to represent a parent-child relationship. Slots provide you with a channel to place content in a new location. A basic example of a slot is as follows:

When the above component renders the tag, it will be replaced by demo-content.

You can use many different types of slots in Vue projects. However, the most important thing you need to keep in mind is that slots have a huge impact on your project as they grow, allowing you to maintain good, easy-to-understand code throughout the project.

two。 Establish and share independent components

Following F.I.R.S.T principles, build your components as focused, independent, reusable, small, and testable. You can also use tools such as Bit (Github) to control the components of each project independently and share them with the component center of Bit.

Shared components are displayed on the component center of Bit along with automatically generated documents and real-time examples. They can be installed or "cloned" using NPM and modified using Bit. This makes it easier to find, use, and maintain components (and therefore, easier to maintain projects).

3. Maintain an orderly Vuex Store

Vuex is the state management mode in Vue.js, which acts as a centralized storage for all components in the application. As time went by, I saw comments about Vuex Store: "Vuex limits developers from building projects as needed." But the truth is, Vuex helps developers organize their projects in a more organized way using a set of principles.

Before you understand these principles, you should understand the four main components of Vuex store. If you are familiar with these four, you can easily build Vuex store in a more organized way:

States: used to save data for your application

Getters: used to access these state objects outside of store.

Mutations: used to modify the state object.

Actions: used to submit mutations.

Assuming you are familiar with these four components, let's take a look at the principles you need to follow.

You need to store the application-level state centrally in store.

The status should always mutate by submitting a mutations.

Asynchronous logic should be encapsulated and can only be used with Action.

If you can follow these three principles, your project can be structured smoothly, and if you feel that the storage files are getting bigger and bigger, you are completely free to divide them into separate files. The sample project structure is as follows:

├── index.html ├── main.js ├── api ├── components └── store ├── index.js ├── actions.js ├── mutations.js └── modules

(1) Modular Vuex store

We are talking about large projects in this article, and you can expect the project files in such projects to be very large and complex. You need to manage store in your own way, and you need to avoid store congestion, so it is recommended that you modularize your Vuex store in a way that is easy to understand. In a project, there is no definite way to decompose modules, some developers modularize according to function, while others modularize according to data model. The final decision on modularity is entirely up to you, which will contribute to the long-term development of you and your team.

Store/ ├── index.js └── modules/ ├── module1.store.js ├── module2.store.js ├── module3.store.js ├── module4.store.js └── module5.store.js

(2) use an assistant to simplify your code

I mentioned four components used in Vuex store earlier. Let's consider a situation where you need to access these states or getters, or you need to call action or mutations in the component. In this case, you don't need to create multiple calculation properties or methods, you can easily use helper methods (mapState, mapGetters, mapMutations, and mapActions) to reduce code. Let's take a look at these four aids:

1) mapState

If we need to call multiple store states attributes or getters in a component, we can use the mapState help to generate an acquirer function, which greatly reduces the number of lines of code.

Import {mapState} from 'vuex' export default {computed: mapState ({count: state = > state.count, countAlias:' count', countPlusLocalState (state) {return state.count + this.localCount}})}

2) mapGetters

The mapGetters helper can be used to map store getters to locally calculated properties.

Import {mapGetters} from 'vuex' export default {computed: {... mapGetters ([' count1', 'getter1',])}}

3) mapMutations

The mapMutations helper function can be used to submit a mutations in a component and map component methods to store.commit calls. Similarly, we can use mapMutations to pass the payload.

Import {mapMutations} from 'vuex' export default {methods: {... mapMutations ({cal:' calculate' / / map `this.cal () `to `this.$store.commit ('calculate') `})}}

4) mapActions

This helper is used to dispatch action in a component and map component methods to store.dispatch calls.

Import {mapActions} from 'vuex' export default {methods: {... mapActions ({cal:' calculate' / / map `this.cal () `to `this.$store.dispatch ('calculate') `})}}

4. Don't forget to write unit tests.

Testing is another important aspect of any project. As developers, we must test the content of development regardless of the importance or size of the project. Especially when it comes to large projects, there are thousands of small functions, so we have a responsibility to test each function. Unit testing takes effect in this case, allowing developers to test a single unit of code. Unit testing not only avoids errors, but also increases the confidence of the development team in their work whenever they make changes. As the project grows over time, developers can add new features by following a good unit testing mechanism from the start without having to worry about breaking another feature.

If we consider unit testing in Vue.js, which is similar to the unit testing method of almost all other frameworks, you can easily use Jest, Karma, or Mocha in Vue.js. Although there is a testing framework, there are some general things you need to keep in mind when writing unit tests.

The test must provide an explicit error message ID.

Use a good library of assertions. (for example, there is an assertion library built into the Jest framework, and the Chai library is used with Mocha)

Write unit tests to cover each Vue component.

By following these steps from the beginning of the project, you can greatly reduce the time spent on debugging and manual testing as the project structure grows.

With the exception of unit testing, Vue.js supports E2E testing and integration testing like any other framework. Therefore, it will be a good habit to integrate these into your project. Typically, the routing part is not tested with unit tests and can be overridden by end-to-end tests. Vue store is the hardest part to test, and the recommended method is integration testing, because individual tests on states, actions, or fetchers are considered useless.

At this point, I believe you have a deeper understanding of "what are the advantages of using Vue.js". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.