Reactivity In Vue.js (And Its Pitfalls)

Reactivity In Vue.js (And Its Pitfalls)

One thing we love about Vue is the reactivity system. If we change a data value it triggers an update of the page to reflect that change.

For example:

var app = new Vue({
  el: '#app',
  data: {
    message: "Hello World"
  }
});

setTimeout(function() {
  app.message = "Goodbye World";
}, 2000)
<div id="app">
  <!--Renders as "Hello World"...-->
  <!--Then after 2 seconds re-renders as "Goodbye World"-->
  {{ message }}
</div>

Data properties, like message in this example, are reactive, meaning they will trigger a re-render if changed.

Pitfalls of automatic reactivity configuration

Vue configures reactivity automatically whenever you create a data property, computed property, bind a prop etc. This automatic setup is great when coding an app because it:

read more

Using JSX with Vue.js

Using JSX with Vue.js

Love it or hate it, JSX is a popular extension to Javascript that allows XML tokens in your scripts.

If you want to create templates in your script files and you find Vue’s render() function to be difficult to work with, JSX may be just what you need.

To demonstrate, here’s a render function without JSX:

render (h) {
  return h(
    'div',
    { attrs: { id: 'my-id' },
    [ this.msg ]
  );
}

And with JSX:

render (h) {
  return (
    <div id='my-id'>,
      { this.msg } 
    </div>
  );
}

If nothing else, it’s much easier to read!

Of course, JSX cannot be interpreted by the browser. It must be first transpiled into standard Javascript, similar to how SASS first needs to be transpiled to CSS. More on this later.

Why use JSX with Vue?

There are many ways to specify a template in Vue:

read more

What's The Deal With Vue's Virtual DOM?

What's The Deal With Vue's Virtual DOM?

Many Javascript frameworks like Vue, React and Ember implement a “virtual DOM”.

While it sounds like something from a sci-fi, its main purpose is to increase the speed and efficiency of DOM updates. It offers some additional benefits as well.

Reminding ourselves what the DOM actually is

We tend think of the DOM as the HTML document it represents. But actually the DOM is a tree-like data structure that comes into existence once an HTML document has been parsed by the browser.

The browser paints the DOM to the screen and will repaint it in response to user actions (e.g. mouse clicks) and updates via its API from your Javascript scripts e.g. document.createElement.

It’s expensive to update the DOM

When we use Javascript to make a change to our page, the browser has to do some work to find the required DOM nodes and make the change e.g.

// #myId could be anywhere in the document, which may have thousands of nodes!
document.getElementById('myId').appendChild(myNewNode);

In modern apps there can be thousands of nodes in the DOM, and so updates can be computationally expensive. It’s inevitable that small, frequent updates will slow the page down.

What is a virtual DOM?

The DOM can be represented as a data structure in Javascript, too. Here is pseudo-code of how a DOM node could be represented:

read more

Vue.js Transitions

Vue.js Transitions

Transitions in Vue allow you to apply effects to elements when they are inserted, updated or removed from the DOM. For example, the classic fade:

The transition system has been a feature of Vue since the first version, but in version 2 there have been some changes, mainly that it is now completely component-based (which I think is much better…more on this later).

What transitions do

Transitions can be tricky to understand. Here’s what you need to know to get started:

  • The transition system can work with CSS (e.g. visual effects like fading) but can also be used with JS (e.g. transitioning data between different values).
  • CSS transitions work in conjunction with the CSS3 transition and animation features. The CSS does the actual transitioning, but Vue handles stuff like when to add/remove appropriate classes etc.

Example

Let’s say we want to fade an element in or out when it is added/removed from the DOM, just like in the GIF at the start of this story.

Thinking just about CSS for now, to get a fade effect we might do something like this:

.in {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}
.out {
  opacity: 0;
}

When we want to see the element, we use thein class, when we don’t, we use the out class. We use the CSS3 transition rule to provide the fade effect.

read more