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

OptionsAPI与COmpositionAPI

1. 选项式APi

   Vue2的AP设计是Options（配置、选项式）风格的

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

2. 组合式API

   Vue3的API设计是Composition（组合式）风格的

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

setup

• setup 函数是在组件实例被创建之前执行的，它主要用于初始化组件的响应式数据、定义组件的方法以及引入外部资源等操作，是组件逻辑的核心部分。
• 与 Vue 2 中通过 data、computed、methods 等选项来分别定义组件的不同特性不同，在 setup 函数中，可以将这些相关的操作更加集中地进行处理

基本使用(非响应式)

• setup函数返回的对象中的内容，可直接在模板中使用。
• setup中访问this是undefined。
• setup函数会在beforeCreate之前调用，它是"领先"所有钩子执行的。

<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的返回值

// 若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用    
return {name,age,getInfo}

// 返回一个函数：渲染自定义内容，页面渲染hello world
return () => = "hello world"

组合式api和选项式api组合使用

• vue2选项式api和vue3组合式api可以同时存在
• Vue2 的配置（data、methos等等）中可以访问到 setup中的属性、方法。
• 但在setup中不能访问到Vue2的配置
• 如果与两种写法冲突，则setup优先

<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>在语法上更加简洁，并且提供了一些额外的便利特性

<!-- 第一个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>

<template>
{{ age}}
  {{name}}
  <button @click="getName">按钮</button>
</template>

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

1. 安装插件

    # -D 开发依赖
    npm i vite-plugin-vue-setup-extend -D           

2. 使用插件

   // 在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标签

   // name指定组件的名字
   <script setup lang="ts" name="UserInfo">
     // 编写setup()函数中的代码
   </script>