持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情
setup函数
- setup是组件内使用CompositionAPI的入口；
- setup在created实例被完全初始化之前执行，所以在setup中不使用this；
- setup返回值的数据（方法）模板可以直接使用；
- setup有两个参数，props 和 context
- setup数据不具备响应式
模板使用setup数据
定义setup函数，并返回对象{name:'张三'}.
setup(){
return{
name:'张三'
}
}
在模板中直接使用name
template:`
<div>
{{name}}
</div>`
页面效果：
模板使用setup方法
在模板绑定点击事件，使用setup返回的handleClick方法。
setup(){
return{
name:'张三',
handleClick(){
console.log('法外狂徒');
}
}
}
触发点击事件后控制台：
尝试在setup中使用this
首先在methods中定义test方法。
methods:{
test(){
console.log("test");
}
},
在setup中调用test方法。
setup(){
this.test();
return{
name:'张三',
handleClick(){
console.log('法外狂徒');
}
}
}
控制台并没有按照预期打印出test，而是报错说this.test不是函数。
这是因为==setup是在created实例被完全初始化之前就执行==的函数，==在setup执行时methods还没有挂载到this上==，所以==在setup中不使用this==。
setup里不能执行methods里的代码，那methods里可不可以执行setup里的代码呢？
methods调用setup
在methods里调用setup函数。
methods:{
test(){
console.log(this.$options.setup());
}
},
mounted(){
this.test();
},
控制台输出符合预期，methods里可以调用setup
setup参数
setup有两个参数，props 和 context。props是组件接收的参数，context里面有三个属性分别是attrs、slot和emit。
attrs 指的是 Non-props属性；
const app = Vue.createApp({
template:`
<div><demo app='app'/></div>`,
});
app.component('demo', {
template:`<div>demo</div>`,
setup(props, context){
const { attrs, slots, emit } = context;
console.log(attrs.app);
}
})
控制台打印出：app
slot 指的是 slot插槽；
const app = Vue.createApp({
template:`<div>123</div>`,
});
app.component('demo', {
setup(props, context){
const { h } = Vue;
const { attrs, slots, emit } = context;
return () => h('div', {}, slots.default())
}
})
页面效果：
emit 指的是 $emit;
const app = Vue.createApp({
methods:{
changeClick(){
console.log('changeClick');
}
},
template:`<demo @change="changeClick">123</demo>`,
});
app.component('demo', {
template:`<div @click="handleClick">123456</div>`,
setup(props, context){
const { attrs, slots, emit } = context;
function handleClick(){ emit('change');}
return { handleClick }
}
})
触发点击事件后，控制台成功打印：changeClick
setup数据不具备响应式
template:`
<div @click="handleClick(name)">{{name}}</div>`,
setup(props, context){
// this.test();
// console.log(props, context);
return{
name:'张三',
handleClick(name){
name = "李四";
console.log(name);
console.log('法外狂徒');
}
}
}
触发点击事件后页面效果
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3 -- setup函数</title>
<!-- 使用CDN引入Vue -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
methods:{
test(){
console.log(this.$options.setup());
}
},
mounted(){
this.test();
},
template:`
<div @click="handleClick">{{name}}</div>`,
setup(){
// this.test();
return{
name:'张三',
handleClick(){
console.log('法外狂徒');
}
}
}
});
const vm = app.mount('#root');
</script>
</body>
</html>
总结
- setup是组件内使用CompositionAPI的入口；
- setup在created实例被完全初始化之前执行，所以在setup中不使用this；
- setup返回值的数据（方法）模板可以直接使用；
- setup有props、context两个参数，context里面有attrs、slot和emit三个属性；
- setup数据不具备响应式；
本文到此结束
如果大家还有什么其他想法，欢迎在评论区交流！
