Vue 2x 中使用 render 和 jsx 的最佳实践 (1)
什么是JSX
最初,JSX是React
中所特有的,
它的长相是这样的
let jsx = <h1>hello world</h1>;
从表面上来看,这就是个普通的html
标签。但是注意看左边,我们将这个html标签赋值给了一个js变量!
嗯哼?
这就是JSX的功能了。
JSX的全称应该翻译为Javscript + xml
(Javscript中的xml),而没有翻译成Javascript
和xml
,这是因为比起xml/html
标签,这更像是在javascript中扩展了一个功能,它把xml当做变量的值赋给js变量,这是对javascript语法的延伸。
因为JSX的这个特性,所以他即具备了Javascript的灵活性,同时又兼具html的语义化和直观性。
另外如果只考虑JSX的长相,我们也常常把它称之为jsx tag
。
JSX的具体使用场景和其优势特点
为什么我们要抛弃Vue的优势和各种指令去使用JSX
我们会有一个思考:
函数组件,即简单的无状态组件,适合使用jsx
,vue
文件会很简洁。如果逻辑复杂了,使用vue
但不用template
,那就等于放弃了vue
的优势:丰富的模板指令。还不如直接用react
好的!
现在,让我们来看看Vue官方对渲染函数(Render
)& JSX
的介绍:
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。
让我们深入一个简单的例子,这个例子里 render
函数很实用。假设我们要生成一些带锚点的标题:
<h1>
<a name="hello-world" href="#hello-world">
Hello world!
</a>
</h1>
对于上面的 HTML,你决定这样定义组件接口:
<anchored-heading :level="1">Hello world!</anchored-heading>
当开始写一个只能通过 level
prop 动态生成标题 (heading) 的组件时,你可能很快想到这样实现:
<script type="text/x-template" id="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>
</script>
Vue.component('anchored-heading', {
template: '#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
}
})
这里用模板并不是最好的选择:不但代码冗长,而且在每一个级别的标题中重复书写了 <slot></slot>
,在要插入锚点元素时还要再次重复。
虽然模板在大多数组件中都非常好用,但是显然在这里它就不合适了。那么,我们来尝试使用 render
函数重写上面的例子:
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
props: {
level: {
type: Number,
required: true
}
}
})
看起来简单多了!这样代码精简很多,但是需要非常熟悉 Vue 的实例 property。在这个例子中,你需要知道,向组件中传递不带 v-slot
指令的子节点时,比如 anchored-heading
中的 Hello world!
,这些子节点被存储在组件实例中的 $slots.default
中。
相信我!认真读完官方对于
渲染函数 & JSX
这块的介绍文档,你不会再有这个像小朋友一样有那么多问号~
不可否认,
vue中大部分场景是不需要用render函数的,还是用模板更简洁直观.
相关文章
- Vue-Cli优化编译速度
- 在vue中使用ts
- 如何在vue中安装及使用layui框架[通俗易懂]
- Vue整合HighCharts和ECharts实现数据可视化
- 前端面试题 --- Vue部分
- vue双向绑定原理面试题_面试可以记笔记吗
- 什么是Vue全家桶,Vue全家桶包含哪些东西以及怎么使用
- vue与jquery混用_vue怎么使用jquery
- wangeditor富文本编辑器_vue使用富文本编辑器
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- Vue引入外部Js文件并使用方法超级无敌详细的教程「建议收藏」
- vue子组件怎么调用父组件的方法「建议收藏」
- 【Web技术】1445- 如何使用 Hooks 写出高质量的 React 和 Vue 组件?
- Vue.js 学习笔记 - 组件(Components)
- Vue.js官方的路由管理器 带你快速入门
- IntelliJ IDEA使用 vue-cli 创建Vue项目
- vue-router 的基本使用
- Vue 里的 computed 和 watch 的区别 ?
- 在使用vue的项目中对于性能优化的处理
- vue.js客服系统实时聊天项目开发(七)ES6模板字符串进行字符串变量内嵌拼接
- Vue使用ECharts做图表
- Vue模块化开发使用路由
- vue 模板中使用 console.log
- 用Vue从Redis中获取强有力的数据(vue用redis中数据)
- 使用Vue从Redis获取数据(vue去redis取数据)
- 使用Vue和Redis创建完美的后台应用(vue redis后台)