Vue3 - setup和ref的基本使用

最新推荐文章于 2025-06-12 11:09:53 发布

非著名奶茶爱好者

最新推荐文章于 2025-06-12 11:09:53 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript js vue

本文链接：https://blog.youkuaiyun.com/weixin_46398446/article/details/116171879

vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了Vue3中的组合API，重点讲解了`setup`函数作为入口点，以及如何使用`ref`创建响应式数据。通过示例展示了如何在模板中绑定响应式数据，并通过`updateCount`方法更新`count`变量，实现页面实时渲染。理解这些概念对于掌握Vue3的响应式编程至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>