Vue3：使用setup实现组合式开发

生产队队长2024-03-07 22:24

一、情景说明

首先，我们应该知道，Vue3中，可以用Vue2的语法，进行配置式开发。

在这里，我们用Vue3的新语法，实现组合式开发

二、案例

1、组件中使用setup代替Vue2中的data、methods等vc配置项

关键配置：script 标签中的 setup

html 复制代码

<script lang="ts" setup name="Person">
    // 数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据
    let name = '张三'
    let age = 18
    let tel = '13888888888'
    let address = '北京昌平区宏福苑·宏福科技园'

    // 方法
    function changeName() {
        name = 'zhang-san' //注意：这样修改name，页面是没有变化的
        console.log(name) //name确实改了，但name不是响应式的
    }
    function changeAge() {
        age += 1 //注意：这样修改age，页面是没有变化的
        console.log(age) //age确实改了，但age不是响应式的
    }
    function showTel() {
        alert(tel)
    }
</script>

2、组件名简化

以往在Vue2中，组件名是写在vc实例的name配置项的

这里，用vite-plugin-vue-setup-extend插件，在Vue3中直接去掉vc实例的配置编写工作

安装插件：

bash 复制代码

npm i vite-plugin-vue-setup-extend

使用插件：
vite.config.ts配置文件中

关键配置：
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
VueSetupExtend()

javascript 复制代码

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标签中，配置name=＂Person＂

经过以上配置，我们，就可以在配置了setup的script标签中，愉快的写Vue3的代码了！

注意∶
Vue3中的setup区域，不能使用this！！！