Vue 之render函数的学习与使用

「爱情、让人受尽委屈。」 2022-05-17 23:29 342阅读 0赞

render渲染函数  
我们可以生成DOM元素在template中，但是我们也可以使用render渲染函数

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

在渲染函数中：

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

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

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

createElement(
      // {String | Object | Function}
      // 一个 HTML 标签字符串，组件选项对象，或者
      // 解析上述任何一种的一个 async 异步函数，必要参数。
      'div',
    
      // {Object}
      // 一个包含模板相关属性的数据对象
      // 这样，您可以在 template 中使用这些属性。可选参数。
      {
        // (详情见下一节)
      },
    
      // {String | Array}
      // 子节点 (VNodes)，由 `createElement()` 构建而成，
      // 或使用字符串来生成“文本节点”。可选参数。
      [
        '先写一些文字',
        createElement('h1', '一则头条'),
        createElement(MyComponent, {
          props: {
            someProp: 'foobar'
          }
        })
      ]
    )

生成数据表的每列的tablesearch功能，是动态生成input 输入框，用iview的组件实现的会比较好，因为组件给我们绑定了一些事件，我们呢直接调用就可以。

addSearch (h, {column}) {
          let inputValue = {}
          return h('Input', {
            props: {
              placeholder: 'Search' + ' ' + column.label,
              icon: 'ios-search-strong'
            },
            style: {
              paddingRight: '5px'
            },
            on: {
              input: val => {
                inputValue = val
                if (!inputValue) {
                  this.vaildInputValue(column.label, inputValue)
                }
              },
              class: 'ivu-input-icon',
              'on-click': () => {
                this.vaildInputValue(column.label, inputValue)
              },
              'on-enter': () => {
                console.log('enter')
                this.vaildInputValue(column.label, inputValue)
              }
            }
          })
        },

如果是element UI

addSearch (h, {column}) {
          let inputValue = {}
          return h('el-input', {
            attrs: {
              placeholder: 'Search',
              'suffix-icon': 'el-icon-search'
            },
            style: {
              paddingRight: '5px'
            },
            on: {
              input: val => {
                inputValue = val
                if (!inputValue) {
                  this.vaildInputValue(column.label, inputValue)
                }
              },
              'change': () => {
                console.log('click')
                this.vaildInputValue(column.label, inputValue)
              },
              'enter': () => {
                console.log(enter)
                this.vaildInputValue(column.label, inputValue)
              }
            }
          })

他们本身自带的定义事件可以让我们大大提高了工作效率