Vue3快速上手（三）Composition组合式API及setup用法

一、Vue2的API风格

Vue2的API风格是Options API,也叫配置式API。一个功能的数据，交互，计算，监听等都是分别配置在data, methods，computed, watch等模块里的。如下：

<template> <div class="person"> <h3>姓名：{{ name }}</h3> <button @click="updatePersonName">修改姓名</button> </div> </template> <script lang="ts"> import { computed, watch } from 'vue'; export default { name: 'Person', data() { return { name: "李四" }; }, methods: { updatePersonName() { this.name = "王五" } }, computed: { }, watch: { } } </script> 二、Vue3的API风格

Vue3的API风格是Composition API,也叫组合式API。一个功能的数据，交互，计算，监听等都是通过函数的方式，组织在一起的。 配合Hooks使用更加完美。这个后面会涉猎。

2.1 setup()基本用法 <template> <div class="person"> <h3>姓名：{{ name }}</h3> <button @click="updatePersonName">修改姓名</button> </div> </template> <script lang="ts"> export default { name: 'Person', // setup在beforeCreate前加载 setup() { console.log(this);// undefined // data let name = "李四" // 非响应式数据 // 对非响应式数据直接赋值修改是在方法里生效的，但在页面里的不生效的 function updatePersonName(){ console.log('调用修改name方法'); name = "王五" console.log('改之后name: ', name);// 王五 } return {name, updatePersonName}; } } </script> 2.2 setup省事用法

单独建立script将setup提出单独写，可以不用return

<template> <div class="person"> <h3>姓名：{{ name }}</h3> <button @click="updatePersonName">修改姓名</button> </div> </template> <script lang="ts"> export default { name: 'Person', // setup在beforeCreate前加载 // setup() { // console.log(this);// undefined // // data // let name = "李四" // 非响应式数据 // // 对非响应式数据直接赋值修改是在方法里生效的，但在页面里的不生效的 // function updatePersonName(){ // console.log('调用修改name方法'); // name = "王五" // console.log('改之后name: ', name);// 王五 // } // return {name, updatePersonName}; // } } </script> <script lang='ts' setup> // data let name = "李四" // 非响应式数据 // 对非响应式数据直接赋值修改是在方法里生效的，但在页面里的不生效的 function updatePersonName(){ console.log('调用修改name方法'); name = "王五" console.log('改之后name: ', name);// 王五 } </script>

此时，发现有2个script标签，而第一个没有setup的标签，只是标注了一个组件名称。略微多余。 可以安装一个插件vite-plugin-vue-setup-extend，解决该问题:

wangdy@mb vue3_study % npm install vite-plugin-vue-setup-extend -D npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead added 3 packages in 2s

然后修改vite.config.ts文件，将VueSetupExtend引入：

import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import VueSetupExtend from 'vite-plugin-vue-setup-extend' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), VueSetupExtend() ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } })

然后，就可以删掉无setup的script标签了，并在有setup的标签中，通过name属性指定组件的名称：

<script lang='ts' setup name="PersonCom"> let name = "李四" function updatePersonName(){ console.log('调用修改name方法'); name = "王五" console.log('改之后name: ', name); } </script>

通过浏览器的vuejs-devtools插件可以查看组件名称已经生效：

END