Vue渲染函数

时间  2019-12-13
标签 vue 渲染 函数 繁體版
原文   原文链接

前面的话

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

 

引入

　　下面是一个例子，若是要实现相似下面的效果。其中，H标签可替换html

<h1>
  <a name="hello-world" href="#hello-world">
    Hello world!
  </a>
</h1>

　　在 HTML 层，像下面这样定义来组件接口：vue

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

　　当开始写一个经过 level prop 动态生成 heading 标签的组件，可能很快想到这样实现：java

<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代码以下node

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

　　在这种场景中使用 template 并非最好的选择：首先代码冗长，为了在不一样级别的标题中插入锚点元素，须要重复地使用 <slot></slot>git

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

<div id="example">
  <anchored-heading :level="2"><a name="hello-world" href="#hello-world">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中express

 

虚拟DOM

　　在深刻渲染函数以前，了解一些浏览器的工做原理是很重要的。如下面这段 HTML 为例：编程

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

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

dom

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

　　高效的更新全部这些节点会是比较困难的，不过所幸没必要再手动完成这个工做了。只须要告诉 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】

　　render 函数中没有与 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 的组件树里。

　　在做为包装组件时它们也一样很是有用，好比，当须要作这些时：

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

　　二、在将 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：

<div>
  <header>
    <h1>I'm a template!</h1>
  </header>
  <p v-if="message">
    {{ message }}
  </p>
  <p v-else>
    No message.
  </p>
</div>

　　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!")])])}
}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程