vue中使用jsx语法的好处,vue和vuex的使用方法
本文主要介绍了在vue中编写jsx的几种方式，通过示例代码进行了非常详细的介绍，对大家的学习或者工作有一定的参考价值。有需要的朋友下面和边肖一起学习。
:版本
目录
渲染函数jsx/tsx使用jsx的几种方式向jsx对象注册组件。vue文件vue2.7中结合了compositionApi和JSX。vue文件。
版本
本文版本配置为Vue:Vue:2 . 7 . 2 Vue-CLI:~ 4 . 5 . 18；本文中的代码github仓库地址
render函数
vue中的render函数和模板是互斥的，模板最终会编译成虚拟Dom，而render函数可以更直接的构建虚拟Dom；虚拟Dom由树状的vnode组成，h函数可以构建vnode。
vue模板被编译成虚拟DOM渲染函数。vue还提供API，允许我们跳过模板编译步骤，直接创作渲染函数
如果渲染和模板都出现在一个组件中，渲染将具有更高的优先级。
如果render和template同时出现，render会有更高的权限(vue2不一样，下面会介绍)。
在这些文档中更直接地描述了vue3渲染功能。
jsx/tsx
Jsx类似于H函数，使用javascript更直接地构建DOM。需要注意的是，jsx语法需要编译，有些脚手架可能是预配置的，有些可能不是。
Tsx需要在typescript下编写。
使用jsx的几种方式
使用js对象注册component
当不使用构建步骤时，可以将Vue组件定义为包含Vue特定选项的普通JavaScript对象：
Vue组件也可以使用普通的js对象直接注册。
//定义一个js文件并导出组件对象
//componentObject.js
导出默认值{
data() {
返回{
消息：“你好”
}
},
已创建(){
setTimeout(()={
this.msg=你好，世界
}, 1000);
},
render() {
返回h1{this.msg}/h1
}
}
脚本
从“”导入componentObject。/./components/componentObject.js
导出默认值{
组件：{
jsxComponent
}
};
/脚本
使用.vue文件
如果同时指定了模板和渲染函数，模板将覆盖渲染。显然，模板具有更高的优先级，这不同于在文档上呈现的更高优先级。
//sfcJsx.vue
！-模板
div测试/div
/模板-
脚本
导出默认值{
data() {
返回{
msg:我是sfc jsx
}
},
已创建(){
setTimeout(()={
this.msg=我是sfc jsxxxx
}, 1000);
},
render() {
返回h1{this.msg}/h1
}
}
/脚本
vue2.7在.vue文件中结合compositionApi和jsx
目前return jsx会报错设置，但是目测加载器不支持(知道解决方案的老手也可以告诉我.)，所以只能在setup中使用compositionApi和render函数编写jsx。
//sfcJsx.vue
脚本
从“vue”导入{ ref }；
导出默认值{
setup() {
const count=ref(0)；
setTimeout(()={
count.value=12
}, 1000);
返回{
数数
}
},
渲染(h) {
返回(
h1{this.count？span11/span: span22/span}/h1
)
}
}
/脚本
关于在vue中编写jsx的几种方法的这篇文章就到这里了。关于使用jsx的vue的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。