When using Vue, there are two versions

One is the full version (vue.js),

The other non-complete version is also called the runtime version (vue.runtime.js).

Full version: vue.js

Contains compiler. The compiler can convert HTML into DOM nodes and content in HTML, so it is not recommended to use it because of its large size. Views are obtained from HTML.

vue.js

vue.min.js
Copy the code

Where the full HTML is written

The HTML of the complete vue can be written in two places, one is to write the corresponding XML syntax of vUE in the.html file, as follows:

<div>{{ hi }}</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
Copy the code

Another place to write HTML is in the template: variable of the new Vue() constructor, as follows:

// A compiler is required
new Vue({
  template: '<div>{{ hi }}</div>'
})
Copy the code

Of course, since it is the full version, after the introduction of vue-Loader, it is completely possible to write the HTML position in the non-full version. The only thing to note is that only one template: and render() can appear in the new Vue() constructor option.

Advantages:

You can write Vue statements directly in HTML files, which is more readable

Disadvantages:

  1. Larger in volume than the incomplete version

  2. The HTML file is mixed with THE VUE syntax, resulting in the fusion of various types of files and high coupling

Incomplete version: vue.runtime.js

The HTML in the non-complete version is just a string, and the view cannot be obtained from THE HTML, but pomliler can be called through vue-loader in webpack to convert it into h() function, and the js file size downloaded by the user is smaller

vue.runtime.js

vue.runtime.min.js
Copy the code

Advantages:

  1. Small size, the volume of the incomplete version is more than 30% smaller than the full version

  2. Low coupling and strong modularity

Disadvantages:

  1. Now I don’t know

The template and render

VUE typically uses template to create HTML,

And then sometimes,

We need to use javascript to create HTML, in which case we need to use the render function.

Template —- HTML to do the rendering

Templete is the content of a view, which can contain HTML content directly. It is usually placed directly in the view layer, and used in the full version to display HTML directly in the view

Div did a v-for list loop. Now I want span to loop. What should I do?

　　

  1. There are three ways to do this

Also loop the span with v-for (this works, but don’t do it because you’ll cry later)

　　　

  1. Wrap a div around the div and span and loop the div (this method adds an extra div tag)

　　　

  1. If you don’t want to add an additional div, you should use template (recommended)

　　

Template is used as a template placeholder to help wrap elements, but it is not rendered to the page during the loop

　　　　

Renderr —-js way to do rendering

To put it simply, in Vue we use template HTML syntax to build the page, using the render function we can use JS language to build the DOM

Since vue is a virtual DOM, it also needs to be translated into a VNode function when it gets the template. Using the render function to build the DOM, Vue avoids the translation process.

When the render function is used to describe the virtual DOM, vue provides a function that is the tool needed to build the virtual DOM. It’s called createElement on its website. And the convention is called h,

Vm has a method _c, which is also an alias for this function.

How to use the render function

 render:(h) = > {
       return h('div', {// bind the value attribute to div
         props: {
               value:' '},// bind styles to div
　　　　　　style: {width:'30px'},// bind the click event to div
          on: {
             click: () = > {
                   console.log('Click event')}},})}Copy the code

conclusion

Similarities:

The render function, like template, creates an HTML template

Differences:

  • Template is suitable for simple logic, render for complex logic.

  • The consumer template is relatively easy to understand, but not flexible enough; The custom render function is flexible but demanding to the user.

  • Render has higher performance and Template has lower performance. This can be seen in the vUE component rendering flow chart below.

  • Based on the above point, we know from the vue component rendering flow chart that using the Render function has no compilation process, which is equivalent to the user directly giving the code to the program. Therefore, it is highly demanding and error-prone to use

  • The Render function has a higher priority than template, but beware that Mustache syntax should never be used again

How to write Vue code with codesandbox.io

codesandbox.io/

Create a VUE project