Vue.js 组件中 export default 里的 this 关键字解析

在 Vue.js 组件中，export default 里的 this 关键字有特定的含义和作用，理解它对于正确编写 Vue 组件至关重要。

this 的基本作用

在 Vue 组件的 export default 对象中，this 关键字指向当前 Vue 组件实例。这意味着：

1. 在方法(methods)中，this 可以访问：

   • 组件的数据(data)
   • 计算属性(computed)
   • 其他方法
   • 组件属性(props)
   • Vue 实例方法($emit, $nextTick 等)

2. 在生命周期钩子中，this 同样指向当前组件实例

常见使用场景

1. 在 methods 中使用 this

export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message) // 访问 data 中的数据
      this.doSomething()       // 调用其他方法
    },
    doSomething() {
      // 其他逻辑
    }
  }
}

2. 在生命周期钩子中使用 this

export default {
  created() {
    this.fetchData() // 调用 methods 中的方法
  },
  mounted() {
    console.log(this.$el) // 访问 DOM 元素
  }
}

3. 在计算属性中使用 this

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
}

注意事项

1. 箭头函数问题：箭头函数会继承父级作用域的 this，因此在 Vue 选项中避免使用箭头函数定义方法或计算属性：

   // 错误示例
   methods: {
    badMethod: () => {
      console.log(this) // 这里的 this 不是 Vue 实例
    }
   }
   

2. 回调函数中的 this：在异步回调或事件处理中，可能需要保存 this 引用：

   methods: {
    fetchData() {
      const vm = this // 保存 this 引用
      axios.get('/api/data').then(function(response) {
        vm.data = response.data // 使用保存的引用
      })
   
      // 或者使用箭头函数
      axios.get('/api/data').then(response => {
        this.data = response.data // 箭头函数继承 this
      })
    }
   }
   

3. 模板中的 this：在模板中访问数据或方法时，Vue 会自动解析 this，所以不需要显式使用：

   <!-- 不需要写 this.message -->
   <div>{{ message }}</div>
   
   <!-- 不需要写 this.handleClick -->
   <button @click="handleClick">Click</button>
   

总结

在 Vue 组件的 export default 中，this 关键字指向当前组件实例，通过它可以访问组件的所有属性、方法和 Vue 提供的特殊功能。正确理解和使用 this 是 Vue 开发的基础，特别是在处理组件状态和方法调用时。