VueJS -如何从方法内部的函数更新组件数据？

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '初始消息'
    };
  },
  methods: {
    updateMessage() {
      // 使用this关键字更新数据属性
      this.message = '更新后的消息';

      // 在方法内部定义的函数中使用this关键字更新数据属性
      setTimeout(function() {
        this.message = '延迟更新的消息'; // 这里的this指向的是函数的作用域，而不是Vue组件实例
      }, 1000);

      // 在方法内部定义的函数中使用另一个变量访问和更新数据属性
      var self = this;
      setTimeout(function() {
        self.message = '延迟更新的消息'; // 这里的self指向的是Vue组件实例
      }, 1000);
    }
  }
};
</script>