Where to put the initialization of uniapp this

In the process of developing with Uniapp, we will use the this keyword in many places. For example, inside the function defined in the methods method, this refers to the Vue instance. However, in the component's created and mounted life cycle functions, this refers to the component itself. So how do we use this keyword correctly in Uniapp? Especially in initialization, where should we place this?

First, let us take a look at the initialization process in Uniapp. When creating a new Uniapp project, the system will automatically generate a default main.js file. In this file, we can see the following code:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

const app = new Vue({
  ...App
})
app.$mount()

As you can see, in this file, we introduced Vue and App components through the import statement, and created a Vue instance app. In this example, we did not manually bind the this keyword, because Vue will automatically point this to the current Vue instance.

When we write components, we can also directly use the this keyword to access data and methods on the Vue instance. For example, in the methods method of a component, we can access the data on the Vue instance like this:

methods: {
  handleClick() {
    console.log(this.title)
  }
}

This.title here refers to the title attribute on the Vue instance.

Next, let’s take a look at how this keyword is used in the component’s created and mounted life cycle functions.

In the component's created life cycle function, we can do some component initialization operations. For example, we can call the background interface here to obtain some data, and then assign them to the data attribute of the component to render the component. Here, this refers to the current component instance. For example:

created() {
  this.getData()
},
methods: {
  async getData() {
    const res = await this.$http.get('/api/data')
    this.list = res.data
  }
}

The this.$http.get method here is a built-in method in Uniapp, which is used to initiate network requests. We assign the data returned by the background to the list attribute of the component, and the data can be displayed in the template of the component through {{list}}.

In the mounted life cycle function of the component, we can access the rendered DOM elements. This here also refers to the current component instance. For example, we can get the width and height of an element here and update the data. For example:

mounted() {
  const element = this.$refs.container
  const width = element.offsetWidth
  const height = element.offsetHeight
  this.width = width
  this.height = height
}

This.$refs.container here is the element node whose ref is container in the access component. We get the width and height of the element and assign them to the component's width and height properties.

To summarize, the this keyword in Uniapp generally refers to the current Vue instance or component instance, which can be used according to specific usage scenarios. There is also no problem in using this in the component's created and mounted life cycle functions. Just note that this refers to the component instance.

As for where to place the initialization, we can place it in the created life cycle function of the component or in the created life cycle function of the Vue instance. The specific decision can be made based on actual needs.

The above is the detailed content of Where to put the initialization of uniapp this. For more information, please follow other related articles on the PHP Chinese website!