Vue3 中 jsx 语法的自定义指令和函数方法如何在Typescript 和Javascript 中去使用

前言

1.在今年九月份时写过一篇 Three.js实现一个3D模型可视化编辑系统 主要是和大家分享了一下自己如何实现这个3d模型编辑器的过程和项目内容,文章也非常有幸被掘金推荐到首页。

2.该项目也在git 上收获了许多的star ,因为之前是用Vue3+Javascript 实现的,由于最近也学习了Typescript的使用,于是决定对该项目进行Vue3+Typescript分支的版本重构。

3.在整个项目的重构过程中也发现很多相同的方法在Typescript中使用差异非常的大。

4.今天主要给大家分享一下 vue3自定义指令和函数方法在jsx语法中 TypescriptJavascript 的用法区别。

首先我们先看 jsx语法的一些属性在 Javascript 中如何去写

在render + h 函数里面实现一个带有id属性和自定义指令的div元素

js 复制代码
 render(){
  return h(<div v-zLoading={loading} 
       onClick={()=>{
          console.log('这是一个点击事件')
       }}
      style={{
       width: width - 10 + 'px',
       height: height - 10 + 'px',
       pointerEvents: 'none' }} 
       id={elementId} >
    </div>)
 }

这就是jsx语法在Vue3+js 中去实现的写法,然而同样的代码复制粘贴到Typescript中去就会出现ts的语法警告(大概意思就是说ts不支持这种语法)。

在查阅了Vue3官网文档等相关资料后,发现Typescript的jsx语法中的自定义指令需要通过Vue3新增的 resolveDirective 和 withDirectives 这两个函数来配合实现

而函数方法则是需要通过 withModifiers 函数来实现

同样的内容在 Typescript中如何编写

1.首先引入 withDirectives, resolveDirective ,withModifiers 三个方法

2.通过 resolveDirective 获取到已经注册的自定义指令

3.通过 withDirectives 创建带有自定义指令的元素

4.通过 withModifiers 来定义一个点击事件函数方法

js 复制代码
import {  h, withDirectives, resolveDirective } from 'vue'
render(){
          const zLoading = resolveDirective('zLoading')
          
   	return withDirectives(h('div', {
                  onClick:withModifiers(()=>{
                        console.log('这是一个点击事件')
                   },['stop','prevent']),       
	                style: {
			    width: width - 10 + 'px',
			    height:height - 10 + 'px',
			    pointerEvents: 'none',
			},
		           id: elementId,
		       }), [
			  [zLoading, loading]
		     ])
      }
        

关于 resolveDirective , withDirectives ,withModifiers

1.resolveDirective :按名称手动解析已注册的指令。

  • 类型

    javascript 复制代码
     function resolveDirective(name: string): Directive | undefined

详细信息 :为了能从正确的组件上下文进行解析,resolveDirective() 必须在setup() 或渲染函数内调用。 如果指令没有找到,会抛出一个运行时警告,并返回 undefined

2.withDirectives : 用于给 vnode 增加自定义指令。

  • 类型
typescript 复制代码
function withDirectives( vnode: VNode, directives: DirectiveArguments ): VNode

type DirectiveArguments = Array< 
 | [Directive] 
 | [Directive, any] 
 | [Directive, any, string] 
 | [Directive, any, string, DirectiveModifiers] 
>

详细信息 :用自定义指令包装一个现有的 vnode。第二个参数是自定义指令数组。每个自定义指令也可以表示为 [Directive, value, argument, modifiers] 形式的数组。如果不需要,可以省略数组的尾元素。

3.withModifiers:用于向事件处理函数添加内置 v-on 修饰符

  • 类型
javascript 复制代码
   function withModifiers(fn: Function, modifiers: string[]): Function

4.内容参考自Vue3官方文档:渲染函数API

以上就是我个人总结出的 Vue3 jsx语法自定义指令和函数方法在Typescript和Javascript 的使用异同,如有错误欢迎指正^_^

完整的代码可以参考:

js版本:gitee.com/ZHANG_6666/... 767-810 行代码

ts版本:gitee.com/ZHANG_6666/... 808-877 行代码

相关推荐
Jagger_4 分钟前
Cursor + Apifox MCP:告别手动复制接口,AI 助你高效完成接口文档开发
前端
IT_陈寒20 分钟前
Redis性能优化:5个被低估的配置项让你的QPS提升50%
前端·人工智能·后端
Hilaku27 分钟前
重新思考CSS Reset:normalize.css vs reset.css vs remedy.css,在2025年该如何选?
前端·css·代码规范
袁煦丞40 分钟前
一图看懂Docker管理 Portainer:cpoar内网穿透实验室第652个成功挑战
前端·程序员·远程工作
右子1 小时前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
入秋1 小时前
Three.js后期处理实战:噪点 景深 以及色彩调整
前端·javascript·three.js
Asort1 小时前
JavaScript设计模式(七)——桥接模式:解耦抽象与实现的优雅之道
前端·javascript·设计模式
golang学习记1 小时前
从0死磕全栈之Next.js 应用中的认证与授权:从零实现安全用户系统
前端
苏打水com2 小时前
携程前端业务:在线旅游生态下的「复杂行程交互」与「高并发预订」实践
前端·状态模式·旅游
Darenm1112 小时前
深入理解CSS BFC:块级格式化上下文
前端·css