OptionsAPI与COmpositionAPI
-
选项式APi
Vue2的AP设计是Options（配置、选项式）风格的
Options类型的API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用 -
组合式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 = 18let 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 = 18let 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标签
-
安装插件
# -D 开发依赖npm i vite-plugin-vue-setup-extend -D -
使用插件
// 在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))},}, }) -
编写script标签
// name指定组件的名字 <script setup lang="ts" name="UserInfo">// 编写setup()函数中的代码 </script>
