this在vue和小程序中的使用详解

在Vue和小程序中，this指向的对象在不同的上下文中可能会有所不同，因此正确理解和使用this关键字非常重要。在本文中，将对Vue和小程序中this的用法进行详细的解释和说明，同时给出一些示例来加深理解。

Vue中的this

在Vue中，我们经常需要在组件的生命周期、方法和计算属性等中使用this。在Vue组件中，this指向的是组件实例，可以访问组件的各种属性和方法。

生命周期中的this

在Vue组件的生命周期中，this指向的都是组件实例。例如，created、mounted、updated、destroyed等生命周期函数中，this都指向组件实例，可以通过this访问组件内部的数据和方法。

export default {
  data() {
    return {
      count: 0
    }
  },
  created() {
    console.log('组件已创建，count =', this.count)
  },
  mounted() {
    console.log('组件已挂载')
  },
  updated() {
    console.log('组件已更新，count =', this.count)
  },
  destroyed() {
    console.log('组件已销毁')
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

方法中的this

在Vue组件的方法中，this也指向组件实例，可以通过this访问组件内部的数据和方法。需要注意的是，在Vue组件的方法中使用this时，需要注意this的作用域，因为有些场景下this可能会发生变化，比如在回调函数中。

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message)
    },
    async fetchData() {
      const response = await fetch('/api/data')
      response.json().then(function(data) {
        console.log(this.message) // 这里的this指向的是回调函数内部
      })
    }
  }
}

在上面的例子中，showMessage()方法中的this指向的是组件实例，可以正确输出Hello。而在fetchData()方法中的回调函数中，this指向的是回调函数内部的作用域，而不是组件实例，因此不能直接访问组件实例的数据。解决方法是将this保存到一个变量中，然后在回调函数中使用。

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message)
    },
    async fetchData() {
      const self = this // 保存this
      const response = await fetch('/api/data')
      response.json().then(function(data) {
        console.log(self.message) // 使用保存的this
      })
    }
  }
}

计算属性中的this

在Vue的计算属性中，this同样指向组件实例。计算属性中的this可以访问组件的各种属性，比如data、props、methods等，方便我们进行复杂的计算。

export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName() {
      return this.firstName + this.lastName
    }
  }
}

在上面的例子中，fullName()计算属性中的this可以访问组件实例的data属性，从而计算出完整的姓名。

小程序中的this

在小程序中，this同样指向的是当前代码执行的上下文，但是跟Vue有些不同之处。小程序中的this在不同的上下文中指向的对象可能会有所不同。

页面事件中的this

在小程序的页面事件中，this有时候指向的是页面实例，有时候指向的是事件对象。比如在onLoad()方法和onUnload()方法中，this指向的都是页面实例，在其他事件中，this则指向事件对象。

Page({
  data: {
    message: 'Hello'
  },
  onLoad() {
    console.log(this.data.message) // 此时的this指向页面实例
  },
  onClick(event) {
    console.log(event.target.dataset.id)
    console.log(this.data.message) // 此时的this指向事件对象
  }
})

在上面的例子中，在页面的onLoad()方法中，this指向的是页面实例，可以访问页面实例的数据；而在页面的onClick()事件中，this则指向事件对象，而不是页面实例，不能直接访问页面实例的数据。如果需要访问页面实例的数据，需要通过保存this的方式来解决。

Page({
  data: {
    message: 'Hello'
  },
  onLoad() {
    const self = this // 保存this
    wx.request({
      url: '/api/data',
      success(res) {
        console.log(self.data.message) // 使用保存的this
      }
    })
  },
  onClick(event) {
    console.log(event.target.dataset.id)
    const self = this // 保存this
    wx.showToast({
      title: self.data.message, // 使用保存的this
      icon: 'none'
    })
  }
})

在上面的例子中，在页面的onLoad()方法和onClick()事件中都保存了this，并且在回调函数中使用了保存的this来访问页面实例的数据。

组件事件中的this

在小程序的组件事件中，this指向的是组件实例，可以访问组件的各种属性和方法。和Vue类似，需要注意使用场景下的this作用域。

Component({
  data: {
    message: 'Hello'
  },
  attached() {
    console.log(this.data.message)
  },
  methods: {
    showMessage() {
      console.log(this.data.message)
    },
    async fetchData() {
      const self = this // 保存this
      const response = await fetch('/api/data')
      response.json().then(function(data) {
        console.log(self.data.message) // 使用保存的this
      })
    }
  }
})

在上面的例子中，组件中的attached()方法和methods中的方法中的this都指向组件实例，可以访问组件的各种属性和方法。需要注意的是，在方法的回调函数中使用this时，需要保存this到一个变量中，以便在回调函数中使用。

总结

本文详细讲解了在Vue和小程序中的this的用法，以及需要注意的地方。在Vue中，this指向的是组件实例，可以访问组件的各种属性和方法；在小程序中，this指向的对象在不同的上下文中可能会有所不同，需要根据具体场景进行判断和处理。正确理解和使用this关键字对于编写高质量的Vue和小程序代码非常重要。