汇总在vue中写jsx的方式

3403771864 发布于2022-10-10 22:08 / 470人阅读

　　学习就是在不断的总结，我们今天说的就是汇总在vue中写jsx的方式。

　　版本

　　本文版本配置 vue: 2.7.2 vue-cli: ~4.5.18；本文代码github仓库地址

　　render函数

　　render函数和vue中的template是互斥的，template最终是要编译成virtual Dom的，但我们要知道render函数可以更直接构建virtual Dom； virtual Dom由树状的vnode构成，h函数可以构建vnode。

　　vue templates are compiled into virtual DOM render functions. vue also provides APIs that allow us to skip the template compilation step and directly author render functions

　　If both render and template are present in a component, render will take higher priority.

　　假如当render和template同时出现，这时候render会有更高的权限（是不是和vue2中说法不一致）。

　　其实更加直接说就是vue3 render函数

　　jsx/tsx

　　jsx类似于h函数，比较直接使用javascript来构建DOM，但我们要知道的是jsx语法需要去编译处理，有的脚手架可能有预先配置，有的没有。

　　在typescript下需要编写tsx

　　使用jsx的几种方式

　　使用js对象注册component

　　When not using a build step, a Vue component can be >defined as a plain JavaScript object containing >Vue-specific options:

　　vue组件也可以直接使用普通的js对象来注册

　　　// 定义一个js文件，导出组件对象
　　// componentObject.js
　　export default {
　　data() {
　　return {
　　msg: 'hello'
　　}
　　},
　　created() {
　　setTimeout(() => {
　　this.msg = 'hello world'
　　}, 1000);
　　},
　　render() {
　　return <h1>{this.msg}</h1>
　　}
　　}

　　<script>
　　import componentObject from './../components/componentObject.js'
　　export default {
　　components: {
　　jsxComponent
　　}
　　};
　　</script>

　　使用.vue文件

　　这里如果template和render函数如果同时指定的话，会用template覆盖掉render,显然是template优先级更高，跟文档上的render优先级更高不一样

　　// sfcJsx.vue
　　<!-- <template>
　　<div>test</div>
　　</template> -->
　　<script>
　　export default {
　　data() {
　　return {
　　msg: 'i am sfc jsx'
　　}
　　},
　　created() {
　　setTimeout(() => {
　　this.msg = 'i am sfc jsxxxx'
　　}, 1000);
　　},
　　render() {
　　return <h1>{this.msg}</h1>
　　}
　　}
　　</script>

　　vue2.7在.vue文件中结合compositionApi和jsx

　　目前在setup中return jsx会报错，目测是loader没有支持（有知道解决办法的老师傅也可以告诉我一下..），只能在setup使用compositionApi再加上render函数里写jsx

　　// sfcJsx.vue
　　<script>
　　import { ref } from 'vue';
　　export default {
　　setup() {
　　const count = ref(0);
　　setTimeout(() => {
　　count.value = 12
　　}, 1000);
　　return {
　　count
　　}
　　},
　　render(h) {
　　return (
　　<h1>{this.count ? <span>11</span>: <span>22</span>}</h1>
　　)
　　}
　　}
　　</script>

　　在vue中写jsx的方式已经讲解完毕，您学会了多少？

云服务器 GPU云服务器在html中写jq 在html中写css 16种常用的数据分析方法汇总 exe文件在云服务器打开方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127986.html

汇总遇到的问题

摘要：在中看到文件加了，文件加了，缓存没问题。再次访问后端接口，接口，数据正常，问题修复。在接口返回数据量很大的时候，会遇到这种问题。 1.vue项目打包发测后，访问项目链接，功能未生效，刷新后才生效。首先，查看两次访问，获取到的文件是否相同。查看network，两次访问请求如下，可见两次获取到的app.js不是同一个文件。开始认为是浏览器缓存问题，查看如下资料知悉跟浏览器缓存无关。（浏览...

whlong 2019-08-02 13:55 评论0 收藏0
汇总遇到的问题

摘要：在中看到文件加了，文件加了，缓存没问题。再次访问后端接口，接口，数据正常，问题修复。在接口返回数据量很大的时候，会遇到这种问题。 1.vue项目打包发测后，访问项目链接，功能未生效，刷新后才生效。首先，查看两次访问，获取到的文件是否相同。查看network，两次访问请求如下，可见两次获取到的app.js不是同一个文件。开始认为是浏览器缓存问题，查看如下资料知悉跟浏览器缓存无关。（浏览...

fai1017 2019-08-23 14:08 评论0 收藏0
Vue 进阶系列（三）之Render函数原理及实现

摘要：进阶系列一之响应式原理及实现进阶系列二之插件原理及实现进阶系列三之函数原理及实现函数原理根据第一篇文章介绍的响应式原理，如下图所示。在初始化阶段，本质上发生在函数中，然后通过函数生成，根据生成。负责收集依赖，清除依赖和通知依赖。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）showImg(https://segmentfa...

geekidentity 2019-08-23 12:55 评论0 收藏0
React："don't fuck it up like Google did

摘要：核心开发人员大神在开了个，用来征询社区对的建议。而且的工程师并没有因此止步，他们在文档中又告诉开发者，不仅仅要把写到中，也应该写到中。无论怎么使用自定义语法，也不应该影响这种好处，即使最终实现看起来有一些怪异。 React 核心开发人员 sebmarkbage 大神在 GitHub 开了个 issues，用来征询社区对 JSX 2.0 的建议。 showImg(https://segm...

Cristalven 2019-08-21 11:23 评论0 收藏0
React

摘要：语法是一种语法的拓展语言，在中官方也推荐使用描述用户界面，使用起来会比较快捷而且易读不是一门新的语言，可以理解为是一种语法糖，作用就是能够让我们更加直观的在中创建标签，最终还是会被编译为语法，例如我们看一段代码上面的语法最终会被编译为语法， Reatc JSX语法 jsx是一种JavaScript语法的拓展语言，在React中官方也推荐使用jsx描述用户界面，使用起来会比较快捷而且易读...

techstay 2019-08-23 11:40 评论0 收藏0