Vue custom components cannot render problems (runtime-compiler and runtime-only)

Description of the problem: the problem that the custom component in the page cannot be rendered

code show as below

export default {
    components: {
         'MyHeader': {
            template: `<div>
                        <h1>hello</h1>
                        <h2>world</h2>
                        <div>{
   
   {title}}</div>
                    </div>`,
            data() {
                return {
                    title: '报表报表不不不不不'
                }
            },
        },
    },
    data() {
        return {}
    }
}

Solution:

vuecli 2.0版本写法
/* 带webpack显性配置的 */  
//webpack.config.js
//其实就是取别名，找到以 vue 结尾的，就去node_modules重新查一下路径
module.exports = {
  resolve: {
   alias: {
    'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
  }
 }
}



vuecli 3.0版本写法
/* webpack隐性配置的 */
//vue.config.js
//true 就是完整版的（即runtime-compiler）
module.exports = {
  runtimeCompiler: true  //ture: runtime-compiler  false: runtime-only
}

Cause of the problem: runtime-compiler and runtime-only

When configuring the project, the default export of the npm package is the runtime build, that is, the runtime-only version, which does not support compiling templates. When Vue initializes the project configuration, there are two runtime versions: runtime-compiler version and runtime-only version.
runtime-compiler version: Compile template template content.
runtime-only version: When using vue-loader to load .vue files, webpack renders the template during the packaging process. Loads faster.
 

---

Extended knowledge points:

1. Vue's compilation and rendering process

template --> ast --> render function --> VDom --> real DOM

• First parse the template (parse) into an abstract syntax tree (ast)
• Compile ast into a render function
• Render the render function into a virtual DOM
• Finally, the virtual DOM is rendered into a real DOM

(1) Step template of runtime-compiler
--> ast --> render function --> VDom --> real DOM

(2) Runtime-only step
render function --> VDom --> real DOM

2. Comparison of the two

(1) First of all, from the perspective of code integrity, the runtime-only version has one API less than the runtime-compiler version -- Vue.compile, this API executes the first two steps to compile a template string into a render function. Therefore, the runtime-only option cannot be used template.

(2) Due to the lack of corresponding functions in runtime-only, the size of this version is smaller.

3. How to choose between the two

(1) Both have their own advantages, runtime-compiler includes a compiler, you can choose templateor render, the choice is more flexible; but the volume is slightly larger and the performance is slightly worse;
(2) runtime-only does not include a compiler, when rendering the page It can save two steps of operation, and the performance is slightly better; but you can only choose renderto write, and the flexibility is not enough. How to choose?

• The case of using runtime-compiler

(1) Use the vue library in html. In this operation, you may only use some functions of vue, such as instructions, data binding, etc. At this time, it is easier and understandable for you to write a template than to write one . templateHere render函数It is recommended to useruntime-compiler

(2) If neither the render function nor the template property exists, the HTML that mounts the DOM element will be extracted and used as a template. In this case, the Vue library built with Runtime + Compiler must be used.

• The case of using runtime-only

When using vue-loader or vueify, templates inside *.vue files are precompiled into JavaScript at build time. You don't actually need a compiler in the final package, so just the runtime version is fine.