Vue3 - setup和ref的基本使用

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>