A Beginner's Guide to VUE3: Responsive Data and Computed Properties

In modern front-end frameworks, responsive data and computed properties are very important concepts. As a Vue3 beginner, after learning these two concepts, you can better understand the features and usage of the Vue framework.

This article will focus on explaining the responsive data and calculated properties of Vue3, including their basic concepts, usage and examples. If you are not familiar with Vue3 yet, please learn the basics of Vue3 first.

1. What is responsive data?

In Vue3, responsive data is data that can automatically track changes and update the page immediately. In Vue3, responsive data can be ordinary JavaScript objects, primitive data types, arrays, etc.

Using responsive data in Vue3 is very simple. You only need to define the corresponding attributes in the data object. The Vue framework will complete data binding based on these properties to achieve responsive features.

For example:

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

<script>
export default {
  data() {
    return {
      message: "Hello Vue3!"
    };
  }
};
</script>

In the above code, we define a data object and define an attribute message in it. In the template, we use the difference expression {{ message }} to display this attribute. When we modify the value of message, the content on the page will automatically update.

2. What is a calculated attribute?

In Vue3, a calculated property is a property used in a template that is calculated based on other property values. The value of a computed property is cached and is only recalculated when the property it depends on changes.

Using calculated properties in Vue3 is also very simple. You only need to define the corresponding properties in the computed object. Each property in a computed object must be a function and return a computed value.

For example:

<template>
  <div>{{ fullName }}</div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "John",
      lastName: "Doe"
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

In the above code, we define two data attributes: firstName and lastName. We also define a calculated attribute fullName, which calculates a new value, the full name, based on the values ​​​​of firstName and lastName. At this time, the value of fullName will be cached and will not be recalculated until firstName or lastName changes.

3. Examples of Responsive Data and Computed Properties

The following is a simple example that demonstrates how to use responsive data and calculated properties to implement a simple shopping cart function.

<template>
  <div>
    <div>商品列表：</div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.price }}元
        <button @click="addToCart(item)">加入购物车</button>
      </li>
    </ul>
    <div>购物车：</div>
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.name }} - {{ item.price }}元 - 数量: {{ item.quantity }}
        <button @click="removeFromCart(item)">x</button>
      </li>
    </ul>
    <div>总价: {{ totalPrice }}元</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "苹果", price: 8 },
        { id: 2, name: "香蕉", price: 3 },
        { id: 3, name: "橙子", price: 5 }
      ],
      cart: []
    };
  },
  computed: {
    totalPrice() {
      return this.cart.reduce((total, item) => total + item.price * item.quantity, 0);
    }
  },
  methods: {
    addToCart(item) {
      const idx = this.cart.findIndex(e => e.id === item.id);
      if (idx === -1) {
        this.cart.push({ ...item, quantity: 1 });
      } else {
        this.cart[idx].quantity += 1;
      }
    },
    removeFromCart(item) {
      const idx = this.cart.findIndex(e => e.id === item.id);
      if (idx !== -1) {
        this.cart.splice(idx, 1);
      }
    }
  }
};
</script>

In the above code, we define a data object, which contains two attributes: items and cart. items represents the product list, and cart represents the shopping cart.

We also define a calculated attribute totalPrice to calculate the total price of the shopping cart based on the price and quantity of each item in the cart.

Finally we also defined two methods: addToCart and removeFromCart. addToCart is used to add the specified product to the shopping cart, and removeFromCart is used to remove the specified product from the shopping cart.

When using this component, we only need to introduce and pass props in the parent component, and Vue3 will automatically complete data binding and component rendering.

Summary

Vue3’s responsive data and computed properties are one of the core features of the Vue3 framework, and mastering them is crucial for Vue3 developers.

In Vue3, responsive data can automatically track changes and update the page immediately. Calculated attributes can calculate new attribute values ​​​​based on other attribute values ​​​​and cache the calculation results.

With a simple shopping cart example, we demonstrate how to use Vue3's responsive data and calculated properties to implement a highly dynamic interface. If you want to learn Vue3 better, please study it in conjunction with Vue3 official documentation and other related articles.

The above is the detailed content of A Beginner's Guide to VUE3: Responsive Data and Computed Properties. For more information, please follow other related articles on the PHP Chinese website!