脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue中使用jsx

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

 更新时间：2021年07月15日 10:30:34   作者：啥都不会的小前端  
这篇文章主要给大家介绍了关于vue中正确使用jsx的相关资料,JSX就是Javascript和XML结合的一种格式,React发明了JSX,利用HTML语法来创建虚拟DOM,当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析,需要的朋友可以参考下

前言

又到了愉快的摸鱼时间,我觉得不能荒废,H5页面我一直用的vant,出于对源码的好奇,我从git上拉了一份vant源码,里面竟然都是jsx写的组件,于是我开始了对在vue中使用jsx的探索

虚拟DOM

什么是虚拟DOM

在这之前，先了解下虚拟DOM，vue和react框架都在内部使用了虚拟DOM，这样做的原因是通过js操作DOM的计算成本很高，虽然js更新速度很快，但是查找dom并更新的成本很高。那么有什么方法可以优化呢，vue等框架使用js对象，通过改变js对象，最后进行批量处理，一次更新DOM，所以虚拟DOM本质上就是一个js对象

虚拟DOM的优点

  • 从原先的操作真实DOM到操作虚拟DOM，降低查找成本
  • 通过diff比对，我们可以更快的定位数据的变化，从而更新DOM
  • 更好的ui更新
  • 抽象渲染过程，带来了实现跨平台的能力，如vue3中的createRenderer API

渲染函数是什么

渲染函数是用来生成虚拟DOM的。我们在vue单文件中编写模板语法，最终会在底层实现中被编译成渲染函数

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

当出现以下场景，虽然下列写法也能实现想要的效果，但是他不仅冗长，而且我们为每个级别标题重复书写了 。当我们添加锚元素时，我们必须在每个 v-if/v-else-if 分支中再次重复它

const { createApp } = Vue

const app = createApp({})

app.component('anchored-heading', {
  template: `
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-else-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-else-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-else-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-else-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-else-if="level === 6">
      <slot></slot>
    </h6>
  `,
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

虽然模板在大多数组件中都非常好用，但是显然在这里它就不合适了。那么，我们来尝试使用 render 函数重写上面的例子：

const { createApp, h } = Vue

const app = createApp({})

app.component('anchored-heading', {
  render() {
    return h(
      'h' + this.level, // tag name
      {}, // props/attributes
      this.$slots.default() // array of children
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

jsx

这样写渲染函数有点痛苦，有没有更接近模板的写法呢，vue提供了一个babel-plugin-jsx babel插件来让vue支持jsx写法

我这边使用的vuecli创建的vue3 + ts项目，脚手架已经集成了jsx和ts的相关依赖

在vue3中编写jsx的两种方式

直接将文件后缀名从vue改成tsx或者jsx

在vue3中，可以直接使用render选项编写

import { defineComponent } from "vue";
export default defineComponent({
  name: "Jsx",
  render() {
    return <div>我是一个div</div>;
  },
});

也可以在setup中返回

import { defineComponent } from "vue";
export default defineComponent({
  name: "Jsx",
  setup() {
    return () => <div>我是div</div>;
  },
});

两种方式都可以，具体看个人习惯，setup中访问不到this，但是render中可以通过this访问当前vue实例

用法

class绑定，和react的jsx绑定的有区别，react中使用className，vue中使用class

 setup() {
   return () => <div class="test">我是div</div>;
 },

style绑定

  setup() {
    return () => <div style={{ color: "red" }}>我是div</div>;
  },

props绑定

// 父组件
setup() {
    return () => (
      <div style={{ color: "red" }}>
        <span>我是父组件</span>
        <Mycom msg={"我是父组件传的值"} />
      </div>
 );

// 子组件，setup的第一个参数，可以获取props里的值
  setup(props) {
    return () => <div>我是子组件{props.msg}</div>;
  },

事件绑定

setup() {
    function eventClick() {
      console.log("点击");
    }
    return () => <button onClick={eventClick}>按钮</button>;
},

组件自定义事件

// 子组件
import { defineComponent } from "vue";
export default defineComponent({
  name: "Mycom",
  emits: ["event"],
  setup(props, { emit }) {
    function sendData() {
      emit("event", "子组件传递的数据");
    }
    return () => (
      <div>
        <span>自定义事件</span>
        <button onClick={sendData}>传递数据</button>
      </div>
    );
  },
});

// 父组件
// @ts-nocheck
// 这样写在jsx中没问题，但是在tsx中会报ts类型错误，所以我在上面忽略了当前文件ts监测@ts-nocheck
import { defineComponent } from "vue";
import Mycom from "./mycom";
export default defineComponent({
  name: "Jsx",
  setup() {
    function getSon(msg: string) {
      console.log(msg);
    }
    return () => (
      <div>
        <Mycom onEvent={getSon} />
      </div>
    );
  },
});

也可以这样解决ts类型报错

  setup() {
    function getSon(msg: string) {
      console.log(msg);
    }
    return () => (
      <div>
        <Mycom {...{ onEvent: getSon }} />
      </div>
    );
  },

插槽

// 父组件
setup() {
    const slots = {
      test: () => <div>具名插槽</div>,
      default: () => <div>默认插槽</div>,
    };
    return () => (
      <div>
        <Mycom v-slots={slots}></Mycom>
      </div>
    );
},

setup(props, { slots }) {
// 子组件
    return () => (
      <div>
        <span>插槽</span>
        {slots.default?.()}
        {slots.test?.()}
      </div>
    );
  },

指令，v-if，v-for等指令在jsx中无法使用，jsx只支持v-model和v-show指令

  setup() {
    const inputData = ref("");
    return () => (
      <div>
        <span v-show={true}>显示</span>
        <span v-show={false}>隐藏</span>
        <input type="text" v-model={inputData.value} />
        <span>{inputData.value}</span>
      </div>
    );
},

最后

话不多说，我先打开vant源码,准备开启我的第一个组件源码阅读 src =>button=>button.tsx

到此这篇关于vue中正确使用jsx的文章就介绍到这了,更多相关vue中使用jsx内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

参考

您可能感兴趣的文章:

相关文章

  • 讲解vue-router之什么是编程式路由

    讲解vue-router之什么是编程式路由

    编程式路由在我们的项目使用过程中最常用的的方法了。这篇文章主要介绍了讲解vue-router之什么是编程式路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue+element-plus上传图片及回显问题及数量限制

    vue+element-plus上传图片及回显问题及数量限制

    本文主要介绍了vue+element-plus上传图片及回显问题及数量限制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue之使用echarts图表setOption多次很卡问题及解决

    vue之使用echarts图表setOption多次很卡问题及解决

    这篇文章主要介绍了vue之使用echarts图表setOption多次很卡问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-07-07
  • Vue3通过hooks方式封装节流和防抖的代码详解

    Vue3通过hooks方式封装节流和防抖的代码详解

    vue3 中的 hooks 就是函数的一种写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中,或者说是一些可以复用的公共方法/功能,本文给大家介绍了Vue3通过hooks方式封装节流和防抖,需要的朋友可以参考下
    2024-10-10
  • cdn模式下vue的基本用法详解

    cdn模式下vue的基本用法详解

    这篇文章主要介绍了cdn模式下vue的基本用法，本文通过图文并茂的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-10-10
  • vue项目设置scrollTop不起作用(总结)

    vue项目设置scrollTop不起作用(总结)

    这篇文章主要介绍了vue项目设置scrollTop不起作用(总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue调用高德地图实例代码

    vue调用高德地图实例代码

    本篇文章主要介绍了vue调用高德地图实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 详解基于vue-cli3快速发布一个fullpage组件

    详解基于vue-cli3快速发布一个fullpage组件

    这篇文章主要介绍了详解基于vue-cli3快速发布一个fullpage组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • ant-design-vue导航菜单a-menu的使用解读

    ant-design-vue导航菜单a-menu的使用解读

    这篇文章主要介绍了ant-design-vue导航菜单a-menu的使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • 解决vue单页面应用进入页面加载所有 js 的问题

    解决vue单页面应用进入页面加载所有 js 的问题

    这篇文章主要介绍了解决vue单页面应用进入页面加载所有 js 的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论