Vue学习笔记(14)-Vue脚手架(1)-render函数

Vue脚手架中的render函数

render函数是什么?

• 顾名思义render有渲染的意思,所以render函数的用法就是用来渲染html文件,准确的来说是用于渲染vm(Vue实例化对象)当中的html片段(其他的组件[App,其他子组件等..]不需要render来渲染,因为,在项目的根目录下的 package.json 中存在  “vue-template-compiler” 这就是用于解析.vue后缀组件的模板编译器,但是要知道 vm 是在 main.js 里面编写的, “vue-template-compiler” 不解析后缀为.js的文件,所以要想解析 main.js 里面的模板(template)要么需要引入完整的Vue(一般在项目开发中是引用残缺版的Vue,里面一般是没有模板编译器的),要么就调用render函数去解析模板,推荐使用后者,因为模板编译器只在项目初期的时候调用,在用webpack把项目打包好后就不需要使用了)

完整语法如下:

• Rander函数里面传递参数:createElement 而且这个参数也是一个函数,比如:喔我这里渲染一个h1标签

  render: function (createElement) {
      return createElement(‘h1’,’你好阿!’)
      //里面也可以直接传入组件
      //return createElement(App)
  }

结果展示:

在使用Es6语法后可简写为箭头函数,在项目中常用:

// 创建Vue实例对象
new Vue({
  el : '#app',
  // 将App组件放入容器中,这里的h就是createElement
  render: h => h(App),
})/*.$mount('#app')*///生命周期 = 等同于给容器绑定id el属性

总结:

• 关于不同版本的Vue：
  • 1.vue.js与vue.runtime.xxx.js的区别：
    • (1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
    • (2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
  • 2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
    • render函数接收到的createElement函数去指定具体内容。