Vue学习:render函数

在main的js中

new Vue({
    el: '#root',
    template: `
    <App></App>
    `,
    components:{App},
});

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

出现该问题：给了两个解决办法render函数和完整版本vue

import Vue from 'vue'

使用上面引入的是不完整的： "module": "dist/vue.runtime.esm.js",是精简版本的，缺少了模板解析器，就无法解析template（esm：ES6模块化）

下面这个版本的是完全版本的

引入完整版本的就可以了

/*
该文件是整个项目的入口文件
*/
//引入vue
import Vue from 'vue/dist/vue.js'

//关闭生产提示
Vue.config.productionTip = false

new Vue({
    el: '#root',
    template: `
   <h1>你好</h1>
    `,
});

使用render

/*
该文件是整个项目的入口文件
*/
//引入vue
import Vue from 'vue'
/
//关闭生产提示
Vue.config.productionTip = false

new Vue({
    el: '#root',

  render(creatElement){
    //creatElement函数可以创建具体元素
    console.log(typeof creatElement)
    return creatElement('h1','你好啊')
  }
});

  render(creatElement){
    //creatElement函数可以创建具体元素
    console.log(typeof creatElement)
    return creatElement('h1','你好啊')
  }

精简 没有用到this箭头函数 然后一个参数可以省略 里面只有依据 且是返回值

  render:creatElement=>creatElement('h1','你好啊')

使用元素替代creatElement

 render: h => h('h1','你好啊') //原因在于内置的元素 +内容

   //使用了组件 具体的内容在组件中配置了
    render: h => h(App),//将App组件放入容器中

Vue完整版本：核心（生命周期等）+模板解析器（1/3）==>使用webpack打包，很大，模板解析已经不需要了，已经解析完成了

解析标签里面的模板可以被vue-template-compiler": "^2.6.14"解析.vue里面的模板标签的

在浏览器中使用精简的js:vue.runtime.js

关于不同版本的Vue

1、vue.js和vue.runtime.js 的区别

vue.js是完整版本的js包含核心功能+模板解析器

vue.runtime.xxx.js是运行版本的js.包含核心功能 没有模板解析器

2、因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，

需要使用render函数接收到的creatElement函数去指定具体内容