Converting Components between Vue and Vanilla JS (Comparison)

The following plunkr contains two Custom Components which are running in the grid. They are both designed to have the same behaviour, and one is written in Vue JS - the other, Vanilla JS (ES6).

https://next.plnkr.co/edit/Xmdy8zHmNVBaUFjR?preview 

Analysis & Comparison

1) Component Definition

The first difference you will probably notice, is that as our vanilla component is a standard ES6 class, the logic will be encapsulated in the following:

// TextAreaJSRenderer.js
export default class TextAreaCellRenderer {
    // class logic
}

Figure 1.

Whereas the Vue Component must use the Vue.extend({...}) method, for Vue to generate the component.

// TextAreaVueRenderer.js
export default Vue.extend({
    // Vue component logic
})

Figure 2.

Registering these two components with the grid will also take a different route.

In main.js (main script, also running the grid as a Vue Component)

// main.js
beforeMount() {

    this.frameworkComponents = {
        TextAreaVueRenderer: TextAreaVueRenderer,
    };
    this.components = {
        TextAreaJSRenderer: TextAreaJSRenderer,
    };

}

Figure 3.

As seen here, the Vue Component will be registered in frameworkComponents, whereas the Vanilla Component is registered in the components property of the grid. Using frameworkComponents informs the grid that the provided component is to be used with the selected framework, so it can run the component properly.

2) Component Interface and lifecycle methods

Both the Vue and Vanilla components are being treated as Cell Renderers, therefore they will both implement the same interface, shown below.

Figure 4.

The difference between the two is that the Vanilla Component will have these methods directly on the class object - as one might expect. The Vue Component on the other hand, must have these methods placed inside a methods object, provided in the configuration object you pass to Vue.extend({...}) . Any custom methods you want to provide to the Vue Component, should also be defined here.

export default Vue.extend({

    // ...
    // ... other properties of Vue Component configuration
    // ...

    methods: {
        refresh(params) {
            this.params = params;
            this.setInnerText(params);
            return true;
        },
        keyDownChangeHandler(e) {
            e.stopPropagation();
        },
        setInnerText(params) {
            this.innerText = params.value;
        },
        inputChangeHandler(e) {
            this.params.setValue(e.target.value);
        }
    }
}

Figure 5.

The Vue Component also does not need to implement the getGui() method, (see Figure 4 above) as it will use the template property to initialise its GUI instead. This allows the grid to delegate control to Vue for the updating of the DOM for you when properties referenced inside the template are changed.

For further information on Vue, please see their documentation here.

We also have a guide for using Vue with the grid in our documentation here.