What are some examples of reactivity in Vue.js?

What are some examples of reactivity in Vue.js?

In Vue.js, reactivity allows the UI to automatically update when the underlying data changes. For example, if you have a data property like message, and you bind it to a template, any changes to message will reflect in the UI instantly.

Can you show me a code example?

Sure! Here's a simple example:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

In your HTML, you can use {{ message }} to display the message. If you change this.message = 'New Message', the UI updates automatically.

What about computed properties?

Computed properties are another powerful feature. They allow you to define properties that depend on other data properties. For example:

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

Now, reversedMessage will automatically update whenever message changes.

How does Vue's reactivity differ from React's?

Vue uses a dependency-tracking observation system, while React uses a virtual DOM and reconciliation process. Vue's reactivity is more automatic, whereas React requires explicit state management.