Я использую Vue cli и реализую шаблон simple-webpack.
В файле ввода main.js есть код, подобный приведенному ниже:
render: h => h(App)
Я знаю, что h является псевдонимом функции createElement, мне интересно, почему один компонент файла, такой как App, может быть передан в качестве аргумента, официальный документ vue не упоминает об этом.
Кто-нибудь знает, почему это так?
Однофайловый компонент (SFC) в vue js имеет расширение .vue.
В веб-пакете мы используем загрузчик с именем vue-loader, который проверяет наличие .vue файлов.
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
}
эти SFC преобразуются в простые модули es6 .
Часть <template> преобразуется в функции рендеринга с помощью vue-template-complier. и внедряется в экспортируемый модуль.
Тег <style> аналогичным образом обрабатывается любыми препроцессорами для sass или меньше, а затем Post-css для соответствующей области действия CSS и динамически добавляется внутри тега <head> as <style> с помощью vue-style-loader.
Например, если файл App.vue выглядит следующим образом:
<template>
<div>
<p class="myClass">{{msg}}</p>
</div>
</template>
<script>
export default{
data(){
return{
msg: "Vue is awesome!"
}
}
}
</script>
Он преобразуется в простой модуль, который экспортируется как объект, показанный ниже:
export default {
data(){
return{
msg: "Vue is awesome!"
}
},
render(createElement) {
return createElement("div",
[createElement("p", {class: {'myClass': true}}), this.msg]
)
}
}
Он импортируется как import App from './path/to/App.vue и используется в корневом экземпляре vue как
new Vue({
el:"#app",
render: h => h(App)
})
Вы можете проверить эту скрипку, где App передается как простой объект в render функцию корневого экземпляра vue. .
Для получения более подробной информации вы можете посмотреть это видео, где Эван Ю объясняет это более подробно.
