汇总在vue中写jsx的方式

版本

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

汇总在vue中写jsx的方式

render函数

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

vuetemplatesarecompiledintovirtualDOMrenderfunctions.vuealsoprovidesAPIsthatallowustoskipthetemplatecompilationstepanddirectlyauthorrenderfunctions

Ifbothrenderandtemplatearepresentinacomponent,renderwilltakehigherpriority.

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

其实更加直接说就是vue3render函数

jsx/tsx

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

在typescript下需要编写tsx

使用jsx的几种方式

使用js对象注册component

Whennotusingabuildstep,aVuecomponentcanbe>definedasaplainJavaScriptobjectcontaining>Vue-specificoptions:

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中returnjsx会报错，目测是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>