vue VNode如何使用，是什么东西？

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言：element ui 中有些 demo 使用了 vue 的 VNode，但是 demo 毕竟不全，所以想要了解 VNode 到底是什么，如何写出符合自己业务的代码。

vue 官网介绍：渲染函数 & JSX

createElement 函数

这里涉及到 createElement 函数。这个函数的返回值就是一个 VNode 对象。

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

VNode

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

通过 createElement 函数来创建自定义的 VNode

使用 JSX 语法。

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

// @returns {VNode}

createElement(

  // {String | Object | Function}

  // 一个 HTML 标签字符串，组件选项对象，或者

  // 解析上述任何一种的一个 async 异步函数。必需参数。

  'div',

  // {Object}

  // 一个包含模板相关属性的数据对象

  // 你可以在 template 中使用这些特性。可选参数。

  {

    // (详情见下一节)

  },

  // {String | Array}

  // 子虚拟节点 (VNodes)，由 `createElement()` 构建而成，

  // 也可以使用字符串来生成“文本虚拟节点”。可选参数。

  [

    '先写一些文字',

    createElement('h1', '一则头条'),

    createElement(MyComponent, {

      props: {

        someProp: 'foobar'

      }

    })

  ]

)

数据对象如何写？（如怎么添加点击事件等）

在 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

  },

  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`

  // 赋值，因为 Vue 已经自动为你进行了同步。

  directives: [

    {

      name: 'my-custom-directive',

      value: '2',

      expression: '1 + 1',

      arg: 'foo',

      modifiers: {

        bar: true

      }

    }

  ],

  // 作用域插槽格式

  // { name: props => VNode | Array<VNode> }

  scopedSlots: {

    default: props => createElement('span', props.text)

  },

  // 如果组件是其他组件的子组件，需为插槽指定名称

  slot: 'name-of-slot',

  // 其他特殊顶层属性

  key: 'myKey',

  ref: 'myRef',

  // 如果你在渲染函数中向多个元素都应用了相同的 ref 名，

  // 那么 `$refs.myRef` 会变成一个数组。

  refInFor: true

}