Vue3的setup

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。