1、vue3中的setup有什么用
setup的设计是为了使用组合式api
2、为什么不用之前的组件的选项
data、computed、methods、watch 组织逻辑在大多数情况下都有效。然而,当我们的组件变得更大时,逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解,尤其是对于那些一开始就没有编写这些组件的人来说。而通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部分逻辑了.
3、setup的在vue生命周期的位置
setup位于created 和beforeCreated之前,用于代替created 和beforeCreated,但是在setup函数里不能访问到this,另外setup内可以通过以下hook操作整个生命周期
onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered
4、setup可以接收哪些参数
setup可接受props,context
,其中props
由于是响应式数据,不能直接解构赋值,context
不是响应式数据,可以直接解构赋值;setup必须返回一个对象,一旦return,就可以像vue2.x的方式使用该属性
props:['test']
setup(props,context){
//const {test} = props //错
const {test} = toRefs(props) //对
const { attrs, slots, emit }= context //对
return {
test
}
}
5、优先级,如果data,props,setup都有一个同名属性,setup返回的该属性优先级最高,以执行以下代码为例,将显示:test from son's setup
//father.vue
...
<custField :test="test" />
setup(){
const test = ref('test from father')
return{
test
}
}
...
//son.vue
<template>
<div class="custField">
优先级测试
<h1>{
{ test }}</h1>
</div>
</template>
<script>
import { toRefs } from "vue";
export default {
props: ["test"],
data() {
return {
test: "test from son's data",
};
},
setup(props) {
let test = toRefs(props);
test = "test from son's setup";
return { test };
},
};
</script>
6、如上代码所示,若要在setup内执行ref,toRefs,toRef,computed,watch,watchEffect等函数,需先引入
import {