setup： 是vue3中组合API的入口函数，将逻辑都写在这里面。
响应式数据：数据变化，页面跟着渲染变化。
ref： 是一个函数。作用：定义一个响应式数据，返回一个ref对象，若想操作数据，用ref里的value属性
return： 将所定义的方法属性暴露出来。

<template>
  <div id="nav">
      <h2>{{count}}</h2>
      <button @click="updateCount">更新数据</button>
  </div>

</template>

<script>
  import {defineComponent, ref} from "vue"
  export default defineComponent ({
    name: 'App',
    // vue3组合API
    setup() { // 组合API入口函数
        const count = ref(0)
        // console.log(count)
        // 方法
        function updateCount() {
            this.count++
        }
      return { // 把...暴露出来
        // let count = 0 //此时数据不是响应式数据(响应式数据：数据变化，页面跟着渲染变化)
        // ref是一个函数，作用：定义一个响应式数据，返回一个ref对象，对象中value属性，若需要兑数据进行操作，
        // 需要使用该ref对象调用value属性的方式进行数据的操作
          count,
          updateCount
      }

    }
  })
</script>