Vue渲染函数详解


Posted in Javascript onSeptember 15, 2017

前面的话

Vue 推荐在绝大多数情况下使用 template 来创建HTML。然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器。本文将详细介绍Vue渲染函数

引入

下面是一个例子,如果要实现类似下面的效果。其中,H标签可替换

<h1>
 <a name="hello-world" href="#hello-world" rel="external nofollow" rel="external nofollow" >
 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>

JS代码如下

Vue.component('anchored-heading', {
 template: '#anchored-heading-template',
 props: {
 level: {
  type: Number,
  required: true
 }
 }
})

在这种场景中使用 template 并不是最好的选择:首先代码冗长,为了在不同级别的标题中插入锚点元素,需要重复地使用 <slot></slot>

虽然模板在大多数组件中都非常好用,但是在这里它就不是很简洁的了。那么,来尝试使用 render 函数重写上面的例子:

<div id="example">
 <anchored-heading :level="2"><a name="hello-world" href="#hello-world" rel="external nofollow" rel="external nofollow" >Hello world!</a></anchored-heading>
</div>
<script src="vue.js"></script>
<script>
Vue.component('anchored-heading', {
 render: function (createElement) {
 return createElement(
  'h' + this.level, // tag name 标签名称
  this.$slots.default // 子组件中的阵列
 )
 },
 props: {
 level: {
  type: Number,
  required: true
 }
 }
}) 
new Vue({
 el: '#example'
})
</script>

这样的代码精简很多,但是需要非常熟悉 Vue 的实例属性。在这个例子中,需要知道当不使用 slot 属性向组件中传递内容时,比如 anchored-heading 中的 Hello world!,这些子元素被存储在组件实例中的 $slots.default中

虚拟DOM

在深入渲染函数之前,了解一些浏览器的工作原理是很重要的。以下面这段 HTML 为例:

<div>
 <h1>My title</h1>
 Some text content
 <!-- TODO: Add tagline -->
</div>

当浏览器读到这些代码时,它会建立一个“DOM 节点”树来保持追踪,如同会画一张家谱树来追踪家庭成员的发展一样。HTML 的 DOM 节点树如下图所示:

Vue渲染函数详解

每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样,每个节点都可以有子节点 (也就是说每个部分可以包含其它的一些部分)

高效的更新所有这些节点会是比较困难的,不过所幸不必再手动完成这个工作了。只需要告诉 Vue 希望页面上的 HTML 是什么,这可以是在一个模板里:

<h1>{{ blogTitle }}</h1>

或者一个渲染函数里:

render: function (createElement) {
 return createElement('h1', this.blogTitle)
}

在这两种情况下,Vue 都会自动保持页面的更新,即便 blogTitle 发生了改变。

【虚拟DOM】

Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪

return createElement('h1', this.blogTitle)
createElement 到底会返回什么呢?其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription,因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点,及其子节点。我们把这样的节点描述为“虚拟节点 (Virtual DOM)”,也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼

createElement

接下来需要熟悉的是如何在 createElement 函数中生成模板。这里是 createElement 接受的参数:

// @returns {VNode}
createElement(
 // {String | Object | Function}
 // 一个 HTML 标签字符串,组件选项对象,或者一个返回值类型为 String/Object 的函数,必要参数
 'div',
 // {Object}
 // 一个包含模板相关属性的数据对象
 // 这样,可以在 template 中使用这些属性。可选参数。
 {
 },
 // {String | Array}
 // 子节点 (VNodes),由 `createElement()` 构建而成,
 // 或简单的使用字符串来生成“文本节点”。可选参数。
 [
 '先写一些文字',
 createElement('h1', '一则头条'),
 createElement(MyComponent, {
  props: {
  someProp: 'foobar'
  }
 })
 ]
)

【深入data对象】

正如在模板语法中,v-bind:class 和 v-bind:style ,会被特别对待一样,在 VNode 数据对象中,下列属性名是级别最高的字段。该对象也允许绑定普通的 HTML 特性,就像 DOM 属性一样,比如 innerHTML (这会取代 v-html 指令)

{
 // 和`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。
 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 slots in the form of
 // { name: props => VNode | Array<VNode> }
 scopedSlots: {
 default: props => createElement('span', props.text)
 },
 // 如果组件是其他组件的子组件,需为插槽指定名称
 slot: 'name-of-slot',
 // 其他特殊顶层属性
 key: 'myKey',
 ref: 'myRef'
}

【完整示例】

有了这些知识,现在可以完成最开始想实现的组件:

var getChildrenTextContent = function (children) {
 return children.map(function (node) {
 return node.children
  ? getChildrenTextContent(node.children)
  : node.text
 }).join('')
}
Vue.component('anchored-heading', {
 render: function (createElement) {
 // create kebabCase id
 var headingId = getChildrenTextContent(this.$slots.default)
  .toLowerCase()
  .replace(/\W+/g, '-')
  .replace(/(^\-|\-$)/g, '')
 return createElement(
  'h' + this.level,
  [
  createElement('a', {
   attrs: {
   name: headingId,
   href: '#' + headingId
   }
  }, this.$slots.default)
  ]
 )
 },
 props: {
 level: {
  type: Number,
  required: true
 }
 }
})

【约束】

组件树中的所有 VNodes 必须是唯一的。这意味着,下面的 render function 是无效的:

render: function (createElement) {
 var myParagraphVNode = createElement('p', 'hi')
 return createElement('div', [
 // 错误-重复的 VNodes
 myParagraphVNode, myParagraphVNode
 ])
}

如果真的需要重复很多次的元素/组件,可以使用工厂函数来实现。例如,下面这个例子 render 函数完美有效地渲染了 20 个重复的段落:

render: function (createElement) {
 return createElement('div',
 Array.apply(null, { length: 20 }).map(function () {
  return createElement('p', 'hi')
 })
 )
}

JS代替模板

【v-if和v-for】

由于使用原生的 JavaScript 来实现某些东西很简单,Vue 的 render 函数没有提供专用的 API。比如,template 中的 v-if 和 v-for:

<ul v-if="items.length">
 <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

这些都会在 render 函数中被 JavaScript 的 if/else 和 map 重写:

render: function (createElement) {
 if (this.items.length) {
 return createElement('ul', this.items.map(function (item) {
  return createElement('li', item.name)
 }))
 } else {
 return createElement('p', 'No items found.')
 }
}

【v-model】

ender 函数中没有与 v-model 相应的 api,必须自己来实现相应的逻辑:

render: function (createElement) {
 var self = this
 return createElement('input', {
 domProps: {
  value: self.value
 },
 on: {
  input: function (event) {
  self.value = event.target.value
  self.$emit('input', event.target.value)
  }
 }
 })
}

这就是深入底层要付出的,尽管麻烦了一些,但相对于 v-model 来说,可以更灵活地控制

【事件&按键修饰符】

对于 .passive、.capture 和 .once事件修饰符,Vue 提供了相应的前缀可以用于 on:

Modifier(s)  Prefix
.passive  &
.capture  
!
.once  

~
.capture.once   or
.once.capture ~!

下面是一个例子

on: {
 '!click': this.doThisInCapturingMode,
 '~keyup': this.doThisOnce,
 `~!mouseover`: this.doThisOnceInCapturingMode
}

对于其他的修饰符,前缀不是很重要,因为可以直接在事件处理函数中使用事件方法:

Modifier(s)  Equivalent in Handler
.stop  event.stopPropagation()
.prevent  event.preventDefault()
.self  if (event.target !== event.currentTarget) return
Keys:
.enter, .13  if (event.keyCode !== 13) return (...)
Modifiers Keys:
.ctrl, .alt, .shift, .meta  if (!event.ctrlKey) return (...)

下面是一个使用所有修饰符的例子:

on: {
 keyup: function (event) {
 // 如果触发事件的元素不是事件绑定的元素
 // 则返回
 if (event.target !== event.currentTarget) return
 // 如果按下去的不是 enter 键或者
 // 没有同时按下 shift 键
 // 则返回
 if (!event.shiftKey || event.keyCode !== 13) return
 // 阻止 事件冒泡
 event.stopPropagation()
 // 阻止该元素默认的 keyup 事件
 event.preventDefault()
 // ...
 }
}

【插槽】

可以从 this.$slots 获取 VNodes 列表中的静态内容:

render: function (createElement) {
 // `<div><slot></slot></div>`
 return createElement('div', this.$slots.default)
}

还可以从 this.$scopedSlots 中获得能用作函数的作用域插槽,这个函数返回 VNodes:

render: function (createElement) {
 // `<div><slot :text="msg"></slot></div>`
 return createElement('div', [
 this.$scopedSlots.default({
  text: this.msg
 })
 ])
}

如果要用渲染函数向子组件中传递作用域插槽,可以利用 VNode 数据中的 scopedSlots 域:

render (createElement) {
 return createElement('div', [
 createElement('child', {
  // pass `scopedSlots` in the data object
  // in the form of { name: props => VNode | Array<VNode> }
  scopedSlots: {
  default: function (props) {
   return createElement('span', props.text)
  }
  }
 })
 ])
}

JSX

如果写了很多 render 函数,可能会觉得痛苦

createElement(
 'anchored-heading', {
 props: {
  level: 1
 }
 }, [
 createElement('span', 'Hello'),
 ' world!'
 ]
)

特别是模板如此简单的情况下:

<anchored-heading :level="1">
 <span>Hello</span> world!
</anchored-heading>

这就是为什么会有一个 Babel 插件,用于在 Vue 中使用 JSX 语法的原因,它可以让我们回到更接近于模板的语法上

import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
 el: '#demo',
 render (h) {
 return (
  <AnchoredHeading level={1}>
  <span>Hello</span> world!
  </AnchoredHeading>
 )
 }
})

[注意]将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的,如果在作用域中 h 失去作用,在应用中会触发报错

函数式组件

之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给它的状态,也没有生命周期方法。它只是一个接收参数的函数。

在这个例子中,我们标记组件为 functional,这意味它是无状态 (没有 data),无实例 (没有 this 上下文)

一个 函数式组件 就像这样:

Vue.component('my-component', {
 functional: true,
 // 为了弥补缺少的实例
 // 提供第二个参数作为上下文
 render: function (createElement, context) {
 // ...
 },
 // Props 可选
 props: {
 // ...
 }
})

[注意]在 2.3.0 之前的版本中,如果一个函数式组件想要接受 props,则 props 选项是必须的。在 2.3.0 或以上的版本中,你可以省略 props 选项,所有组件上的属性都会被自动解析为 props

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

props:提供 props 的对象
children: VNode 子节点的数组
slots: slots 对象
data:传递给组件的 data 对象
parent:对父组件的引用
listeners: (2.3.0+) 一个包含了组件上所注册的 v-on 侦听器的对象。这只是一个指向 data.on 的别名。
injections: (2.3.0+) 如果使用了 inject 选项,则该对象包含了应当被注入的属性。

在添加 functional: true 之后,锚点标题组件的 render 函数之间简单更新增加 context 参数,this.$slots.default 更新为 context.children,之后this.level 更新为 context.props.level。

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

在作为包装组件时它们也同样非常有用,比如,当需要做这些时:

1、程序化地在多个组件中选择一个

2、在将 children, props, data 传递给子组件之前操作它们

下面是一个依赖传入 props 的值的 smart-list 组件例子,它能代表更多具体的组件:

var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }
Vue.component('smart-list', {
 functional: true,
 render: function (createElement, context) {
 function appropriateListComponent () {
  var items = context.props.items
  if (items.length === 0)   return EmptyList
  if (typeof items[0] === 'object') return TableList
  if (context.props.isOrdered)  return OrderedList
  return UnorderedList
 }
 return createElement(
  appropriateListComponent(),
  context.data,
  context.children
 )
 },
 props: {
 items: {
  type: Array,
  required: true
 },
 isOrdered: Boolean
 }
})

【slots()和children对比】

为什么同时需要 slots() 和 children。slots().default 不是和 children 类似的吗?在一些场景中,是这样,但是如果是函数式组件和下面这样的 children 呢?

<my-functional-component>
 <p slot="foo">
 first
 </p>
 <p>second</p>
</my-functional-component>

对于这个组件,children 会给两个段落标签,而 slots().default 只会传递第二个匿名段落标签,slots().foo 会传递第一个具名段落标签。同时拥有 children 和 slots() ,因此可以选择让组件通过 slot() 系统分发或者简单的通过 children 接收,让其他组件去处理

模板编译

Vue 的模板实际是编译成了 render 函数。这是一个实现细节,通常不需要关心。下面是一个使用 Vue.compile 来实时编译模板字符串的简单 demo:

<my-functional-component>
 <p slot="foo">
 first
 </p>
 <p>second</p>
</my-functional-component>

render:

function anonymous(
) {
 with(this){return _c('div',[_m(0),(message)?_c('p',[_v(_s(message))]):_c('p',[_v("No message.")])])}
}

staticRenderFns:

_m(0): function anonymous(
) {
 with(this){return _c('header',[_c('h1',[_v("I'm a template!")])])}
}

以上这篇Vue渲染函数详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
javascript类型转换使用方法
Feb 08 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
JavaScript中如何判断一个值的类型
Sep 15 #Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 #Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 #Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 #Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 #Javascript
基于Vue生产环境部署详解
Sep 15 #Javascript
基于Vue单文件组件详解
Sep 15 #Javascript
You might like
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
PHP SQLite类
2009/05/07 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
Python 函数基础知识汇总
2018/03/09 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
python实现宿舍管理系统
2019/11/22 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
税务干部鉴定材料
2014/02/11 职场文书
行政专员的岗位职责
2014/03/10 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python