Vue3 setup

概念

setup是Vue3.0中一个新的配置项，其值为一个函数。

组件中所用到的数据、方法等等，都要在setup中配置。

执行时机

在创建组件实例时，在beforeCreate之前执行(一次), 此时组件对象还没有创建，在初始化组件解析之后调用setup。（在生命周期方面，在beforeCreate钩子之前调用）

setup 方法是在 components , props , data , Methods , Computed , Lifecycle , methods 之前执行。

返回值

在 setup 中定义的状态、方法如果要在模板中使用，必须 return，setup函数有两种return返回值：

1、一般都是返回一个对象，为模板提供数据，对象中的属性、方法被合并到渲染上下文，在模板中可以直接使用此对象中的所有属性/方法；

2、若返回一个渲染函数：则可以自定义渲染内容。

例如： return () => h(‘div’, [count.value, object.foo])。

注意点

1. setup 尽量不要与 Vue2.x 配置混用
2. 在Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法
3. 但是在setup中不能访问到Vue2.x配置（data、methos、computed…）
4. 如果有重名， setup优先
5. setup不能是一个async函数，因为返回值不再是return的对象， 而是promise，模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

实例

<template>
  <div>
    <h1></h1>
    <div>
      <p>msg is: {
   
   {
   
    msg }}<