Vue中的render函数

转载：https://blog.csdn.net/qq122516902/article/details/87984148

目录

render函数

先看看main.js文件中的内容：

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // 2.注册组件
  components: { App },
  // 1. 定义组件的模板<App><App/>
  template: '<App/>'
})

从文件中我们可以看到，首先把Vue实例绑定到#app元素上面，这个#app元素是index.html中的元素，不是App.vue中的元素。再引入 App.vue这个文件，然后在Vue实例中注册这个组件，在把App中的html渲染到Vue实例上。

现在通过render函数改写这个：

import Vue from 'vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#myApp',
  render: h => (<div>123</div>)
})

render: h => (<div>123</div>)这里的作用就是括号里面的html。
再看另外一个例子：

Vue.component('MyApp', {
  render: function (createElement) {
    return createElement(
      'h1',   // 标签名称
      '123' // 子元素数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#myApp',
  template: '<MyApp/>'
})

首先通过Vue.component注册一个组件，这个组件通过template: '<MyApp/>'渲染到Vue根实例。render函数用来生成组件中的html内容：

Vue.component('MyApp', {
  render: function (createElement) {
    return createElement(
      'h1',   // 标签名称
      '123' // 子元素数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

再次修改main.js:

import Vue from 'vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#myApp',
  render: function (createElement) {
    return createElement(
      'h1',   // 标签名称
      '123' // 内容
    )
  }
})

直接通过render函数渲染。

• 使用h代替createElement

  
  在这里插入图片描述
  

  通过代码的方式去写html标签是很繁琐的，但是 通过上面这种形式可以直接写html标签了：

import Vue from 'vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#myApp',
  render: h => (<div>
    <h1>123</h1>
  </div>)
})

实例:mai.js

import Vue from 'vue'
// import Vue from 'vue/dist/vue.esm.js'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // 下面三种方式都是一样的 只是写法不一样

  // 方法1 vuecli2.x的写法  如果是vuecli3.x搭建的2.x的版本
  // 则需这样引入Vue :  import Vue from 'vue/dist/vue.esm.js'   见:https://blog.csdn.net/wxl1555/article/details/83187647
  // components: { App },
  // template: '<App/>'  // <App/>模板最后插入在 #app中

  // 方法2
  // render: h => h(App)

  // 方法3
  // render (h) {
  //   return h(App)
  // }
  // 方法 2和3是该方法发缩写   使用h代替createElement
  render (createElement) {
    return createElement(App)
  }
})