Vue3 中setup()和＜script setup＞＜script＞

最新推荐文章于 2024-08-22 22:00:10 发布

m0_54853420

最新推荐文章于 2024-08-22 22:00:10 发布

阅读量1.2k

点赞数 2

分类专栏：前端 html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_54853420/article/details/123369358

版权

本文探讨Vue3的setup()方法及其在模板中的数据绑定，介绍setup中的生命周期和ref, reactive的使用。同时讲解了Vue3新引入的<script setup>语法糖，其简化了组件的定义，允许在模板中直接使用数据而无需return。文章还提到了顶级await的使用场景及限制，指出<script setup>不能与<script src>同时使用。" 137543768,12061539,Python实现单词计数器,"['Python', '开发语言', 'GUI']

摘要由CSDN通过智能技术生成

setup()方法

在组件创建之前执行，是组合式 API 的入口
方法可以接受两个参数 props 和 context

setup方法中，要将数据暴露给页面模板，需要结合ref,和reactive，并使用return
官网例子：

<!-- MyBook.vue -->
<template>
  <div>{
  { readersNumber }} {
  { book.title }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      const readersNumber = ref(0)
      const book = reactive({ title: 'Vue 3 Guide' })

      // 暴露给模板
      return {
        readersNumber,
        book
      }
    }
  }
</script>

setup中的生命周期，使用时需要导入
官网例子：

import { onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    on