本文介绍 Vue 3.0 结合 Vite 构建工具使用 JSX 语法的完整流程。涵盖项目创建、基础 JSX 组件编写、响应式数据绑定以及通过 defineComponent 实现有状态组件和父子组件通信的具体代码示例。
Vue 3.0 与 Vite 环境介绍
Vue 3.0 已经正式发布，这是一个值得关注的版本。不过，要在生产环境中大规模应用，可能还需要等待 vuex、vue-router 等周边工具完成升级适配。
Vue 3.0 引入了新的编译工具 vite，这被视为对 webpack 的一次革新。查阅文档后发现，Vue 3.0 原生支持 JSX 语法。对于习惯使用 React 进行开发的开发者来说，这种体验更加纯粹且灵活。
项目创建与目录结构
项目创建
npm init vite-app vite-vue
cd vite-vue
npm install
npm run dev观察生成的目录结构，可以发现其非常简洁。
JSX 基础使用与数据绑定
使用 JSX
Vue 3.0 直接支持 JSX 语法，我们可以新建一个 demo.jsx 文件。
export default function JsxTemp() {
return <div>
<h3>jsx</h3>
</div>
}将该文件引入到 App.vue 中，页面可以正常渲染显示。
再尝试绑定数据
import { ref } from 'vue'
export default function JsxTemp() {
const state = ref(0)
const onClick = () => {
state.value++;
console.log(state.value)
}
return <div>
<h3>state: {state.value}</h3>
<button onClick={onClick}>点击</button>
</div>
}我们发现，初始状态下 state 数值并没有如预期那样实现自增效果。
这是因为在 Vue 3.0 中，必须使用 defineComponent 包裹组件，使其成为支持双向数据绑定的组件。该函数接收 setup function 或 object 作为参数。
import { defineComponent, ref } from 'vue'
export default defineComponent(() => {
const state = ref(0)
const onClick = () => {
state.value++;
console.log(state.value)
}
return () => (
<div>
<h3>state: {state.value}</h3>
<button onClick={onClick}>点击</button>
</div>
)
})经过上述修改后，点击按钮即可实现数值的实时自增效果。
组件间通信实现
组件通信
那么，组件之间如何传值通信呢？
我们需要改用对象的方式来传入通信数据。
App.vue
<JsxTemp site="imondo.cn" @onGet="onGet" />
export default {
...
methods: {
onGet(e) {
console.log('emit:', e)
}
}
}
...
export default defineComponent({
props: {
site: String
},
setup({ site }) {
const state = ref(0)
const onClick = () => {
state.value++;
console.log(state.value)
context.emit('onGet', 'Mondo');
}
return () => (
<div>
<h1>props: {site}</h1>
<h3>state: {state.value}</h3>
<button onClick={onClick}>点击</button>
</div>
)
}
})实现效果
总结与组件分类
总结
我们尝试了在 Vue 3.0 中如何使用 JSX，这有助于我们在项目中更灵活地复用组件，并明确项目中的使用方式。
- 无状态组件：我们可以完全使用纯函数来展示。
- 有状态组件：存在逻辑与数据绑定的组件，则需要使用 Vue 3.0 提供的一系列组件 API。
以上就是 Vue 3.0 中 JSX 语法使用的详细内容，更多关于 Vue 3.0 JSX 语法的资料请关注本站其它相关文章！