vue setup()用法

setup()是Vue 3中的新特性，它是用来设置组件的初始配置的。在setup()中，可以定义组件的状态（data）、事件（methods）和计算属性（computed），并且可以通过ref和reactive等API来创建响应式数据。

以下是一些setup()的用法：

定义响应式数据

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      name: 'Vue',
      version: '3.0.0'
    });
    return { state };
  }
}

定义计算属性

import { computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    return { count, doubleCount };
  }
}

定义事件

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  }
}

定义生命周期钩子

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted');
    });
  }
}

需要注意的是，在setup()中，不能使用this来访问组件实例。如果需要访问组件的props，可以通过传递参数的方式来获取。例如：

export default {
  props: {
    name: {
      type: String,
      required: true
    }
  },
  setup(props) {
    console.log(props.name);
  }
}