When is the method executed in vue?

In Vue, methods (methods) are functions inside the component and are used to handle the business logic of the component. Methods can be used in template code as event handlers or called from the component's JavaScript code.

So, when are the methods in Vue executed? In this article, we will explore the execution timing of methods in Vue, and learn more about Vue's rendering process and its application in code.

1. Vue’s rendering process

Vue’s rendering process is very important because it is the key to understanding the timing of method execution. In Vue, the rendering process is recursively executed layer by layer from parent component to child component until the entire component tree is rendered.

Vue’s rendering process is divided into three stages:

1. Creation stage (Initialization): This stage mainly initializes various properties of the component, such as props, data, computed, watch, etc. .

2. Template compilation phase (Template Compilation): Compile the template code into the render function.

3. Mounting phase (Mounting): Render the virtual DOM generated by the render function into actual DOM elements, and mount the component to the page.

2. Method execution timing

In Vue, the method execution timing is executed when the component is rendered. Methods can be called directly in the component's JavaScript code or triggered through event handlers in the template code. In either case, the method will be executed during the rendering process.

Below we use an example to illustrate the execution timing of the method.

First, we create a component containing two buttons.

<template>
  <div>
    <button @click="onClick">点击我1</button>
    <button @click="onClick">点击我2</button>
  </div>
</template>

<script>
export default {
  methods: {
    onClick() {
      console.log('按钮被点击了')
    }
  }
}
</script>

When we render this component for the first time, two buttons will be rendered. When the user clicks any of the buttons, the onClick method will be triggered, and the console will output the message "The button was clicked".

This is because, during the rendering process, when the user clicks the button, Vue will capture the event through the underlying event listener and call the method. In Vue's rendering process, this process occurs between the template compilation phase and the mounting phase. That is to say, when we click the button, Vue has completed the compilation and rendering of the method, and the method already exists in the component instance, but it is always in a waiting state, waiting for the event to be triggered.

3. Method Application

As mentioned above, methods in Vue can be called in the JavaScript code of the component or triggered by the event handler in the template code. The application scenarios of these two methods are as follows:

1. Call the method in the JavaScript code of the component

When we need to process some business logic inside the component, we can call it in the JavaScript code of the component Call method. For example, in our example above, clicking the button will trigger the handleClick method and output "The button was clicked" to the console.

2. Use methods in template code

When we need to handle user operations in template code, we can bind methods to event handlers. For example, in our example above, we bound the onClick method to two buttons in the template code, which is triggered when the button is clicked. This approach is often used to handle user interactions.

To sum up, the methods in Vue are executed during component rendering. By mastering Vue's rendering process, we can better understand the execution timing of methods, and be able to skillfully apply methods to handle business logic and user interaction behaviors within components.

The above is the detailed content of When is the method executed in vue?. For more information, please follow other related articles on the PHP Chinese website!