【前端】main.js中app.vue中 render函数的作用及使用背景

vue.js中的main.js中的作用是将app组件挂载到页面中，其中app组件是汇总所有组件元素的组件。main.js的创建vue实例。

#认为的版本
import APP from './App.vue';

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

#实际的版本
/*
整个项目的入口文件
*/
//引入vue
import Vue from ‘vue’  //引入的是残缺版的vue，

//引入app组件，所有组件的父组件
import App from './App.vue'

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

new Vue({
    //将app组件放入容去中
    render: h => h(App),
}).$mount('#app’)

/*
这里的new Vue({}).$mount('#app') 就等同于 new Vue({ el:'#app' })
*/

上述两个版本之间的区别在于用了render函数和没有用render函数，render的作用是将js中所搭建的标签模版渲染到页面中。
认为的版本在vue脚手架创建的项目里是不可运行的，因为脚手架中到实际运行的js中是没有模版解析器的，只是在开发阶段有，打包成浏览器所认识的版本是没有的。如果想使用需要引入完整版的vue.js 但是这会导致vue内容多。可能会导致性能降低。

Vue = 核心+模版解析器（1/3） 带有runtime的vue.runtime.xxx.js都是运行时vue 没有模版解析器的文件。

最简单的render函数的使用

render函数

render(createElement){
    return createElement(‘h1’,'你好啊’);
}

ps: 简单来说，render函数字符串模版的代替方案，接收createElement创建的标签来将所创建的dom元素渲染到页面上。

大家加油，不要让潜在堕落期的自己打败向上的自己。