Now Vue.js has become a hot framework for front end development. There are a lot of engineers utilizing the convenience and powerful features of Vue.js. Yet, some of the solutions we’ve done might not follow the best practice. Well, let’s take a look at those must-know Vue techniques.

Contents:

• 1. Functional Component
• 2. Deep Selectors
• 3. Advanced “watcher”
  • execute immedately
  • deep listening
  • multiple handlers
  • subscribe to multiple variables mutation
• 4. Event argument: $event
  • native events
  • custom events
• 5. Router Parameter Decoupling
• 6. Two-way Binding for Custom Components
• 7. Component Lifecycle Hook
• 8. Event Listener APIs
• 9. Mount Components Programmatically

1. Functional Component

A functional component is stateless and has not lifecycle or methods. So it cannot be instantiated

It’s very easy to create a functional component, all you need to do is to add a functional: true property to the SFC or adding functional to the template. Since it’s as light as a function and has no instance reference, the rendering performance is quite improved.

Functional component relys on the context and mutates along with the given data within it.

<template functional>
  <div class="book">
    {{book.name}} {{book.price}}
  </div>
</template>

<script>
Vue.component('book', {
  functional: true,
  props: {
    books: {
      type: () => ({}),
      required: true
    }
  },
  render: function (createElement, context) {
    return createElement(
      'div',
      {
        attrs: {
          class: 'book'
        }
      },
      [context.props.book]
    )
  }
})
</script>

#vue #javascript #developer