vue3-setup基本使用(非响应式数据)

OptionsAPI与COmpositionAPI
  1. 选项式APi

    Vue2的AP设计是Options(配置、选项式)风格的

    Options类型的 API,数据、方法、计算属性等,是分散在:datamethodscomputed中的,若想新增或者修改一个需求,就需要分别修改:datamethodscomputed,不便于维护和复用

  2. 组合式API

    Vue3的API设计是Composition(组合式)风格的

    可以用函数的方式,更加优雅的组织代码,让相关功能的代码更加有序的组织在一起

setup
  • setup 函数是在组件实例被创建之前执行的,它主要用于初始化组件的响应式数据、定义组件的方法以及引入外部资源等操作,是组件逻辑的核心部分。
  • 与 Vue 2 中通过 datacomputedmethods 等选项来分别定义组件的不同特性不同,在 setup 函数中,可以将这些相关的操作更加集中地进行处理
基本使用(非响应式)
  • setup函数返回的对象中的内容,可直接在模板中使用。
  • setup中访问thisundefined
  • setup函数会在beforeCreate之前调用,它是"领先"所有钩子执行的。
ts 复制代码
<script lang="ts">
export default {
  name:"UserInfo",
  // 定义setup-> 此时的数据不是响应式的,初始展示,后续修改不会响应式修改
  setup(){
    // 定义属性,vue2中data中的数据
    let age:number = 18
    let name:string = "v3"

    // 定义方法,回调、计算属性等等vue2中的函数配置项
    function getInfo():number{
      // 此处不能使用this,this 是undefined,都在setup函数作用域中,直接调用
      return age
    }

    // 将属性、方法暴露出去
    return {name,age,getInfo}

  }

}
</script>
setup的返回值
ts 复制代码
// 若返回一个对象:则对象中的:属性、方法等,在模板中均可以直接使用    
return {name,age,getInfo}
ts 复制代码
// 返回一个函数:渲染自定义内容,页面渲染hello world
return () => = "hello world"
组合式api和选项式api组合使用
  • vue2选项式api和vue3组合式api可以同时存在
  • Vue2 的配置(datamethos等等)中可以访问到 setup中的属性、方法。
  • 但在setup中不能访问到Vue2的配置
  • 如果与两种写法冲突,则setup优先
ts 复制代码
<script lang="ts">
export default {
  name:"UserInfo",
  // vue3语法
  setup(){
    // 定义属性,vue2中data中的数据
    let age:number = 18
    let name:string = "v3"
    return {name,age}

  },
  // vue2语法
  methods:{
    getInfo():string{
      return this.name
    }

  }

}
</script>
setup语法糖

在 Vue 3 中,<script setup>是一种 "语法糖"。它是一种更简洁的编写组件setup函数的方式,能够让组件的逻辑代码更加清晰、易读,可以让我们把setup独立出去

与普通的setup函数写法相比,<script setup>在语法上更加简洁,并且提供了一些额外的便利特性

ts 复制代码
<!-- 第一个script标签,不使用setup属性  设置组件名字-->
<!-- 如果设置name,则组件名字默认是该文件名字-->
<script lang="ts">
export default {
  name: "UserInfo"
}

</script>
<!-- 第一个script标签,使用setup属性,用于编写代码 setup()函数中的代码-->
<script setup lang="ts">

// 等同于 在setup()函数中定义该变量 然后返回
let age: number = 18
let name: string = "v"

//等同于在setup()函数中编写该方法 然后返回
function getName(): void {
  alert(name)
}

</script>
html 复制代码
<template>
{{ age}}
  {{name}}
  <button @click="getName">按钮</button>
</template>

上面示例需要写两个script标签,可以使用vite-plugin-vue-setup-extend插件,只写一个script标签

  1. 安装插件

    shell 复制代码
     # -D 开发依赖
     npm i vite-plugin-vue-setup-extend -D           
  2. 使用插件

    ts 复制代码
    // 在vite.config.ts文件
    import {fileURLToPath, URL} from 'node:url'
    
    import {defineConfig} from 'vite'
    import vue from '@vitejs/plugin-vue'
    import vueDevTools from 'vite-plugin-vue-devtools'
    
    // 引入该插件
    import VueSetUpExtend from 'vite-plugin-vue-setup-extend'
    
    
    // https://vite.dev/config/
    export default defineConfig({
        plugins: [
            vue(),
            vueDevTools(),
            // 使用该插件
            VueSetUpExtend()
        ],
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url))
            },
        },
    })
  3. 编写script标签

    ts 复制代码
    // name指定组件的名字
    <script setup lang="ts" name="UserInfo">
      // 编写setup()函数中的代码
    </script>
相关推荐
陈不知代码11 分钟前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记13 分钟前
sass中@mixin与 @include
前端·sass
Maybe_ch18 分钟前
.NET-键控服务依赖注入
开发语言·c#·.net
陈琦鹏20 分钟前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
超浪的晨25 分钟前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
终焉暴龙王27 分钟前
CTFHub web进阶 php Bypass disable_function通关攻略
开发语言·安全·web安全·php
hui函数1 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante1 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Edingbrugh.南空1 小时前
Aerospike与Redis深度对比:从架构到性能的全方位解析
java·开发语言·spring
Carlos_sam2 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript