• This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Alternatives to template definitions

Inline template

When using a component, write the special feature inline-template to treat the contents directly as templates instead of being distributed (slots).

<my-cmp inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-cmp>
Copy the code

However, inline-template makes the scope of the template more difficult to understand. As a best practice, use the template option within the component or a

X-Template

Another way to define a template is to give it a text/x-template type in a

<script 
  type="text/x-template" 
  id="hello-world-template"
>
  <p>Hello hello hello</p>
</script>
Copy the code

Vue.component('hello-world', {
  template: '#hello-world-template'
})
Copy the code

These can be used for very large demos or very small applications, but avoid them otherwise because they separate the template from the rest of the component’s definition.

Control update

Forced to update

When you change some data and the page is not re-rendered, you can call $forceUpdate to do a forced update.

$forceUpdate $forceUpdate $forceUpdate $forceUpdate $forceUpdate $forceUpdate $forceUpdate $forceUpdate $forceUpdate

Create low-overhead static components with V-once

Rendering normal HTML elements is very fast in Vue, but sometimes you may have a component that contains a lot of static content. In this case, you can add the V-once feature to the root element to ensure that the content is evaluated only once and then cached, like this:

Vue.component('terms-of-service', {
  template: ` 
      
 
       
Terms of Service
 ... a lot of static content ... 
      
 `
})
Copy the code

Try not to overuse this pattern. It’s handy in rare cases when you need to render a lot of static content, and it’s not necessary unless you’re very careful about rendering slowly — plus it can cause a lot of confusion later on. For example, assuming another developer is unfamiliar with V-once or missed it in the template, they might spend hours trying to figure out why the template isn’t updating properly.

The last

If it is helpful to you, I hope to give you a 👍 comment/collection/three even!

Bloggers are honest and answer questions for free ❤