一、情景说明
首先,我们应该知道,Vue3
中,可以用Vue2
的语法,进行配置式开发。
在这里,我们用Vue3
的新语法,实现组合式开发
二、案例
1、组件中使用setup
代替Vue2
中的data、methods
等vc
配置项
关键配置:script 标签中的 setup
<script lang="ts" setup name="Person">// 数据,原来是写在data中的,此时的name、age、tel都不是响应式的数据let name = '张三'let age = 18let 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
实例的配置编写工作
安装插件:
npm i vite-plugin-vue-setup-extend
使用插件:
vite.config.ts
配置文件中
关键配置:
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
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
标签中,配置name="Person"
经过以上配置,我们,就可以在配置了setup的script标签中,愉快的写Vue3的代码了!