手机app与电脑网站的区别,个人建设图片分享网站,微信公众号开发平台,wordpress openid前言#xff1a; 整理分享下vue3tstsx相关的资料#xff0c;有react使用经验的小伙伴应该更能理解这个的好处#xff0c;终于在vue3中也支持了#xff0c;相当于函数的方法来操作界面。
1、vue3项目中为什么要用tsx#xff08;等同于我们react的jsx#xff09; 类型安全…前言 整理分享下vue3tstsx相关的资料有react使用经验的小伙伴应该更能理解这个的好处终于在vue3中也支持了相当于函数的方法来操作界面。
1、vue3项目中为什么要用tsx等同于我们react的jsx 类型安全TSX 可以帮助开发者在编写代码的过程中检测类型错误减少运行时错误的发生并提高代码可维护性。 更好的代码提示在使用 TSX 编写代码时开发者可以享受到更好的编码提示和自动补全功能从而提高编写代码的效率。 更容易维护在使用 TSX 编写代码时代码结构更加清晰明了可读性更高使得代码的维护更加容易。 容易与 React 生态系统集成TSX 是 React 生态系统中广泛使用的一个技术栈使用 TSX 可以更容易地与其它开源组件和库进行集成和协作。 2、他的用法和我们常规的vue3ts使用有什么区别 语法Vue 3 的模板语法和 TSX 的语法是不同的Vue 3 的模板语法更接近于 HTML而 TSX 的语法更接近于 JavaScript。 类型检查TSX 依赖于 TypeScript可以使用 TypeScript 的类型检查功能来减少代码中的错误而 Vue 3 的模板语法没有这种类型检查功能。 可读性TSX 的语法更接近于 JavaScript对于熟悉 JavaScript 的开发者来说可能更容易阅读和理解 TSX 的代码。但同时也可能会感到 TSX 的语法更繁琐对于不熟悉 TypeScript 的开发者来说学习曲线可能会更陡峭。 性能使用 TSX 编写 Vue 3 组件可能会比使用模板语法的组件具有更好的性能。因为 TSX 可以直接将组件转换为纯 JavaScript 代码而模板语法需要在运行时进行解析和编译。 总的来说使用 TSX 可以使代码更可读性更好具有类型检查等优势但也需要引入 TypeScript并且需要开发者对 TypeScript 有一定的了解。而使用 Vue 3 的模板语法则更加接近于 HTML对于前端开发者来说更加直观但可能会牺牲一些性能。具体使用哪种方式需要根据项目需求和开发者技能来决定。 3、项目中的安装部署
1、安装, babel-plugin-jsx
npm insatll vue/babel-plugin-jsx --save
2、在项目的 babel.config.js 文件的plugins中添加配置
module.exports {presets: [vue/cli-plugin-babel/preset],plugins: [vue/babel-plugin-jsx]
}
4、具体使用的一些方法分享使用他与不使用做对比
1、最重要的一点他的模块是通过setup的return返回的
import { defineComponent, ref, reactive } from vueexport default defineComponent({props: {},setup(props) {const msg ref(hello tsx)const state reactive({count: 1})return () {return div{msg.value} span{state.count}/span/div}}
})
2、元素上绑定{} 加内容
vue文件
com :datadata/comtsx文件
com data{data}/com
3、v-if 必须用三木运算或者是
vue文件
div v-ifflag/divtsx文件js逻辑代码必须用大括号包裹
{flag ? div/div : null
}
isActive p123/p //意思就是 isActive true的情况下展示 后面的标签isActive title123 p123/p
//意思就是 isActive true title123 的情况下展示 最后面的标签
4、v-for
vue文件
ulli v-foritem in list :keyitem{{item}}/li
/ultsx文件
ul{list.map((item) {return li key{item}{item}/li})}
/ul
5、点击事件等绑定有点像原生了onScroll ,on
vue文件
div clickhandleClick/divtsx文件
div onClick{handleClick}/divonMouseenter{handleMouseEnter}
onMouseleave{handleMouseLeave}
6、子传父
vue:
子组件:
emit(custom)父组件
ChildComponent customhandleCustom /tsx:
子组件:
emit(custom)父组件
ChildComponent onCustom{handleCustom} / 5、api文档分享
使用 JSX 书写标签语言 – React 中文文档
