Vue3 Declarative Rendering

Declarative Rendering refers to updating the view through data-driven changes, rather than directly manipulating the DOM.

Declarative rendering allows developers to focus more on business logic without needing to care about how to update the view and DOM.

Vue3's declarative rendering is a template-based rendering approach that enables developers to describe the page structure and data binding relationships through concise template syntax, without directly manipulating the DOM.

Vue3's declarative rendering simplifies the UI update process by using templates, directives (such as v-if, v-for, v-bind, etc.), and reactive data.

Vue's declarative rendering lets you simply declare how the UI should be presented, and Vue will automatically update the view based on data changes—when you modify the data, the view responds automatically.

Vue3 uses template syntax (similar to HTML) to describe the UI, and expressions in the template (such as {{ message }}) are bound to the component's data model.

1. Data Binding

Data binding is the core of declarative rendering.

Through data binding, Vue can automatically update the content of DOM elements, avoiding traditional manual DOM operations.

Interpolation Expressions

Interpolation expressions use double curly braces {{ }} to insert component data into the HTML template.

Example

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  }
};
</script>

In the example above, the double curly braces {{ message }} will render as Hello, Vue 3!, and when the value of message changes, the view will automatically update.

The content within double curly braces is not limited to identifiers or paths—we can use any valid JavaScript expression.

<h1>{{ message.split('').reverse().join('') }}</h1>

Attribute Binding

Through the v-bind directive, you can bind HTML attributes to component data, allowing DOM element attributes (such as href, class, src) to dynamically update based on the component's state.

Example

<template>
  <div>
    <a v-bind:href="url">Click me</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: ''
    };
  }
};
</script>

In the example above, v-bind:href binds the url data to the href attribute of the <a> tag, and when url changes, href will automatically update.

Conditional Rendering

Vue implements conditional rendering through the v-if, v-else-if, and v-else directives, determining whether to render a DOM element based on a data condition.

Example

<template>
  <div>
    <p v-if="isVisible">This text is visible</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

In the example above, when isVisible is true, the <p> tag will be rendered, and when the button is clicked, isVisible will toggle, and the display of the <p> tag will automatically change.

List Rendering

The v-for directive can be used to render a list.

Vue will render corresponding DOM elements based on each item in the array, and automatically update the view when the array data changes.

Example

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Vue 3' },
        { id: 2, name: 'JavaScript' },
        { id: 3, name: 'HTML' }
      ]
    };
  }
};
</script>

In the example above, v-for renders a list based on the items array. Each list item has a key to help Vue track each item, thereby improving rendering efficiency.

Two-Way Data Binding

Vue provides the v-model directive to implement two-way binding between form elements (such as <input>) and component data, so that the form element's value and data model stay synchronized—user input automatically updates the data, and data changes automatically update the view.

Example

<template>
  <div>
    <input v-model="message" placeholder="Enter some text" />
    <p>You entered: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

In the example above, v-model keeps the input element's value synchronized with the message data. When the user types text in the input box, message automatically updates, and the content in the <p> tag also automatically changes.

Event Handling

Vue provides the v-on directive to listen for DOM events and execute methods when events are triggered, allowing you to declaratively handle user input, clicks, and other events.

Example

<template>
  <div>
    <button v-on:click="increment">Click me</button>
    <p>Click count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count += 1;
    }
  }
};
</script>

In the example above, v-on:click listens for the button's click event and calls the increment method to increase the count value on each click, and count automatically updates to the view.

Computed Properties

Computed properties are a declarative way to calculate values provided by Vue.

Computed properties are based on reactive data and only recalculate when the dependent data changes.

Example

<template>
  <div>
    <p>Original amount: {{ amount }}</p>
    <p>Amount after tax: {{ computedAmount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 100
    };
  },
  computed: {
    computedAmount() {
      return this.amount * 1.1; // Assuming tax rate is 10%
    }
  }
};
</script>

computedAmount is a computed property that calculates the amount after tax based on amount. When amount changes, computedAmount automatically updates without manually triggering a view update.

YouTip