React is the most popular front end library for the last few years.
Vue is a front end framework that’s catching up in popularity with React in the last few years.
It’s hard to choose between the 2 frameworks since they both their pros and cons. When we choose one, we’ve to stick with it for a few years.
In this article, we’ll look at how we handle data with React and Vue and which one does a better job.
Computed Properties
Computed properties are data that are derived from another piece of data.
Vue has computed properties, which we can derive from existing data.
For example, we add the computed property to a Vue component as follows to add a computed property:
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="randomMsg">Random Msg</button>
<div>{{msg}}</div>
<div>{{reverseMsg}}</div>
</div>
<script src="index.js"></script>
</body>
</html>
index.js :
const app = new Vue({
el: "#app",
data: {
msg: "Hello world"
},
computed: {
reverseMsg() {
return this.msg
.split("")
.reverse()
.join("");
}
},
methods: {
randomMsg() {
const msgs = ["Hello world", "Hello Jane"];
this.msg = msgs[Math.floor(Math.random() * msgs.length)];
}
}
});
In the code above, we have the randomMsg method which sets the message randomly.
The reverseMsg property will then be automatically computed according to what we return.
By default, computed properties are getter only, so it’s impossible for us to accidentally change a Vue computed property.
Then we can display them both on our template as we did above.
This is efficient for both developers and on computing resources since computed properties are only updated when the original data changed and developers only have to define one piece of code and use it everywhere.
With React, there’s no direct way to do the same thing. We have to use the useEffect hook to do the same thing by watching the original value that we want to create the computed property from.
Then we call the function returned from useState to make the change.
We do this as follows:
import React, { useState, useEffect } from "react";
export default function App() {
const [msg, setMsg] = useState("Hello world");
const [reverseMsg, setReverseMsg] = useState("");
const randomMsg = () => {
const msgs = ["Hello world", "Hello Jane"];
setMsg(msgs[Math.floor(Math.random() * msgs.length)]);
};
useEffect(() => {
setReverseMsg(
msg
.split("")
.reverse()
.join("")
);
}, [msg]);
return (
<div className="App">
<button onClick={randomMsg}>Random Msg</button>
<div>{msg}</div>
<div>{reverseMsg}</div>
</div>
);
}
As we can see, this is more complex than the computed property solution that’s provided with Vue.
We have to watch the value of msg explicitly with the useEffect hook and then call setReverseMsg to set the value of it by reversing the string as we did with the Vue example.
The array [msg] tells React to watch for changes in value for msg .
We also have the randonMsg function to set the value of msg as we did with the Vue example.
Vue’s logic is definitely cleaner with computed properties. Also, we can do anything inside the useEffect hook callback, so we have to be careful not to accidentally change data that we don’t want to change.
Watched Property
We can also watch for property changes with Vue. With React, we use the useEffect above as we did above to do that.
The equivalent of that with Vue os the watch property. We can use that as follows:
const app = new Vue({
el: "#app",
data: {
msg: "Hello world",
reverseMsg: ""
},
watch: {
msg(val) {
this.reverseMsg = val
.split("")
.reverse()
.join("");
}
},
methods: {
randomMsg() {
const msgs = ["Hello world", "Hello Jane"];
this.msg = msgs[Math.floor(Math.random() * msgs.length)];
}
}
});
The code above watches for changes in the msg field. Then we can react to it by taking the val parameter, which has the current value of msg .
Then we reverse the string as we did before.
Vue is more flexible in that it provides both options.
Verdict
Computed properties is definitely a great feature that comes with Vue. This isn’t available to React.
The closest equivalent to Vue computed properties with React is the useEffect hook, where we can do anything.
Vue computed properties are getter-only by default so we can’t accidentally change computed properties unless we add a setter to it.
If we want to be more flexible, Vue also has watchers that do something equivalent to useEffect callbacks.
Therefore, Vue wins when it comes to creating derived properties.
