Vue3中setup函数的使用
一、API
1.选项式API
在一个vue文件内，会有data、methods、mounted、computed、watch等等用来定义属性和方法，共同来处理页面逻辑，我们把这种方式称为Options API。
options API（选项式API）开发出来的vue应用如下图所示，特点是理解容易，因为各个选项都有固定的书写位置，如响应式数据就写到data中，操作方法就写到methods项中等，应用大了之后，就会出现来回上下代码不易的困境。
2.组合式API
composition API也叫组合式API，是Vue3.x的新特性。
composition API开发的vue应用如下图所示，它的特点是特定功能相关的所有东西都放到一起维护，比如功能A相关的响应式数据，操作数据的方法等放到一起，这样不管应用多大，都可以快读定位到某个功能的所有相关代码，维护方便，设置如果功能复杂，代码量大，我们还可以进行逻辑拆分处理。
二、setup是什么
为了开始使用组合式API，我们首先需要一个可以实际使用它的地方。在Vue 组件中，我们将此位置称为setup，即setup是组合式API的入口。
const ateApp({
template:`<div>姓名:{{name}}</div>`,
setup(props,context){
const{ref}=Vue;
const name=ref("张三");
return{
name
}
}
});
三、setup函数的使用
1.setup什么时候执行？
setup函数是启动页面后自动执行的函数。在beforeCreate（组件的data和methods还没有初始化好）和created（组件的data和methods已经初始化好）之间。
2.setup中有this吗？
由于在执行setup时尚未创建组件实例，因此在setup选项中没有this。
3.setup中数据的定义和使用
setup内部的属性和方法，必须return暴露出来，将属性挂载到实例上，否
则没有办法使用。
4.Setup中钩子函如何使用？
如果要在setup方法中调用组件生命周期钩子函数：在原来的生命周期钩子函数名称前加on关键字，并且需要保持小驼峰的命名方式。
const ateApp({
template:`<div@click="changeName">{{name}}</div>`,
setup(props,context){
const{ref}=Vue;
const name=ref("张三");
const{onMounted,onUpdated}=Vue;
onMounted(()=>{
console.log("组件视图挂载完成")
});
onUpdated(()=>{
console.log("组件更新完成")
});
function changeName(){
name.value="李四";
}
return{
name,changeName
}
}
});
注意：
1）不能在setup方法中调用beforeCreate、created者2个生命周期钩子函数(因为beforecreate、created这两个生命周期钩子函数的执行时间和setup方法接近）。
2）生命周期钩子函数可以调用多次。
5.Setup与钩子函数并列使用
setup与钩子函数并列时，setup不能调用生命周期相关函数，但生命周期可以调用setup相关的属性和方法。
const ateApp({
template:`<div@click="log">{{name}}</div>`,
setup(props,context){
const{ref}=Vue;
const name=ref("张三");
function changeName(){
name.value="李四";
}
return{
name,changeName
}
},
methods:{
log(){
console.log(this.$options.setup())
}
}
});
this.$options.setup()返回的是一个大对象，该对象内包含了setup内的所有属性和方法。
四、setup的参数（props和context）
1.props
props表示父组件给子组件传值，值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
1）props是响应式的，当传入新的props时，自动更新。
//父组件
const ateApp({
template:`<test:student="student"@click="changeIng"/>`,
setup(){
let{reactive}=Vue;
const student=reactive({name:"张三",age:12});
function changeIng(){
student.name="李四"
};
return{
student,changeIng
}
}
});
//子组件
appponent("test",{
props:["student"],
template:`<div>{{student.name}}</div>`
})
const unt("#root")
2）props是响应式的，不能使用ES6解构，会消除prop的响应特性，此时需要借用toRefs解构。
下面的例子中如果使用const{name,age}=props.student直接解构，则name
和age就不具有响应特性，响应的点击dom元素就无法触发执行changeIng函数。
/
vue中reactive
/父组件
const ateApp({
template:`<test:student="student"@click="changeIng"/>`,
setup(){
let{reactive}=Vue;
const student=reactive({name:"张三",age:12});
function changeIng(){
student.name="李四"
};
return{
student,changeIng
}
}
});
//子组件
appponent("test",{
props:["student"],
template:`<div>{{name}}</div>`,
setup(props,context){
let{toRefs}=Vue;
//对student进行解构赋值
//const{name,age}=props.student----不使用toRefs的解构
const{name,age}=toRefs(props.student);//使用toRefs进行解构
//解构赋值后student中的所有属性（name,age）就会被转换为单独的响应式数据(ref类型)
console.log(name.value)//张三
console.log(age.value)//12
return{
name,age
}
}
})
3）使用组件时，经常会遇到可选参时，有些地方需要传递某个值，有些时候不需要，比如ans是一个可选参数，则传入props中可能没有ans。在这种情况下toRefs将不会为ans创建一个ref，需要使用toRef代替它。
context上下文环境，其中包含了属性、插槽、自定义事件三部分。
①attrs是一个非响应式对象，包含组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs。
例如：下面的hobby父组件传递给了子组件，但是子组件在props中没有接

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。