vue--day36--render函数

发布时间 2023-07-22 13:08:42作者: 雪落无痕1

1.脚手架里面为什么main.js 里面,使用了render 函数/**

* 该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
// 引入App 组件 他是所有组件的父组件
import App from './App.vue'
//关闭vue 的生产提示
Vue.config.productionTip = false
// 创建Vue 实例对象--vm
new Vue({
// //将 app 组件放入到容器中
 render: h => h(App),
 }).$mount('#app')

 

2. 以前单文件为main.js 里面 写法
/**
* 该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
// 引入App 组件 他是所有组件的父组件
import App from './App.vue'
//关闭vue 的生产提示
Vue.config.productionTip = false
// 创建Vue 实例对象--vm
 

new Vue({
el:'#app',
template:`<App>你好呀</App>`,
comments:{App}
})
 
 
运行后会报错
Vue warn]: 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.(found in <Root>
你正在使用运行版本的 vue(残缺的 vue 没有获取到模板解析器) 并且模板解析器没有成功获取到.
解决方法使用 render 函数,,或者使用完整版的 vue。
 那是因为在main.js 里面引入了。import Vue from 'vue' 引入第三方库,引入的都是残缺的vue。
 
 
 
/**
* 该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue/dist/vue'   // 引入了完整的vue
// 引入App 组件 他是所有组件的父组件
//import App from './App.vue'
//关闭vue 的生产提示
Vue.config.productionTip = false
// 创建Vue 实例对象--vm
 

new Vue({
el:'#app',
template:`<h1>你好呀</h1>`,
//comments:{App}
})
可以显示运行,没有问题。
 
引入残缺版本的vue 怎么解决
/**
* 该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
// 引入App 组件 他是所有组件的父组件
//import App from './App.vue'
//关闭vue 的生产提示
Vue.config.productionTip = false
// 创建Vue 实例对象--vm
// new Vue({
// //将 app 组件放入到容器中
// render: h => h(App),
// }).$mount('#app')

new Vue({
el:'#app',
 // 第一步    
   //render(createElement){
   //console.log('vue调用render'+createElement);
   //return createElement('h1','你是谁呀');
   //}
   // 第二步  render 里面没有this,,可以简写为箭头函数
   // render:(createElement)=>{
      // return createElement('h1','你是谁呀');
   // }
   // 第三步 箭头函数左边只有一个参数,可以把 ()省掉
    
    //render:createElement=>{
       //return createElement('h1','你是谁呀');
   // }
 
// 第四步 箭头函数只有一个函数题,并且还想return 
    
    render:createElement=>return createElement('h1','你是谁呀'); 这样就和 render: h => h(App)差步多了。
    
    
//comments:{App}
})