Thiago P.

Vue.js Observations

Posted in JS

← back to the blog


 Vue.js

My observations so far...

Relative to React.js

Vue can be thought of as a View-Model, while React is simply just the View.

Vue is easier to get up and running compared to React. Just import the Vue JS file in your code or include it as a <script> tag and your good to go. No need for JSX, a complex toolchain or any of that. Vue also includes its own state management library similar to Flux or Redux, called vuex.

While you can use React.js without JSX, webpack, or babel, doing so makes using React.js much more difficult and in a way, defeats one of the selling points of React.js - JS and HTML all in one.

Vue does offer a feature called Single file components, which allow you to define the HTML, CSS, and JavaScript of a Vue component all in one file. All you need is webpack and the vue-loader package. A single file component is similar to a React JSX component in that it defines the full suite of a components' behavior and UI in a single location.

 

Vue Instances and Components

There are 2 types of entities in Vue that can be used

A Vue instance is like the entry point for your app (though you can have more than one). They are mounted to an already existing HTML element.

 

A Vue component is like an instance in that they share many of the same properties, methods, lifecycle hooks, and options, except that a component defines its own HTML (through a template option which is then converted to a render function by vue).

 

Internal instance/component state

Given a Vue instance defined as below

const instance = new vue({
 el: '#vue-app', // HTML element to mount to
 data: { // internal state
  prop: 'value',
  group: {
   member_A: 1,
   member_B: 2,
 }
});

Vue will transform all the properties in data into getters and setters. Thus, when you change the value of some property (state) in data it will automatically update an HTML/UI bound to that datum whereas in React, you'd have to call setState(...).

 

Directives

Vue allows the usage of directives within HTML. Essentially, a directive is an instruction to an HTML element on how to behave in relation to some data, i.e. directing it.

Example

<div id='vue-app'>
  <input type='text' v-model='prop'>
  <p>{{prop}}</p>
</div>

 

The v-model directive is instructing the <input> element to propagate any changes of its value to the prop data property in the vue instance it is mounted under, and to react to any change in that same property (2-way data binding).

Also, {{prop}} replaces the contents of the <p> element with the value of prop.

There are other directives that can be used for things such as looping, conditional rendering, conditional attribute assignment etc...