Vue中render函数的理解及脚手架用简洁版vue.runtime.xxx原因

Vue2脚手架中引入的是简洁版的vue.runtime.xxx.js,所以需要render函数去解析模板 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函数去指定具体内容。

• 引入完整Vue.js 才能这么写

代码语言：javascript复制

    // 完整版Vue才能这么写
    template:`<h1>你好啊</h1>`,
    components:{App},

• 是什么原因呢

原因：模板解析器占Vue.js的三分之一容量，最后打包上传用了webpack打包，而webpack已经把 .Vue 翻译成 .js 该解析的模板都解析完了，这个时候模板解析器就没有什么作用了（即某天我们最终写完代码，并把模板转换为最纯粹的文档，这个时候模板解析器就没有什么存在的必要了），打包可以省点空间，所以我们需要用render去解析模板

代码语言：javascript复制

    // 当你使用残缺版的Vue时，还想创建元素，用下面的这个
    render(creatElement) { // 参数是一个函数
         console.log(typeof creatElement); // function
         // <h1>你好啊</h1>   下面加引号，是因为 h1 是html内置元素
         return creatElement('h1', '你好啊')
     }

• 简写

代码语言：javascript复制

    // * 简写
    render:q=> q('h1','你好啊')

函数 配置 打包 render runtime

0 人点赞