render函数的作用
render函数是vue通过js渲染dom结构的函数createElement,约定可以简写为h
官方文档中是这样的,createElement 是 Vue.js 里面的 函数,
这个函数的作用就是生成一个 VNode节点,
render 函数得到这个 VNode 节点之后,
返回给 Vue.js 的 mount 函数,渲染成真实 DOM 节点,并挂载到根节点上。
render 函数
跟template
一样都是创建 html 模板的,但是有些场景中用template
实现起来代码冗长繁琐而且有大量重复,这时候就可以用render 函数
。
import Vue from 'vue'
import App from './App.vue'
import store from "@/store";
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
在使用vue cli生成的vue项目,里面的main.js里面。默认用了render函数。不太懂。所以学一下、
这个是一种简写的方法。
render
函数用法:
$mount()手动挂载
当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;
假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载。
比如挂在路由的时候。这样写:
$mount()手动挂载
当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;
假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载。例如:
new Vue({
//el: '#app',
router,
render: h => h(App)
// render: x => x(App)
// 这里的render: x => x(App)是es6的写法
// 转换过来就是: 暂且可理解为是渲染App组件
// render:(function(x){
// return x(App);
// });
}).$mount("#app");