vue3的api解读之ref和reactive示例详解

下面是针对“vue3的api解读之ref和reactive示例详解”的完整攻略：

1. 什么是 ref 和 reactive？

• ref： 用来创建一个响应式对象，它会返回一个带有 value 属性的对象，这个 value 属性可以自动更新页面。
• reactive：用来创建一个响应式对象，它会将对象中所有属性都转化为响应式数据，任何一个属性发生变化都能触发相应的更新。

2. ref 和 reactive 的应用场景

• ref 适用于单个简单值的绑定，例如数字、字符串、布尔值等。
• reactive 适用于对象或数组的绑定，我们可以访问对象中的每一个属性或者元素，并且保证每一个属性或者元素是响应式的。

3. ref 示例

<template>
  <div>
    <input type="text" v-model="name"/>
    <p>{{ refName }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const name = ref('');
    const refName = computed(() => `你的名字是：${name.value}`);

    return {
      name,
      refName
    };
  }
}
</script>

上面是一个简单示例，通过使用 ref 函数创建一个响应式数据 name，把它的值绑定到 input 组件中实现数据的双向绑定，并用 computed 函数将其拼接成一个新的字符串类型的变量 refName，用于最终的显示。

4. reactive 示例

<template>
  <div>
    <ul>
      <li v-for="item in shoppingList">{{ item.name }} -- {{ item.price }}</li>
    </ul>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const shoppingList = reactive({
      list: [
        { id: 1, name: '香蕉', price: 2 },
        { id: 2, name: '苹果', price: 5 },
        { id: 3, name: '西瓜', price: 20 },
      ]
    });

    return {
      shoppingList
    };
  }
}
</script>

上面是一个简单的示例，通过使用 reactive 函数创建一个响应式对象 shoppingList，它包含一个 id、name 和 price 属性，其中 price 的值就是每一项商品的价格，在渲染页面时，我们可以很方便地访问每一个属性，并保证每一个属性是响应式的。

这就是“vue3的api解读之ref和reactive示例详解”的完整攻略了，希望对你有所帮助。