import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
template: '<App/>',
components: { App },
}).$mount('#app')
//compiler -相当于执行tempiler -> 使用parse(解析)成ast(抽象语法树) -> 编译成render函数 ->
//把相关的template组成虚拟virtualdom -> 真是dom
new Vue({
router,
store,
render: h(App)
}).$mount('#app')
//only -直接把app相关转成render函数 -> 虚拟virtualdom -> 真是dom
//这就是在创建vue项目的时候使用runtime-only会小6kb原因,就是少了前俩步template -> ast -> render
//render函数的原理
const aa = {
template: '<div>{{ massge }}</div>',
date () {
return {
massge: '我是组件'
}
}
}
new Vue({
el: '#app',
render: function (createlement) {
//基本语法:1
return createlement('h2', { class: 'box' }, ['hellow world'])
//基本语法:2
return createlement(
'h2',
{ class: 'box' },
createlement(
'button',//标签
{options},//属性 可不写
['xxxxx']//内容
)
)
//还可以传入一个组件
return createlement(aa)//直接把组件传进来,就省去了template,
//使用render这种方式会把编译的时候把引入的xx.vue里面的template直接进行转换
//用到的工具就是vue-tenplate-compiler 可以在package-json查看,打印这个app可以看到是一个object对象
}
})
runtime compiler 和 runtime-only的区别
最新推荐文章于 2022-03-15 15:13:07 发布