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); } }