vue3 setup() 高级用法示例详解

下面我来为您详细讲解“vue3 setup() 高级用法示例详解”的完整攻略。

什么是vue3 setup()函数

setup()是Vue3中的一个新函数，用来替代Vue2中的data、computed、methods等选项，用于组件的数据响应、计算属性、方法等快速开发，同时还可以在其中访问props、context等组件相关对象。setup()函数是Vue3最大的改变之一，它让Vue3中的组件配置变得更加简洁，并且提高了性能。

如何使用vue3 setup()函数

使用setup()函数时需要注意以下几个方面：

1. setup()函数必须返回一个对象。
2. 该对象可以包含组件中需要用到的数据、计算属性、方法等。其中需要注意的是，数据和计算属性都需要使用ref、reactive或toRefs进行包装。
3. setup()函数中可以通过参数来访问props、context等组件相关对象。参数的名称可以任意指定，但是建议使用约定俗成的名称，比如props、attrs、emit等。

下面，我们来看两个示例，了解setup()的具体用法。

示例一：使用reactive包装数据

在该示例中，我们使用setup()函数来定义一个倒计时组件，用于倒计时30秒，并在界面上显示倒计时的时间。具体代码如下：

<template>
  <div class="count-down">
    {{ count }}
  </div>
</template>

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

export default {
  setup(props, context) {
    const state = reactive({
      count: 30,
      interval: null
    });

    const startCountDown = () => {
      state.interval = setInterval(() => {
        state.count--;
        if (state.count === 0) {
          clearInterval(state.interval);
        }
      }, 1000);
    };

    startCountDown();

    return {
      ...toRefs(state)
    };
  }
}
</script>

在该示例中，我们使用了reactive函数来包装count和interval两个数据。在组件中，我们使用count属性来显示倒计时时间，并通过setInterval函数每秒钟更新count的值。当count的值为0时，则停止倒计时。

最后，我们使用toRefs()函数将reactive返回的Proxy对象转换成一系列响应式对象，以便组件模板可以正确地监听和更新该对象的属性。

示例二：使用watchEffect监听props变化

在该示例中，我们使用Vue.js3.2中新增的watchEffect函数来监听props的变化，并在组件中动态生成一些元素，以达到动态渲染的目的。具体代码如下：

<template>
  <div class="dynamic-render">
    <div v-for="(item, index) in items" :key="index">{{ item }}</div>
  </div>
</template>

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

export default {
  props: {
    count: {
      type: Number,
      default: 10
    }
  },

  setup(props, context) {
    const state = reactive({
      items: []
    });

    watchEffect(() => {
      for (let i = 0; i < props.count; i++) {
        state.items.push(i);
      }
    });

    return {
      ...state
    };
  }
}
</script>

在该示例中，我们使用了watchEffect函数来监听props.count的变化，并在每次变化后使用for循环生成1到props.count之间的数字，并将其添加到items数组中。然后，我们使用v-for指令将items数组中的元素动态渲染到组件中。

总结

经过上面两个示例的讲解，我们可以知道setup()函数的强大，它可以用来定义组件的响应式数据、监听props变化并动态生成元素等，使得Vue3中的组件开发变得更加简单和高效。