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