Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

CSS style penetration changes

This is because third-party groups are often used in Vue project development, so it is inevitable to modify the styles of third-party components. Third, due to the style isolation of the Scoped property, it may be necessary to remove Scoped or create a new style. However, these practices have side effects, such as component style contamination, less elegant writing, style penetration in THE CSS preprocessing will be corrected.

In my projects I often use /deep/ to solve this problem, and can also use >>> to end the problem:

<style scoped> outer >>>. El-checkbox {\display: block; \ font-size: 26px; \ \ .el-checkbox__label {\ font-size: 16px; \ }\ }\ </style>Copy the code
<style scoped>\
/deep/ .el-checkbox {\
display: block; \ font-size: 26px; \ \ .el-checkbox__label {\ font-size: 16px; \ }\ }\ </style>Copy the code

Know when to use V-IF (and when to avoid it)

Instead of using v-if, sometimes use V-show instead for better performance.

When v-if is turned on or off, it creates and completely destroys the element. Instead, v-show creates the element and leaves it there, hiding it by setting its style to display: None.

This is more efficient if the components you are switching are expensive to render.

Conversely, if you don’t need to execute an expensive component immediately, you can use V-if, which skips rendering it and makes the page load faster.

Deconstruction in V-for

Did you know you can use deconstruction in V-for?

<li
    v-for="{ name,id } in users"
>
  {{ name }}
</li>
Copy the code

Better known, you can extract indexes from v-for by using such tuples.

<li v-for="(movie, index) in [
  'Lion King',
  'Frozen',
  'The Princess Bride'
]">
  {{ index + 1 }} - {{ movie }}
</li>
Copy the code

When working with an object, we can use key like this:

<li v-for="(value, key) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  {{ key }}: {{ value }}
</li>
Copy the code

You can also combine the two methods to get the key and the index of the property.

<li v-for="(value, key, index) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  #{{ index + 1 }}. {{ key }}: {{ value }}
</li>
Copy the code

How do I listen for changes in a slot

Sometimes we need to know when the contents of the slot have changed.

<! <slot @change="update" />Copy the code

Unfortunately, Vue has no built-in way for us to detect this.

However, my friend Austin came up with a very clean way to do this using MutationObserver.

The MutationObserver interface provides the ability to monitor changes made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which is part of the DOM3 Events specification.

Export default {mounted() {// Call 'update' const observer = new MutationObserver(this.update); Observe.observe (this.$el, {childList: true, subtree: true}); }};Copy the code

How to write child components correctly

Scoped CSS is great at keeping content clean and does not introduce styles into other components of your application.

But sometimes you need to override the style of a child component and get out of scope.

Vue has a deep selector:

<style scoped>
.my-component >>> .child-component {
  font-size: 24px;
}
</style>
Copy the code

Note: If you are using CSS preprocessors like SCSS, you may need to use /deep/ instead.

Use V-for to loop in the specified range

The V-for directive allows us to iterate over a set of numbers, but it also allows us to iterate over a range

<template>
    <ul>
        <li v-for="val in 6">Li #{{val}}</li>
    </ul></template> Render result Li #1
Li #1
Li #1
Li #1
Li #1
Li #1
Copy the code

When we use v-for with scope, it will start at 1 and end with the number we specify.

Use Watch to listen on arrays and objects

The hardest thing to control with the Watch is that it sometimes doesn’t seem to trigger properly. Usually, this is because we are trying to listen on arrays or objects, but deep is not set to true

export default {
  name: 'ColourChange'.props: {
    colours: {
      type: Array.required: true,}},watch: {
    // Use object syntax, not just methods
    colours: {
      // This will let Vue know to look inside the array
      deep: true,
 
      handler()
        console.log('The list of colours has changed! '); }}}}Copy the code

Using vue3’s API will look like this

watch(
  colours,
  () = > {
    console.log('The list of colours has changed! ');
  },
  {
    deep: true});Copy the code