Vue -- setup函数

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情

setup函数

• setup是组件内使用CompositionAPI的入口；
• setup在created实例被完全初始化之前执行，所以在setup中不使用this；
• setup返回值的数据(方法)模板可以直接使用；
• setup有两个参数，props 和 context
• setup数据不具备响应式

模板使用setup数据

定义setup函数，并返回对象{name:'张三'}. html setup(){ return{ name:'张三' } } 在模板中直接使用name html template:` <div> {{name}} </div>`

页面效果：

模板使用setup方法

在模板绑定点击事件，使用setup返回的handleClick方法。 html setup(){ return{ name:'张三', handleClick(){ console.log('法外狂徒'); } } } 触发点击事件后控制台：

尝试在setup中使用this

首先在methods中定义test方法。

html methods:{ test(){ console.log("test"); } }, 在setup中调用test方法。

html 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函数。 html methods:{ test(){ console.log(this.$options.setup()); } }, mounted(){ this.test(); },

控制台输出符合预期，methods里可以调用setup

setup参数

setup有两个参数，props 和 context。props是组件接收的参数，context里面有三个属性分别是attrs、slot和emit。

attrs 指的是 Non-props属性；

html 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插槽；

html 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;

html 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数据不具备响应式

html 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('法外狂徒'); } } } 触发点击事件后页面效果

示例代码：

```html