Vue 3 - 'this' 无法访问/'this' 定位到错误的部分

Question

在 Vue 3 中，我试图从 mounted() 挂钩中的嵌套函数中定位 data() 函数中的属性。这是我的代码示例：

export default defineComponent({
    components: {
        ProgressTable
    },
    name: 'Sidebar',
    emits: ['remove-sidebar'],
    data () {
        return {
            userData: authStore.state,
            trackedSymptoms: []
        };
    },
    props: {

    },
    mounted () {
        const url = '...';
        const action = 'Progress-Tracking';
        const dispensaryId = this.userData.userData.dispensaryId;
        const customerId = this.userData.userData.customerId;
        const token = localStorage.getItem('jwt');

        const params = {
            action: action,
            dispensaryId: dispensaryId,
            customerId: customerId,
            token: token
        };

        axios({
            method: 'get',
            url: url,
            params: params,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
            .then(function (response) {
                this.trackedSymptoms = response.data.symptomTracking;
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
    }
});

在 Axios 代码中，这一行：

this.trackedSymptoms = response.data.symptomTracking;

如何定位 trackedSymptoms: [] 而不是定位上述行所在的函数？

Answer 1

您可以将匿名函数替换为箭头函数以不覆盖 this:

.then((response) => {
     this.trackedSymptoms = response.data.symptomTracking;
     console.log(response);
})

Answer 2

使用箭头函数是解决问题最快的方法，原因如下...

function(){} 和 ()=>{} 不是同一件事。在许多情况下，它们的行为方式相同，差异并不明显。然而，function(){} 改变了 this 的上下文，而 ()=>{} 使 this 保持在正确的上下文中。有时您希望实例发生变化（例如定义基于 class 的组件的方法）。

箭头函数是一个 ES6 特性，需要编译到 es5，如果你不能使用它并且你需要支持旧浏览器，你可以像这样手动将它的值与 .bind(this) 绑定:

    mounted () {
        //...

        axios({
            method: 'get',
            url: url,
            params: params,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
            .then(function (response) {
                this.trackedSymptoms = response.data.symptomTracking;
                console.log(response);
            }.bind(this))
            .catch(function (error) {
                console.log(error);
            }.bind(this));
    }

顺便说一句，请注意 mounted () 是如何定义的。这相当于 mounted: function()，如果您将其切换为 mounted: () =>，它将中断，因为 this 无法正确解析。

补充阅读

A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode ... src

Vue 3 - 'this' 无法访问/'this' 定位到错误的部分

Vue 3 - 'this' is unreachable / 'this' targets the wrong section

javascript

this

vuejs3