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

什么是JSX?

JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析.

我为什么要在vue中用JSX?

想折腾一下呗,开玩笑.最开始是因为近期在学习react,在里面体验了一把jsx语法,发现也并没有别人说的很难受的感觉啊,于是就想尝试在vue中也试下,废话不多说,先来用代码来看下两者的区别吧.

ps:vue中大部分场景是不需要用render函数的,还是用模板更简洁直观.

使用template

// item.vue
<template>
 <div>
  <h1 v-if="id===1">
   <slot></slot>
  </h1>
  <h2 v-if="id===2">
   <slot></slot>
  </h2>
  <h3 v-if="id===3">
   <slot></slot>
  </h3>
  <h4 v-if="id===4">
   <slot></slot>
  </h4>
 </div>
</template>

<script>
  export default {
    name: "item",
    props:{
     id:{
      type:Number,
      default:1
     }
    }
  }
</script>

item组件中就是接收父组件传过来的id值来显示不同的h标签,v-if可以说用到了"极致",而且写了很多个冗余的slot

使用render函数和jsx

// item.vue
<script>
  export default {
    name: "item",
    props:{
     id:{
      type:Number,
      default:1
     }
    },
   render(){
     const hText=`
            <h${this.id}>${this.$slots.default[0].text}</h${this.id}>
           `
    return <div domPropsInnerHTML={hText}></div>
   }
  }
</script>

再加上父组件来控制props的值。父组件不做对比还用传统的template格式,

// list.vue
<template>
 <div>
  <h-title :id="id">Hello World</h-title>
  <button @click="next">下一个</button>
 </div>
</template>

<script>
 import Title from './item'

 export default {
  name: "list",
  data() {
   return {
    id:1
   }
  },
  components: {
   "h-title":Title
  },
  methods:{
   next(){
    ++this.id
   }
  }
 }
</script>

运行后页面就渲染出了h1 or h2 or h3标签,同时slot也只有一个,点击切换props的值,也会显示不同的h标签。第二种写法虽然不是很直接,但是省去了很多冗余代码,页面一下清爽了很多。

没了v-if,v-for,v-model怎么办?

不要着急,这些指令只是黑魔法,用js很容易实现。

v-if

 render(){
    return (
     <div>
      {this.show?'你帅':'你丑'}
     </div>
    )
   }

写三元表达式只能写简单的,那么复杂的还得用if/else

  render(){
    let ifText
    if(this.show){
      ifText=<p>你帅</p>
    }else{
      ifText=<p>你丑</p>
    }
    return (
     <div>
      {ifText}
     </div>
    )
   }

v-for

   data(){
    return{
     show:false,
     list:[1,2,3,4]
    }
   },
   render(){
    return (
     <div>
      {this.list.map((v)=>{
       return <p>{v}</p>
      })}
     </div>
    )
   }

在jsx中{}中间是没办法写if/for语句的只能写表达式,所以就用map来当循环,用三元表达式来当判断了

v-model

最近在帮公司面试招人发现v-model很多人都不知道语法糖是什么?然后有些人说我可以用原生js实现,但是他们竟然不知道在vue中怎么实现,好吧,两个点:传值和监听事件改变值。

  <script>
  export default {
    name: "item",
   data(){
    return{
     show:false,
     list:[1,2,3,4],
     text:'',
    }
   },
   methods:{
    input(e){
     this.text=e.target.value
    }
   },
   render(){
    return (
     <div>
      <input type="text" value={this.text} onInput={this.input}/>
      <p>{this.text}</p>
     </div>
    )
   }
  }
</script>

怎么用自定义组件?

很简单,只需要导入进来,不用再在components属性声明了,直接写在jsx中比如

<script>
 import HelloWolrd from './HelloWorld'
  export default {
   name: "item",
   render(){
    return (
      <HelloWolrd/>
    )
   }
  }
</script>

事件,class,style,ref等等怎么绑定?

来看下面的写法

render (h) {
 return (
  <div
   // normal attributes or component props.
   id="foo"
   // DOM properties are prefixed with `domProps`
   domPropsInnerHTML="bar"
   // event listeners are prefixed with `on` or `nativeOn`
   onClick={this.clickHandler}
   nativeOnClick={this.nativeClickHandler}
   // other special top-level properties
   class={{ foo: true, bar: false }}
   style={{ color: 'red', fontSize: '14px' }}
   key="key"
   ref="ref"
   // assign the `ref` is used on elements/components with v-for
   refInFor
   slot="slot">
  </div>
 )
}

上面有个地方需要注意,当给自定义组件绑定事件时用nativeOnClick,而模板格式是用
@click.native,另外当用到给函数式组件绑定事件时就有点小坑了下面说。

JSX中的函数式组件

函数式组件无状态,无this实例,下面是vue文档中提到的一段话:

因为函数式组件只是一个函数,所以渲染开销也低很多。然而,对持久化实例的缺乏也意味着函数式组件不会出现在 Vue devtools 的组件树里。

我个人理解因为没了状态(data),少了很多响应式的处理,还有生命周期等过程会提高速度和减少内存占用吧?
函数式组件也可以在模板格式中用只需要这样

<template functional>

</template>

那jsx中的函数式组件呢?也很简单只需增加配置functional: true就可以了

那函数式组件没有了this 实例怎么绑定事件怎么获取props呢?

组件需要的一切都是通过上下文传递,包括:

  • props : 提供所有 prop 的对象
  • children: VNode 子节点的数组
  • slots: 返回所有插槽的对象的函数
  • data:传递给组件的数据对象,并将这个组件作为第二个参数传入 createElement

上面我只列举了部分属性,这些是非函数式组件的东西,对于函数式组件
vue 增加了context对象,需要作为render(h,context) 第二个参数传入,this.$slots.default更新为context.children props原本是直接挂在this上的,现在变为context.props挂在了context.props上。this.data变为了context.data

需要注意的是对于函数式组件,没有被定义为prop的特性不会自动添加到组件的根元素上,意思就是需要我们手动添加到组件根元素了,看个例子吧

//父组件
 ...省略无关代码
 render(){
   return (
    <Item data={this.data} class="large"/>
   )
  }
//Item.vue组件
export default {
  functional:true,
   name: "item",
   render(h,context){
    return (
     <div class="red" >
      {context.props.data}
     </div>
    )
   }
  }

上面代码期待的是.large类名传入到了Item的根元素上,但是其实没有。我们需要增加点东西

// Item.vue
export default {
  functional:true,
   name: "item",
   render(h,context){
    return (
     <div class="red" {...context.data}>
      {context.props.data}
     </div>
    )
   }
  }

注意到,通过展开运算符把所有的属性添加到了根元素上,这个context.data就是你在父组件给子组件增加的属性,他会跟你在子元素根元素的属性智能合并,现在.large类名就传进来了。这个很有用,当你在父组件给子组件绑定事件时就需要这个了。下面说一个关于绑定事件的小坑

向 createElement 通过传入 context.data 作为第二个参数,我们就把 my-functional-button 上面所有的特性和事件监听器都传递下去了。事实上这是非常透明的,那些事件甚至并不要求 .native 修饰符

上面是vue官网的一段话,然而我看了一遍就忽略了一句很重要的话,就是最后一句,他说不需要.native修饰符了?好先看代码

// 父组件
 methods:{
   show(){
    alert('你好')
   }
  },
  render(){
   return (
    <Item data={this.data} onNativeClick={this.show} class="large"/>
   )
  }

上面代码乍一看没毛病,自定义组件用onNativeClick嘛,结果就是不会弹窗。唉,最后读了几遍刚才vue文档中的解释,才发现原来函数式组件不需要.native修饰符,对于template格式肯定一下就反应过来了,但是jsx的话,好吧,把上面的onNativeClick重新改为onClick就好了。

现有项目哪些功能可以用jsx代替呢?

这个其实跟最开始我例举的例子很像。我在项目中用它来干掉了满屏的v-if/v-else

由于我的业务是pad上的,需求是一套试卷有几十道题目,要求一屏只显示一道题目,点击下一题显示下一个题,思路也比较简单:

  1. 用一个num变量表示当前正在展示的题目索引
  2. 每次点击下一题按钮时num++
  3. 用v-if来判断 num===1,num===2这样来决定展示哪个。

这一写,模板里面好多啊,由于我们的题目每道题的模板可能都不一样,所以没办法循环,只能手写全部。之前考虑过用动态组件来切换,但是放弃了,因为没有if直观啊。

下面看怎么用jsx优化一下

//父组件
 export default {
  name: "list",
  data() {
   return {
    data:'我是函数式组件',
    id:1,
     tests:{
     1:<div><span>第一道题</span></div>,
     2:<div><section>第二道题</section></div>,
     3:<div><p>第三道题</p></div>
    }
   }
  },
  methods:{
   next(){
    ++this.id
   }
  },
  render(){
   return (
    <div>
     <Item data={this.tests[this.id]} class="large"/>
     <button onClick={this.next}>下一题</button>
    </div>
   )
  }
 }

上面每道题目的结构都不一致

 //子组件,只接受数据展示,用函数式组件
<script>
 export default {
 functional:true,
  name: "item",
  render(h,context){
   return (
    <div class="red" {...context.data}>
     {context.props.data}
    </div>
   )
  }
 }
</script>

上面没有用任何if/else判断就完成了功能,这里用jsx我觉得比较合适,不知道各位大佬有什么其他思路?

最后

总结一下吧,我们平时开发还是多用temlate因为直观简洁,各种指令用着很方便,等你觉得用template写出的代码看着很冗余,或者想自己控制渲染逻辑比如循环,判断等等时可以考虑用JSX。另外推荐大家多用函数式组件提高性能。

第一次写文章,希望各位花时间看了的大佬觉得哪个说的不太严谨还需多多包涵,提出意见我都接受。

参考资料

vue 渲染函数&jsx
babel-plugin-transform-vue-jsx

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 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

  • 详解如何使用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语法

    通常开发vue我们使用的是模板语法,其实还有和react相同的语法,那就是render函数,同样支持jsx语法. Vue 的模板实际是编译成了 render 函数. 1.传统的createElement方法 createElement( 'anchored-heading', { props: { level: 1 } }, [ createElement('span', 'Hello'), ' world!' ] ) 渲染成下面这样 <anchored-heading :level="1

  • 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语法的使用方法

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

  • 如何在vue中使用jsx语法

    目录 为什么需要在vue中使用jsx 在vue中如何使用jsx template转jsx的语法转换 为什么需要在vue中使用jsx 几年前面试的时候,被问过这个问题,当时我一脸懵,这两个东西为啥要混用呢? 直到后来,我遇到了这种场景. tab切换展示组件,大部分组件展示表格,除了2个tab需要展示不同,这个不同,怎么处理呢? 当然可以直接改封装的tab组件,v-if条件渲染嘛 那如果后面再有其他需求,tab组件继续写if么 这个时候,组件就过于冗余啦 那怎么让组件统一处理呢?当然可以用rende

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

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

  • 如何在 Vue 中使用 JSX

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

  • 在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

  • vue 中Virtual Dom被创建的方法

    本文将通过解读render函数的源码,来分析vue中的vNode是如何创建的.在vue2.x的版本中,无论是直接书写render函数,还是使用template或el属性,或是使用.vue单文件的形式,最终都需要编译成render函数进行vnode的创建,最终再渲染成真实的DOM. 如果对vue源码的目录还不是很了解,推荐先阅读下 深入vue -- 源码目录和编译过程. 01  render函数 render方法定义在文件 src/core/instance/render.js 中 Vue.pro

  • vue 中动态绑定class 和 style的方法代码详解

    先列举一些例子 class="['content',{'radioModel':checkType}]" class="['siteAppListDirNode',{open:appitem.open==true}]" class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" class="{shortcutMenuShow:!showHideNav,

随机推荐