vue3的一些变更

vue3

前言

vue3相比vue2变动很大，生命周期和一些常用的指令（例如v-bind）都发生了很大变化

==注意：以下demo基于vue3+ts+vite==

vue3最核心的变更

• 拥抱JSX
• TypeScript(vue3加ts用起来很方便)
• Composition Api(与react hook相似)
• Reactivity (对响应式的支持)

使用jsx编写页面

为什么不用原来sfc的写法

sfc是什么

.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，这种html、js、css分离的文件规范便是单文件组件 (SFC) 规范

不用sfc的原因

• sfc经过努力但没有成为标准(jsx已经成为标准)
• sfc不符合关注点分离原则（逻辑集中管理、封装密封性、减少记忆）

使用

项目中运行以下命令安装

yarn add -D @vitejs/plugin-vue-jsx

vite.config.ts文件中添加配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import jsx from '@vitejs/plugin-vue-jsx' //引入jsx


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),jsx()] //添加jsx()
})