组合式api的使用方式

方式一：通过setup选项

<script>
  export default {
    setup(){
      // 提供数据

      // 提供函数

      // 提供计算属性等等.....
    }
  }
</script>

例子：

<script>
export default {
  setup() {
    console.log('setup......')
    // 直接提供数据
    const state = 10  **// 先提前说明，这样定义的数据并不是响应式数据，和vue2中的data选项提供的数据不一样，vue2的data中返回的数据全部都是响应式数据。至于怎样定义响应式数据，后面笔记会写。**
    // 提供函数
    const getState = () => {
      return state
    }
    // 必须使用return将所有用到”数据“和”函数“、”计算属性“等等都要返回，不然在模板中无法使用。
    // 感觉很麻烦？所以就有另外的语法糖写法，用了后就不需要返回了
    return {
      state,
      getState
    }
  },
  beforeCreate() {
    console.log('beforeCreate....')
  },
}

</script>

<template>
  <div>
    hello vue3
    <p>state: {{ state }}</p>
    <p>state: {{ getState() }}</p>
  </div>
</template>

方式二：通过给script添加setup属性（语法糖）

<!-- 给script标签添加setup属性，即可实现相同的功能-->
<script setup>
  // 直接定义数据、函数 等等。
  const state = 888
  const getState = () => {
    return state
  }
  // 不需要自己return返回
</script>

<template>
  <div>
    hello vue3
    <p>state: {{ state }}</p>
    <p>state: {{ getState() }}</p>
  </div>
</template>