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. // 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 的组件树里。