I tried Vue.js, Have you...?
Tags: vue, beginners
Published: 2019-08-23 12:51:31

---
title: I tried Vue.js, Have you...?
published: true
description: how do I use Vue.js knowing AngularJS.
tags: Vue, beginner
---

## Quick Background

Hi all,
This is Saiprasad. I am a full-stack web developer and working in Ruby on Rails, Python, AngularJS.

## Begin
I've recently started learning the Vue.js. I'm still a novice but thought it would be beneficial to explain how do I used Vue.js knowing AngularJS.

Two weeks before, I had an issue regarding pagination. And I have to solve the issue with plain Javascript(Since the project does not have any frontend framework). So, by plain Javascript, the issue would get solved, but we tried something new. We decided to use Vue.js.
Since Use-case was only for a simple single component (Pagination) which Vue.js fit's perfect.

We used the Vue.js standalone mode (There is no need for any webpack build system or vue-cli ).With the backend framework as Django.

As being from AngularJS background. Was looking toward Vue.js as AngularJS.(This helped me a lot).

## Vue Lifecycle

The most beautiful thing that Vue.js offers the naming convention. The Lifecycle hooks naming convention are simpler to understand.

   Creation (Initialization)
     <ul>
       <li>beforeCreate</li>
       <li>created</li>
     </ul>
   Mounting (DOM Insertion)
     <ul>
       <li>beforeMount</li>
       <li>mounted</li>
     </ul>
   Updating (Diff & Re-render)
     <ul>
       <li>beforeUpdate</li>
       <li>updated</li>
     </ul>

   Destruction (Teardown)
     <ul>
       <li>beforeDestroy</li>
       <li>destroyed</li>
     </ul>

Please check [Vue.js Lifecycle](https://alligator.io/vuejs/component-lifecycle/) for detailed information of lifecycle hooks. (Helped me a lot)


## Problems Faced

**1. Interpolation**

   We had faced some problem for the Interpolations in Vue.js as I stated we used Django as backend framework.Vue.js has the same syntax as Django templates to denote expressions. So to tackle this we used delimiters as a part of Vue.js

   ![Creating Delimiter]( https://thepracticaldev.s3.amazonaws.com/i/o7cy6qfyrq3swgmelc4p.png )ScreenShot 1.1 Creating the delimiter

   The delimiter is the same as the Ruby language ("#{}".).So to print the value in the HTML of Vue.js use like this


   ![Using new Delimiter]( https://thepracticaldev.s3.amazonaws.com/i/0sfve85bilg1wnve7efc.png )ScreenShot 1.2 Using the delimiter in HTML



**2. Array and Object Change Detection**

There are Caveats in the detection of Array and Object in Vue.js. As the official document states that "Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion."

https://vuejs.org/v2/guide/reactivity/#Change-Detection-Caveats

So to make object Reactive we should have to declare it upfront. As in __ScreenShot 1.1 Creation of delimiter__, you can see "pendingUsersInvitation", "pageNo", "pageCount", "recordCount" are declared upfront. Thus these objects are Reactive.
So changing in the objects are updating the UI. You can see below demo example


![sample_example](https://thepracticaldev.s3.amazonaws.com/i/9o4k85zlwgxq2ye5qagg.png)ScreenShot 1.3 Demo Example



The below screenshot is of adding a new key-value pair to the users object.'Vue instance.object' i.e element.users is accessible in the console and adding a new user to the users, changes the UI.

![adding_new_element](https://thepracticaldev.s3.amazonaws.com/i/pvq5synwhj2ln2oov7az.png)ScreenShot 1.4 Reactive object in Vue






This is reactivity in Vue.js.

__So how does Vue changes the UI is something interesting. I will explain in short.__
When we add a plain object to data property to Vue instance. Vue gets all the objects and creates getter and setter method for each object present in data (in the above example for users object).

 __I] Object.defineProperty__
    Vue uses Object.defineProperty for setter and getter methods on the objects. The observer pattern is used to update the object's value in Vue.

 ![define_property](https://thepracticaldev.s3.amazonaws.com/i/1lsozf2zedivd73hcz3j.png)ScreenShot 1.5 Adding Getter and Setter to users object

Don't worry about the terms that are used below. Please check this video,[Reactivity System](https://www.vuemastery.com/courses/advanced-components/build-a-reactivity-system) explaining the details about the Reactivity.

__NOTE:- If you have watched the above video then below contains will start to make sense.__

This getter and setter methods have __depends()__ and __notify()__ methods respectively.
The __depends()__ method push the target to the storage(storage is nothing but an empty array). 
The __notify()__ method runs all the target.
When you call an object then the __dep.depends()__ method get called and pushes your function (target).
When you set an object then __dep.notify()__ methods get the call and runs the target. This makes the system reactive.

So, __the problem that we faced was setting the boolean value to the object key called 'active' wasn't updating the UI.__ The structure of the data is like below,

![data_structure](https://thepracticaldev.s3.amazonaws.com/i/hshs3lpr10636bwtticg.png)ScreenShot 1.6 Data Structure of the object.

__Note: pagination.pendingUsersInvitation is the 'Vue instance.Property' as you can see in screenshot 1.1 declaring Vue instance.__
This data doesn't have an 'active' key. We are adding explicitly to the data. As follow

```javascript
     pagination.pendingUsersInvitation[0][active] = True;
```

But here, Vue doesn't understand that data (pagination.pendingUsersInvitation) has modified and this will not update the changes to the UI.

Thus, to make Vue understand that data has changed so that Vue can update the UI. We change code to

```javascript
     Vue.set(pagination.pendingUsersInvitation[0], 'active', true);
```
This made the changes to the UI as Vue understands that data has been changed.


In actually we have done something like this,
![vue_set](https://thepracticaldev.s3.amazonaws.com/i/iwitxrmifnc9jlyz51h9.png)ScreenShot 1.7 Using Vue.set 

Here, we set the active key by comparing the item.pk == id in the data(pagination.pendingUsersInvitation).So active key get's added to the data if the condition gets satisfied. This change of code had updated the UI.

finally, 'Interpolation' and 'Array and Object Change Detection' problems were got solved.

### Pagination Component

The pagination component is ready as below. 

![pagination_component](https://thepracticaldev.s3.amazonaws.com/i/b8yefya43lsmlf6eqd3c.jpg)ScreenShot 1.8 Pagination component


## Conclusion

  Things that were familiar in Vue.js
     <ul>
      <li> v-model same as (ng-model in AngularJS) </li>
      <li> v-if same as (ng-if in AngularJS) </li>
      <li> v-for same as (ng-repeat in AngularJS) </li>
      <li> v-bind:class same as (consider as ng-class in AngularJS) </li>
     </ul>

As being from AngularJS background, learning Vue.js was fun and easy. Give a try for Vue.js and let us know about how do you feel using Vue.js.