以 JSX 的方式来编写 Vue3 代码

更新日期: 2021-01-29阅读: 2.7k标签: Vue3

创建项目

使用 vue ui 创建 vue3 项目

安装 vue-router vuex @vue/cli-plugin-typescript, @vue/babel-plugin-jsx

修改 babel.config.js 文件

module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: ["@vue/babel-plugin-jsx"] }

修改全部 .vue -> .jsx, 模板如下

import {defineComponent} from 'vue'; export default defineComponent({ name: "", setup() { return () => ( <> </> ) } })


路由

RouterView

和 <router-view/> 是一样的用法

import {defineComponent} from 'vue'; import {RouterView} from 'vue-router' export default defineComponent({ setup() { return () => <RouterView/> } })
import {defineComponent} from 'vue'; import {RouterLink} from 'vue-router' export default defineComponent({ name: "RouterLinkDemo", setup() { return () => <RouterLink to={'/home'}/> } })

Fragment

一个组件返回多个元素,和 react.Fragment 差不多
语法 <></>

import {defineComponent, Fragment} from 'vue'; export default defineComponent({ name: "FragmentDemo", setup() { const a = ( <> <div>A</div> <div>A</div> </> ) return () => ( <Fragment> {a} <div>b</div> </Fragment> ) } })


插槽

带有插槽的组件

创建 ASlotDemo 组件,ASlotDemo 有具名插槽 header,范围插槽 footer

在模板中定义插槽需要用到 <slot/>, jsx 中使用renderSlot函数渲染插槽

renderSlot 接收 Slots, 插槽名,插槽数据,进行渲染

import {defineComponent, renderSlot} from "vue"; export default defineComponent({ name: "ASlotDemo", setup(props, {slots}) { const {default: defaultSlot, header, footer} = slots; const footerData = { text: "2020-1-20" } return () => ( <> <div> { header !== undefined ? renderSlot(slots, 'header') : "默认 header" } </div> <div> { defaultSlot !== undefined ? renderSlot(slots, 'default') : "没有传递默认插槽" } </div> <div> { footer !== undefined ? renderSlot(slots, 'footer', footerData) : "默认 footer" + footerData.text } </div> </> ) } })

使用

在使用范围插槽时,可以定义个接口,获得语法提示

import {defineComponent} from "vue"; import ASlotDemo from "@/components/slot/ASlotDemo"; interface IFooterSlotData { text: string; } export default defineComponent({ name: "BSlotDemo", setup() { return () => ( <> <ASlotDemo> 我是: BSlotDemo </ASlotDemo> <ASlotDemo> </ASlotDemo> <ASlotDemo v-slots={{ default: () => <div>slots使用方式1</div>, header: () => <span>header1</span>, }}/> <ASlotDemo> {{ default: () => <div>slots使用方式2</div>, header: () => <span>header2</span>, }} </ASlotDemo> <ASlotDemo v-slots={{ default: () => <div>范围插槽使用</div>, header: () => <span>范围插槽header</span>, footer: (value: IFooterSlotData) => <span>获取范围插槽的值: {value.text}</span>, }}/> </> ) } })

emits

在父组件使用时,必须 on + 事件名(事件名第一个字母必须大写)

// AEmitsDemo.jsx import {defineComponent} from 'vue'; export default defineComponent({ name: "AEmitsDemo", emits: ['click', 'getDate'], setup(props, {emit}) { const click = () => { console.log('点击++++++++') emit("click") } return () => ( <> <div onClick={click}>点击</div> <div onClick={() => emit("getDate", 10)}>获取数据</div> </> ) } }) // BEmitsDemo.jsx import {defineComponent} from 'vue'; import AEmitsDemo from "@/components/emits/AEmitsDemo"; export default defineComponent({ name: "BEmitsDemo", setup() { const click = () => { console.log('点击---------') } const getData = (value: number) => { console.log(value); } return () => <AEmitsDemo onClick={click} onGetData={getData}/> } })

源码: https://github.com/NikolasSky/vue3-tsx

本文作者:nikolas
本文链接:https://www.cnblogs.com/plum-nikolas/archive/2021/01/29/14344782.html 

 

链接: https://www.fly63.com/article/detial/10113

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

在Vue2与Vue3中构建相同的组件

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!