Common modifiers

  • stopThe modifier is used to prevent bubbling
<div @click="clickEvent(2)" style="width:300px; height:100px; background:red">
    <button @click.stop="clickEvent(1)">Click on the</button>
</div>

methods: {
        clickEvent(num){click the button output without stop1 2Add stop click button output1
            console.log(num)
        }
    }
Copy the code
  • onceThe modifier is used to execute an event only once
<div @click.once="clickEvent(2)" style="width:300px; height:100px; background:red">
    <button @click="clickEvent(1)">Click on the</button>
</div>

methods: {
        clickEvent(num){multiple clicks of the button output without once1With once, clicking the button multiple times will output only once1 
            console.log(num)
        }
    }
Copy the code
  • preventThe purpose of the modifier is to prevent the default event (such as the jump to the A tag)
<a href="#" @click.prevent="clickEvent(1)"</a> methods: {clickEvent(num){without prevent click on the A TAB to jump to and output1If "prevent" is added, clicking on the "A" TAB will not jump to the "a" TAB1
            console.log(num)
        }
    }
Copy the code
  • sync

This is done when a parent component passes a value to a child component that wants to change the value

<children :foo="bar" @update:foo="val => bar = val"></childrenthis.$emit('update:foo', newValue) copies the codeCopy the code

The sync modifier is used to abbreviate:

<children :foo.sync= in the parent component"bar"></childrenthis.$emit('update:foo', newValue)
Copy the code

There are five scenarios for transferring values between Vue components

Parent component passes value to child component: props

Child component passes value to parent:

Son:this.$emit("giveFather".this.word); Father: "the Children @ giveFather ="getSon"></Children>

Copy the code

Value transfer between sibling components:

With EventBus, the observer model is utilized


   // The first step is to define a method of your own on the vUE prototype, usually called $bus, as the vue instance

   Vue.prototype.$bus = new Vue();

   this.$bus.$emit("giveSon".this.word);

   this.$bus.$on("giveSon".this.getSon);

Copy the code

You can use

Optimized with the.sync modifier


<text-document v-bind:title.sync="doc.title"></text-document>

Copy the code

Others: Provide /inject values, vuEX, cache

Local 100000 data optimization

First USES the setTime or promise made event task, in block processing, in the window. The requestAnimationFrame ()

Tell the browser window. RequestAnimationFrame () – you want to perform an animation, and required the browser until the next redraw calls the specified callback function to update the animation. This method takes as an argument a callback function that is executed before the browser’s next redraw.

RequestAnimationFrame is similar to setTimeout/setInterval in that it recursively calls the same method to update the screen to make it move, However, its advantage over setTimeout/setInterval is that it is an API provided by the browser specifically for animation, which optimizes method calls at runtime and pauses animation automatically if the page is not active, saving CPU overhead.

Control turntable probabilistic algorithm