Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to introduce render function in Vue". The content of the explanation in this article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to introduce render function into Vue.

Preface

In the entry file main.js for creating a project using Vue scaffolding, the default code is as follows:

Import Vue from 'vue'import App from'. / App.vue'Vue.config.productionTip = falsenew Vue ({render: h = > h (App),}). $mount ('# app')

As you can see, the App component is introduced through import in the code, but it is not registered through components, and a render function is used instead of the template property

/ / equivalent writing of the above code import Vue from 'vue/dist/vue'// Note the difference here import App from'. / App.vue'Vue.config.productionTip = falsenew Vue ({template: ``, components: {App},}). $mount ('# app')

To understand why the above code is equivalent, you need to start with different versions of Vue

Background

Vue consists of two parts, one is the core functions, including life cycle, event handling, and so on, and the other is a template parser, which is used to parse Vue templates.

Vue.js includes all of these two parts (that is, the full version of vue), but there will be a problem. When the project is developed and packaged, the packaged file will introduce all the code of the full version of vue, but in fact, the code of the Vue template parser is no longer needed in the packaged output file (the template has been parsed and the browser can run it directly). The introduction of the full version of Vue will only increase the size of the packaged file.

To solve this problem, the Vue team provides different versions of Vue,vue.js as the full version of Vue. Other versions are streamlined on the full version of vue.js. For example, vue.runtime.* is the running version of Vue, excluding part of the code for the Vue template parser.

Since there are different versions of Vue, which version did we use when we introduced Vue in import?

Looking at the package.json file in the Vue package, we can see that the modular entry file of ES6 is vue.runtime.esm.js, that is, what Vue introduces to us by default is the running version of vue, which does not include part of the template parser code.

For the runtime Vue to do template parsing, you need to use the render function. In the official case of Vue, the content of the entry file main.js is as follows, in which the render function is used for template parsing.

Import Vue from 'vue'import App from'. / App.vue'Vue.config.productionTip = falsenew Vue ({render: h = > h (App),}). $mount ('# app')

If we use the template attribute for template parsing, we will report an error of 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.

/ / if the full version of vue is introduced through import Vue from 'vue/dist/vue', the code will not report an error. By default, import Vue from' vue'// will be introduced into the running version of vue. If you write a template using template, you will get an error Vue.config.productionTip = falsenew Vue ({template: `hello`,}). $mount ('# app')

Note: template parsing mentioned above refers to parsing the template defined in the template property of the vm configuration object.

Vue uses vue-template-compiler to help us parse the template in the component (the content in the template tag in .vue), and you can see that he is only in the development dependency, not in the production dependency, which is easy to explain, because the packaged file browser can run directly, there is no vue template syntax, and there is no need for vue-template-compiler.

"dependencies": {"core-js": "^ 3.6.5", "vue": "^ 2.6.11"}, "devDependencies": {"@ vue/cli-plugin-babel": "~ 4.5.0", "@ vue/cli-plugin-eslint": "~ 4.5.0", "@ vue/cli-service": "~ 4.5.0", "babel-eslint": "^ 10.1.0" "eslint": "^ 6.7.2", "eslint-plugin-vue": "^ 6.2.2", "vue-template-compiler": "^ 2.6.11"}, principle

Using the template attribute in the configuration object of vm, you can create a vue template page through HTML syntax. The Vue template we write will be converted to virtual Dom at the bottom before rendering to the page (real Dom).

By using the render function in the configuration object of vm, you can build a virtual DOM directly with js, eliminating the process of translation (translation from Vue template to virtual Dom).

Thank you for reading, the above is the content of "how to introduce render function in Vue". After the study of this article, I believe you have a deeper understanding of how to introduce render function into Vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.