在vue中写jsx的几种方式

目录
  • 版本
  • render函数
  • jsx/tsx
  • 使用jsx的几种方式
    • 使用js对象注册component
    • 使用.vue文件
    • vue2.7在.vue文件中结合compositionApi和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的几种方式的文章就介绍到这了,更多相关vue使用jsx 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 在 Vue 中使用 JSX 及使用它的原因浅析

    本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西. Vue.js 具有简单的 API 和几个选项,可用于在我们的组件中定义HTML模板. 我们可以使用 <template> 标签选项,在根组件实例上定义 template 属性,或者使用单文件组件. 上面的选项很棒并且可以完美地工作,但是,在您的应用程序的生命周期中,有时会

  • vue jsx 使用指南及vue.js 使用jsx语法的方法

    vue  jsx  语法与 react  jsx  还是有些不一样,在这里记录下. let component = null// if 语句 if (true) { component = ( <div></div> ); } else { component = ( <div></div> ); } var ul = ( <ul> {component} </ul> ); // map 语句 var coms = limit.map

  • vue组件jsx语法的具体使用

    如果使用render函数来写比较复杂的vue组件,对于可读性和可维护性都很不友好,而使用jsx就会让我们回到更接近于模板的语法.babel转译器会将jsx转译为render函数渲染. 配置 需要用到babel插件 安装 npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-env\ --save-dev .babelr

  • Vue 3.0中jsx语法的使用

    Vue 3.0 正式发布了,喜大普奔

  • 为什么推荐使用JSX开发Vue3

    在很长的一段时间中,Vue 官方都以简单上手作为其推广的重点.这确实给 Vue 带来了非常大的用户量,尤其是最追求需求开发效率, 往往不那么在意工程代码质量的国内中小企业中,Vue 占据的份额极速增长.但是作为开发者自身,我们必须要认清一个重点,简单易用重来不应该在技术选型中占据很大的份额,可维护性才是. 以防万一有的同学实在不看官方文档,我先提一嘴,SFC 就是写 Vue 组件的时候写的.vue文件,这一个文件就是一个 SFC,全称 Single File Component,也即单文件组件.

  • 详解在vue3中使用jsx的配置以及一些小问题

    详解在vue3中使用jsx的配置以及一些小问题

    目录 配置 模版语法 v-if/v-show 配置 在vue3中使用jsx十分方便,只需要安装官方的@vitejs/plugin-vue-jsx插件,在vite.config.ts中配置 // vite.config.ts import vueJsx from "@vitejs/plugin-vue-jsx"; export default { plugins: [vueJsx()] } 配置了vite.config.ts后虽然已经可以使用jsx,页面也正常渲染了,但是还是会提示无法使

  • 在vue中使用jsx语法的使用方法

    什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析. 我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因为近期在学习react,在里面体验了一把jsx语法,发现也并没有别人说的很难受的感觉啊,于是就想尝试在vue中也试下,废话不多说,先来用代码来看下两者的区别吧. ps:vue中大部分场景是不需要用render函数的,还是用模板更简洁直观

  • vue3+vite使用jsx和tsx详情

    目录 安装@vitejs/plugin-vue-jsx 配置vite.config.js 使用实战 第一种写法使用this 第二种写法 第三种写法 安装@vitejs/plugin-vue-jsx yarn add -D @vitejs/plugin-vue-jsx npm i -D @vitejs/plugin-vue-jsx 配置vite.config.js ... import vueJsx from '@vitejs/plugin-vue-jsx'; export default def

  • 详解如何使用webpack在vue项目中写jsx语法

    本文介绍了如何使用webpack在vue项目中写jsx语法,分享给大家,具体如下: 我们知道Vue 2.0中对虚拟DOM的支持.我们可以通过JavaScript动态的创建元素,而不用在template中写HTML代码.虚拟DOM最终将被渲染为真正的DOM. data: { msg: 'Hello world' }, render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] ); } 渲染后的内容为: <div id=

  • 如何在 Vue 中使用 JSX

    JSX 是什么 JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javascript 的灵活性,同时又兼具 html 的语义化和直观性 为什么要在 Vue 中使用 JSX 有时候,我们使用渲染函数(render function)来抽象组件,渲染函数不是很清楚的参见官方文档, 而渲染函数有时候写起来是非常痛苦的 createElement( 'anchored-h

  • vue中正确使用jsx语法的姿势分享

    目录 前言 虚拟DOM 什么是虚拟DOM 虚拟DOM的优点 渲染函数是什么 jsx 在vue3中编写jsx的两种方式 用法 最后 参考 前言 又到了愉快的摸鱼时间,我觉得不能荒废,H5页面我一直用的vant,出于对源码的好奇,我从git上拉了一份vant源码,里面竟然都是jsx写的组件,于是我开始了对在vue中使用jsx的探索 虚拟DOM 什么是虚拟DOM 在这之前,先了解下虚拟DOM,vue和react框架都在内部使用了虚拟DOM,这样做的原因是通过js操作DOM的计算成本很高,虽然js更新速

随机推荐