1. 前言
1.1 HTML DOM树与和Vue的virtual DOM
- 我们知道，浏览器在解析HTML文件时，会将HTML标签解析成一个DOM树（
tree of DOM nodes） 。通过结构化的组织节点元素，浏览器可以很方便的跟踪整个页面的情况，但频繁的局部更新节点代价很高。 - 为了更高效的渲染HTML，
Vue.js和React以及Ember.js一样，根据真实DOM的映射构建对应的JS对象，也就是虚拟DOM（Virtual DOM）。在数据和DOM之间创建一个缓冲地带，不用每次都更新DOM，详情见下面React Virtual DOM的示意图：
React Virtual DOM示意图
1.2 Vue组件中的Slot
-
Vue.js的Slot机制是指，父组件在嵌套使用子组件时，可以传递HTML代码片段给子组件渲染，但完全不用关心这段HTML应该放在子组件什么位置。 - 是不是很懵逼，没看懂？举个例子吧：
<!-- 【需求】
封装一个文章标题组件，但是要根据情况给组件传递"分享到站外"的html代码片段
因为在调用组件的时候，才能根据当前用户角色确定是分享到微信还是微博的按钮 -->
<!-- 组件<article>期望的最终渲染的代码是这样的 -->
<div>
<h1>
vue.js Render()函数&JSX
</h1>
<!-- 这里是可能传递的代码片段1 -->
<span><Button>分享到新浪微博</Button></span>
<!-- 这里是可能传递的代码片段2 -->
<span><Button>分享到微信</Button></span>
</div>
- 我们开始用
Vvue.jsSlot机制来实现
- 定义
article.vue组件
<tempalte>
<div>
<h1>
{{title}}
</h1>
<!-- 子组件只关心slot摆放的位置，而不关心传进来的是什么 -->
<slot></slot>
</div>
</tempalte>
<script>
export default{
name : 'Article',
props : ['title']
}
</script>
-
main.vue使用标题组件
<template>
<div>
<article :title="titleStr">
<span>
<Button v-if="userType === 'weibo'">分享到新浪微博</Button>
<Button v-if="userType === 'weixin'">分享到微信</Button>
</span>
</article>
</div>
</template>
<script>
export default{
name : 'Main',
data() {
return: {
userType: 'weibo',
titleStr: 'vue.js Render()函数&JSX'
}
}
}
</script>
- 再说
slot，顾名思义，Vue.js通过给程序设置一个类似插槽/投币口的机制，实现内容分发：
- 子组件定义好插槽位置；
- 父组件可以插入任何，符合Slot规范的代码片段；
- 如此一来，既实现了程序的解耦，使用又很方便。
- 当然啦，
Vue.js还支持具名插槽，也就是通过定义key名来区分不同的slot代码片段，这里就不展开讨论了。
2. render()函数
2.1 为什么要使用render()函数
- 使用过
Vue.js的朋友都知道，好像大部分时间都在使用template的方式来创建HTML，因为vue提供了v-if、v-for等一系列的控制指令，让我们开发体验轻松又愉悦。 - 但除此之外，其实
Vue.js还提供了render()函数来创建HTML。让我们可以通过JS逻辑代码，更灵活的创建HTML。 - 如同vue官网的例子所说：在封装文章标题的<Title>组件时，不确定最终生成的，具体是h1~h6的标签。这个时候，如果用
v-if做判断，那么代码量太大，但用render()函数来实现就很简单。
<!-- 用template实现 -->
<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
}
}
})
<!-- 用render()函数实现 -->
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 由子节点构成的数组
)
},
props: {
level: {
type: Number,
required: true
}
}
})
2.2 render()函数的传参
render(crateElmentFn,context){}
-
createElemntFn是Vue用来动态创建HTML的核心方法【注意：把createElement函数命名为h是vue.js的通用惯例，记得两者是同一个东西】 -
context是组件实例的上下文环境，包括了组件实例的所有属性- props: 提供props 的对象
- children: VNode 子节点的数组
- slots: slots 对象
- data: 传递给组件的 data 对象
- parent: 对父组件的引用
3. createElement()函数
3.1 createElement() 传参
createElemnt(newNode,newNodeConfig,childVNodeList)
-
createElemnt()函数主要有三个参数：-
newNode：要创建的节点【必填参数】- 参数类型： {String | Object | Function}，可以是要创建的HTML 标签名称，也可以是组件对象，也可以是返回为String或Vue Object的异步函数
-
newNodeConfig：新节点的配置对象【选填】 -
childVNodeList：新节点要包含的子节点集合【选填】- 参数类型： {String | Array}
- 注意事项：vue官方教程标明传递的VNodes必须是唯一的，如果想重复创建相同的HTML元素，需要用工厂函数来实现
-
- 调用示例：
// @returns {VNode}
createElement(
'div',
{},
[
'Some text comes first.',
createElement('h1', 'A headline'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
3.2 newNodeConfig参数详解
{
// 和 `v-bind:class` 的 API 相同【注意：由于是关键字，要用单引号包含】
'class': {
foo: true,
bar: false
},
// 和 `v-bind:style` 的 API 相同【注意：由于是关键字，要用单引号包含】
'style': {
color: 'red',
fontSize: '14px'
},
// 普通的 HTML 属性
attrs: {
id: 'foo'
},
// 组件 props
props: {
myProp: 'bar'
},
// DOM 属性
domProps: {
innerHTML: 'baz'
},
// 事件处理程序嵌套在 `on` 字段下，
// 然而不支持在 `v-on:keyup.enter` 中的修饰符。
// 因此，你必须手动检查
// 处理函数中的 keyCode 值是否为 enter 键值。
on: {
click: this.clickHandler
},
// 仅对于组件，
// 用于监听原生事件，而不是组件内部
// 使用 `vm.$emit` 触发的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定义指令。
// 注意，由于 Vue 会追踪旧值，
// 所以不能对`绑定`的`旧值`设值
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// 作用域插槽(scoped slot)的格式如下
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果此组件是另一个组件的子组件，
// 需要为插槽(slot)指定名称
slot: 'name-of-slot',
// 其他特殊顶层(top-level)属性
key: 'myKey',
ref: 'myRef'
}
3.3 使用createElement()替代template创建HTML
3.3.1 条件判断和循环渲染
template代码：
<ul v-if="items.length">
<li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>
render代码：
props: ['items'],
render: function (createElement) {
// 使用原生JS代码来做条件判断
if (this.items.length) {
// 使用map()来循环调用createElement()函数
return createElement('ul', this.items.map(function (item) {
return createElement('li', item.name)
}))
} else {
return createElement('p', 'No items found.')
}
}
3.3.2 数据绑定
render代码：
props: ['value'],
render: function (createElement) {
// 【注意：由于JS可以用function作为函数的参数传递，为了避免this指针的混乱，在render函数里，要记得对this指针进行缓存】
var self = this
return createElement('input', {
// 手动vue emit事件的触发，来手动控制value值的维护，这是深入底层实现需要付出的代价
domProps: {
value: self.value
},
on: {
input: function (event) {
self.$emit('input', event.target.value)
}
}
})
}
3.3.3 事件绑定
- Vue.js在
createElemnt()函数中，映射了一系列事件指令修饰符的前缀：
| 修饰符 | 前缀 |
|---|---|
.passive |
& |
.capture |
! |
.once |
~ |
.capture.once 或 .once.capture
|
~! |
- 示例：
createElement('input',{
on: {
'!click': this.doThisInCapturingMode,
'~keyup': this.doThisOnce,
'~!mouseover': this.doThisOnceInCapturingMode
}
})
3.3.4 slot传递
- 如果像前文所述的，父组件在调用子组件的时候，想传递Slot，可以通过
this.$slots对象来访问
render: function (createElement) {
// 默认传递所有Slot
// 等同于：<div><slot></slot></div>
return createElement('div', this.$slots.default)
}
- 如果在传递Slot时要传参，则可通过
this.$scopedSlots
props: ['message'],
render: function (createElement) {
// 等同于`<div><slot :text="message"></slot></div>`
return createElement('div', [
this.$scopedSlots.default({
text: this.message
})
])
}
4. JSX
- 虽然
render()函数创建HTML代码片段很灵活，但整段整段的JS配置代码，的确阅读性很差。为了让代码更简单，我们可以使用JSX，直接在JS代码中书写HTML：
render: function (h) {
return (
<AnchoredHeading level={1}>
<span>Hello</span> world!
</AnchoredHeading>
)
}
- 但为了支持JSX，需要通过一个JSX的Babel的插件。配置示例代码如下：
package.json
devDependencies: {
"babel-helper-vue-jsx-merge-props": "2.0.3",
"babel-plugin-syntax-jsx": "6.18.0",
"babel-plugin-transform-vue-jsx": "3.7.0"
}
.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
