茶余饭后聊聊Vue3.0响应式数据那些事儿

让我来详细讲解一下“茶余饭后聊聊Vue3.0响应式数据那些事儿”的完整攻略。

Vue3.0响应式数据

在Vue3.0中，提供了一个新的API——ref，来创建响应式数据。

创建响应式数据

要创建一个响应式数据，只需要使用ref函数进行创建即可，例如：

import { ref } from 'vue'

const count = ref(0)

使用响应式数据

接下来，在模板中使用这个count变量，例如：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

需要注意的是，如果要对这个count变量进行修改，需要通过count.value来进行修改。

示例说明

下面，我们来看一个具体的示例。假设有一个计数器组件，可以实现递增和递减操作，代码如下：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      count.value++
    }

    function decrement() {
      count.value--
    }

    return {
      count,
      increment,
      decrement
    }
  }
}
</script>

在这个示例中，我们使用ref函数来创建了一个响应式的计数器数据count，同时提供了increment和decrement方法，可以分别实现递增和递减操作。

再来看一个示例，假设需要实现一个购物车组件，可以添加和删除商品，代码如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in cartItems" :key="index">{{ item.name }} × {{ item.quantity }}</li>
    </ul>
    <div>
      <label for="productName">Product name:</label>
      <input id="productName" v-model="productName">
      <label for="quantity">Quantity:</label>
      <input id="quantity" v-model.number="quantity">
      <button @click="addItem">Add item</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const cartItems = ref([])
    const productName = ref('')
    const quantity = ref(1)

    function addItem() {
      cartItems.value.push({
        name: productName.value,
        quantity: quantity.value
      })
      productName.value = ''
      quantity.value = 1
    }

    return {
      cartItems,
      productName,
      quantity,
      addItem
    }
  }
}
</script>

在这个示例中，我们使用ref函数创建了一个响应式的购物车数组cartItems，同时还使用ref函数创建了两个响应式的数据productName和quantity，分别用来绑定商品名称和数量的输入框。

在addItem方法中，我们通过cartItems.value.push方法向购物车数组中添加一个商品，同时将productName和quantity重置为初始值，以便用户输入下一个商品信息。

以上是关于Vue3.0响应式数据的简单介绍和示例说明，希望对你有所帮助。