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 in your Vue instance, the displayed text will update automatically.

What about computed properties?

Computed properties are another powerful feature in Vue.js. 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's reactivity system is based on getters and setters, which allows it to track dependencies and update the DOM efficiently. React, on the other hand, uses a virtual DOM and re-renders components when state changes. Both have their strengths, but Vue's approach can be more intuitive for beginners.