Vue3 组合式API -- setup

Vue3 中可以使用 setup 书写组合式 API， 在生命周期中，setup 在 beforeCreate 之前

setup 的用法以及注意事项

在 setup() 函数中返回的对象会暴露给模板和组件实例，setup() 中的 this 并不指向当前组件实例，即在 setup() 中访问 this 会是 undefined。

<script>
export default {
  setup() {
    const log = 'this is log';
    const consoleLog = () => {
      console.log(log);
    }
    return {
      log,
      consoleLog
    }
  }
}
</script>

<template>
  <div>
    {{ log }}
    <button @click="consoleLog">button</button>
  </div>
</template>

setup 语法糖

对于结合单文件组件使用的组合式 API，推荐通过 <script setup> 以获得更加简洁及符合人体工程学的语法。此种写法不需要显示的使用 return 返回属性

<script setup>
  const log = 'this is log';
  const consoleLog = () => {
    console.log(log);
  }
</script>

<template>
  <div>
    {{ log }}
    <button @click="consoleLog">button</button>
  </div>
</template>