【vue3系列】Vue3的setup_vue3 setup listeners-CSDN博客

本文链接：https://blog.csdn.net/qq_42445025/article/details/121861395

Vue3的setup选项是Composition API的入口，它在beforeCreate和created之间执行，不直接访问data和methods。setup中可以访问props和context，如attrs、slots、emit等。返回的对象将合并到模板上下文中。注意，props解构会消除响应性，需借助toRefs或toRef。setup不支持this关键字，用于构建组件的数据和逻辑连接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3的setup

setup选项是一个接收props和context的函数是一个新的组件选项，作为Composition-API的入口点，只会被执行一次，用于建立数据与逻辑的连接。

注意点
- 在执行setup函数时，还没执行created生命周期方法，因此在setup函数中，无法使用data和methods的变量和方法。
- 不能在setup函数中使用data和methods，在setup中使用this是无法操作的，因为setup 在生命周期beforeCreate和created之间执行，调用发生在 data property、computed property 或 methods 被解析之前，此时组件实例未实例化成功，所以data,methods等东西无法在 setup 中使用this被获取。

{
    setup(props,context){
        context.attrs;
        context.slots;
        context.emit;
        context.listeners;
        context.root;
        context.parent;
        context.refs;
        
        return {};
    }
}

setup方法的返回值会合并到模板的上下文中参与数据的渲染。
setup函数的参数
- setup(props,context)函数有两个参数，props:组件接收的参数；context：是一个对象，包含attrs、slots、emit、expose这些属性。
- attrs：Attribute，非响应式对象，等同于$attrs
- slots：插槽，非响应式对象，等同于$slots
- emit：触发事件，方法，等同于$emit，主要用来向父组件通信传参
- expose：暴露公共property，函数
- ```
   setup(props,context) {         //完整写法
      console.log(props.title)   //获取传递过来的title属性
      ... 
  } 
  setup(props) {...}            //只用props
  setup(props, { attrs, slots, emit, expose }) {...} //context参数解构
  props不能用es6解构,会消除 prop 的响应性，解构需要借助 toRefs 或 toRef。
```