vue3-setup函数使用注意事项

setup函数返回两种值

1、 若返回一个对象，则对象中的属性、方法，在模板中可以直接使用。（重点关注！常用）

export default {
  name: 'App',
  setup() {
    let name = "罗根";
    let age = 18;
    function showName() {
      alert(`姓名：${name} 年龄：${age}`)
    }

    // 返回一个对象（常用）
    return {
      name,
      age,
      showName
    }
  }
}

2、 若返回一个渲染函数：则可以自定义渲染内容。（了解，不常用）

export default {
  name: 'App',
  setup() {
    let name = "罗根";
    let age = 18;
    function showName() {
      alert(`姓名：${name} 年龄：${age}`)
    }

    // 返回一个渲染函数，替换模板的内容只显示渲染函数的（不常用）
    return ()=> h("h1", '渲染函数')
  }
}

注意点

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