在线预览windfall007.github.io/html/qixi/
react开源地址 github.com/yacan8/vale…
在网上看到一个开源项目使用的是react写了一个七夕爱心的动画，出于学习，我用vue3+jsx重写了一遍他的功能。使用中对vue3也有了更进一步的理解，写一个笔记记录一下开发中的问题和知识点，巩固记忆和方便以后查阅。
安装插件
npm install @vitejs/plugin-vue-jsx --save-dev
vite.config.js 文件，并增加如下配置：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from "@vitejs/plugin-vue-jsx"; // 配置vue使用jsx
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx()
],
// 配置前端服务地址和端口
server: {
host: '0.0.0.0',
port: 8991,
// 是否开启 https
https: false,
},
})
我在启动时报错了，安装的版本可能和vite版本不兼容，当报错时可以尝试升级vite版本或者安装低版本的plugin-vue-jsx。
vue3的defineComponent
之前一直到都是使用script setup的语法糖，对vue3的defineComponent没有了解，做个简单的记录。
defineComponent函数，只是对setup函数进行封装，返回options的对象； defineComponent最重要的是：在TypeScript下，给予了组件 正确的参数类型推断 。
使用setup时，需要在外部定义一个props，setup中的props才能接收到，setup第二个参数 context 包含三个属性：attrs、emit 和 slots。它们分别相当于组件实例的 emit 和 $slots 这几个属性。
组合式中使用setup
由于一直使用setup语法糖，对在组合式中使用setup缺乏了解，开发中频频出错，这里大致说明。
使用setup时，需要在外部定义一个props，setup中的props才能接收到。
请注意如果你解构了 props 对象，解构出的变量将会丢失响应性。因此我们推荐通过 props.xxx 的形式来使用其中的 props。
如果你确实需要解构 props 对象，或者需要将某个 prop 传到一个外部函数中并保持响应性，那么你可以使用 toRefs() 和 toRef() 这两个工具函数。
使用toRefs结构后的需要使用xx.value才能赋值
官网解释的很好 cn.vuejs.org/api/composi…
import { toRefs, toRef } from 'vue'
export default {
setup(props) {
// 将 `props` 转为一个其中全是 ref 的对象，然后解构
const { title } = toRefs(props)
// `title` 是一个追踪着 `props.title` 的 ref
console.log(title.value)
// 或者，将 `props` 的单个属性转为一个 ref
const title = toRef(props, 'title')
}
}
Setup 上下文
export default {
setup(props, context) {
// 透传 Attributes（非响应式的对象，等价于 $attrs）
console.log(context.attrs)
// 插槽（非响应式的对象，等价于 $slots）
console.log(context.slots)
// 触发事件（函数，等价于 $emit）
console.log(context.emit)
// 暴露公共属性（函数）
console.log(context.expose)
}
}
使用jsx写组件
vue的jsx语法可查看官网的说明 cn.vuejs.org/guide/extra…
这个项目中使用的到的功能做一个记录
//vue诸如<KeepAlive>、<Transition>、<TransitionGroup>、<Teleport> 和 <Suspense> 等内置组件在渲染函数中必须导入才能使用：
import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue'
export default {
render () {
return <Teleport to="body">
/*****/
</Teleport>
}
}
