Vue学习计划-Vue3--核心语法(一)OptionsAPI、CompositionAPI与setup

2024-01-02 10:22:27
1. OptionsAPICompositionAPI
  • Vue2API设计是Options(配置)风格的
  • Vue3API设计是Composition(组合)风格的

Options API的弊端:
Options类型的API,数据、方法、计算属性等,是分散在:datamethodscomputed中的,若想新增或者修改一个需求,就需要分别修改:datamothodscomputed,不便于维护和复用
Composition API的优势:
可以用函数的方式,更加优雅的组织代码,让相关公告的代码更加有序的组织在一起

2. setup
  1. 概述:
    setupVue3中一个新的配置项,值是一个函数,它是Composition API"表演的舞台",组件中所用到的:数据、方法、计算属性、监视…等等,均配置在setup
  2. 特点:
    1. setup函数返回的对象中的内容,可直接在模板中使用
    2. setup中访问thisundefined
    3. setup函数会在beforeCreate之前调用,它是"领先"所有钩子执行的
  3. 注意:
  1. 选项式写法和setup混写的话:datamethods等中可以访问setup中定义的数据,但是setup中不能访问data等中定义的数据
  1. 示例:

    1. App.vue
      在这里插入图片描述

    2. Person.vue
      在这里插入图片描述

  2. setup语法糖

    1. Person.vue
      在这里插入图片描述

    2. 浏览器效果
      在这里插入图片描述

    注意哦?我们是在Person.vue组件中写的代码,通常Person也就是我们的组件名称。但是不排除我们有时候组件名称与组件文件名不一致,需要我们自定义组件名称,此时呢,我们需要在<script lang="ts" setup name="Person234">标签中通过name定义组件名称,单纯的定义名称可以看到效果图中,vue-tools中还是Person,所以我们要怎么使name生效呢?
    3. 安装依赖npm i vite-plugin-vue-setup-extend -D或者yarn add vite-plugin-vue-setup-extend
    4. vite.config.ts添加配置
    在这里插入图片描述

    1. 重启项目,打开浏览器,重新打开控制台,组件名称name就起效果了
      在这里插入图片描述

文章来源:https://blog.csdn.net/qq_35940731/article/details/135329312
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。