Original link:10 things I love about Vue

Duncan Grant

Translator’s note: This article is written in a very simple way, but it is only a few thoughts from the author after trying to use Vue, so don’t expect the depth of this article, but it is also a few insights for those who are just starting to use Vue.

I like Vue. Perhaps I was experiencing JavaScript framework boredom when I first encountered it. I have experience with Backbone, Angular and React, but I have lost my enthusiasm to try other frameworks. Until I saw a comment on Hacker News that piqued my interest, calling Vue “the new JQuery.” At the time, React was relatively satisfying to me because React had strict design principles on view templates, virtual DOM, and state responsiveness, but Vue also had those characteristics. In this article I want to talk about why Vue is my preferred framework over the others I’ve tried. I hope you agree with me, but at least I hope to give you some perspective on developing modern JavaScript applications using Vue.

Minimal template syntax

Vue’s default template syntax is minimal, concise, and extensible. Like many aspects of Vue, it’s easy not to use the standard template syntax, and you could use a syntax like JSX (the official documentation explains how), but I honestly don’t know why you would want to do that. Some of the benefits of JSX are also true, such as blurring the boundaries between JavaScript and HTML, making it easier to mix code that should be written in several places.

Vue instead uses standard HTML to write templates, with minimal template syntax to do simple things like create duplicate elements based on view data.

<template>
  <div id="app">
    <ul>
      <li v-for='number in numbers' :key='number'>{{ number }}</li>
    </ul>
    <form @submit.prevent='addNumber'>
      <input type='text' v-model='newNumber'>
      <button type='submit'>Add another number</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    addNumber() {
      const num = +this.newNumber;
      if (typeof num === 'number'&&! isNaN(num)) { this.numbers.push(num); }}},data() {
    return {
      newNumber: null,
      numbers: [1, 23, 52, 46]
    };
  }
}
</script>

<style lang="scss">
ul {
  padding: 0;
  li {
    list-style-type: none;
    color: blue;
  }
}
</style>
Copy the code

I also like the fast binding provided by Vue, with “:” to bind data variables and “@” to bind events. This feature is small but does a great job of keeping the components concise.

Single file component

Most people write Vue using a “single-file component,” which is a file with a. Vue suffix that contains three parts (CSS, HTML, javascript).

This is the right thing to do, because it makes it easy to understand a component, and it encourages you to keep the code short for each component. Because if you have a lot of JavaScript, CSS, and HTML in a component, you’re going to have to spend time modularizing it later.

When using the

Another benefit of the single-file component is that it is a valid HTML5 file.

Vue is the new JQuery

The two frameworks are really nothing like each other, and they don’t work the same. Let me use a bad analogy I like to use to describe the relationship between Vue and JQuery: The Beatles and Led Zeppelin. The Beatles, needless to say, were the most popular group in the 1960s and had a huge influence. It’s hard to say who was the hottest group of the ’70s, but Led Zeppelin sometimes counts. You could say that The Beatles and Led Zeppelin are not musically related, and their music is very different, but they are both influenced by previous art. Maybe JavaScript after 2010 is like the music world of the 70’s, as Vue gets played on more radio stations, it will attract more fans.

Some of the philosophies that make JQuery great are also present in Vue: it has a simple learning curve and all the power to build a Web application based on modern Web standards. In this sense, a Vue is a wrapper around a JavaScript object.

To facilitate extension

As mentioned earlier, Vue creates components using standard HTML, JS, and CSS by default, but it is also easy to introduce other technologies. If you want puG instead of HTML, typescript instead of JS, and Sass instead of CSS, you can simply add attributes to the node module and single file components. You can even mix this up in a project, such as using HTML for some components and PUG for others, even though I’m not sure that’s the best approach.

Virtual DOM

The virtual DOM is great and has been adopted by many frameworks. It allows you to update the DOM efficiently when state changes while minimizing re-rendering and optimizing application performance. Everyone has a virtual DOM these days, so it’s not unique, but it’s cool.

Vuex great

For most applications, state management is too cumbersome to be solved by the view layer alone. Vue’s solution is Vuex. It’s easy to set up and integrate with Vue. Those familiar with Redux will feel at home at this point, but I find the React integration with Vuex much cleaner. In JavaScript’s forthcoming new standard, object expansion operators are provided, which allow us to merge states or functions to manipulate states from Vuex to components.

Vue CLI

The CLI provided by Vue makes it easy to start a webpack combined with Vue project. A single command can create projects that support single-file components, Babel, linting, testing, and a reasonable directory structure.

I miss the “vue build” command. It makes creating, running components, and testing look easy. Unfortunately, this command will later be removed from the Vue and poI is recommended instead. In a nutshell, poI is a webpack wrapper, but I don’t find it as simple as the following code:

echo '
      ' > Hello.vue && vue build Hello.vue -o
Copy the code

Re-render optimization

In Vue you don’t have to manually figure out which parts of the DOM need to be rerendered. I’ve never been a fan of managing React components, such as using “shouldComponentUpdate” to prevent whole DOM trees from being rerendered. Vue is smart about this.

Easy access to help

Vue has amassed a significant number of developers who use it to build a variety of applications. The documentation is good, and if you need more help, you can also find active users on many platforms: StackOverflow, Discord, Twitter, etc. This will give you more confidence in building your app than other frameworks that have fewer users.

Not single enterprise maintenance

I think it’s a good thing for an open source project not to allow a single enterprise to have more say in the direction of development. Vue doesn’t have issues like React authorization.

Finally, I think Vue is a good choice for any JavaScript project you do. It has a much larger ecology than I mentioned in this article. For the full stack aspect, you can look at nuxt.js. If you want reusable components, you can look at Vuetify. Vue has been one of the fastest growing frameworks in 2017, and I don’t expect it to slow down in 2018. If you have 30 minutes, why not go and see what Vue can do for you?

Comparison with Other Frameworks: Comparison with Other Frameworks – vue.js