资讯专栏INFORMATION COLUMN

在vue中使用JSX语法

quietin / 546人阅读

摘要:发明了,利用语法来创建虚拟。然而,对持久化实例的缺乏也意味着函数式组件不会出现在的组件树里。这个很有用,当你在父组件给子组件绑定事件时就需要这个了。之前考虑过用动态组件来切换,但是放弃了,因为没有直观啊。另外推荐大家多用函数式组件提高性能。

什么是JSX?

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

我为什么要在vue中用JSX?

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

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


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

## 使用render函数和jsx

// item.vue

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

// list.vue


运行后页面就渲染出了h1 or h2 or h3标签,同时slot也只有一个,点击切换props的值,也会显示不同的h标签。第二种写法虽然不是很直接,但是省去了很多冗余代码,页面一下清爽了很多。
## 没了v-if,v-for,v-model怎么办?
不要着急,这些指令只是黑魔法,用js很容易实现。

v-if

  render(){
       return (
         
{this.show?"你帅":"你丑"}
) }

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

   render(){
        let ifText
        if(this.show){
            ifText=

你帅

}else{ ifText=

你丑

} return (
{ifText}
) }

v-for

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

{v}

})}
) }

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

v-model

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

    
怎么用自定义组件?

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

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

来看下面的写法

render (h) {
  return (
    
) }

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

JSX中的函数式组件

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

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

我个人理解因为没了状态(data),少了很多响应式的处理,还有生命周期等过程会提高速度和减少内存占用吧?

函数式组件也可以在模板格式中用只需要这样