Vue和ajax的this指针

最新推荐文章于 2024-07-12 17:50:49 发布

灵魂画手-编程如画

最新推荐文章于 2024-07-12 17:50:49 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web 文章标签： ajax vue

本文链接：https://blog.youkuaiyun.com/grape875499765/article/details/76849609

web 专栏收录该内容

25 篇文章

订阅专栏

本文探讨了在Vue项目中混用jQuery时遇到的问题：即Vue的生命周期钩子函数中的this指向问题。当使用jQuery的ajax请求时，由于作用域的原因，导致打印出来的this与Vue实例的this不一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了测试vue的生命周期钩子函数，于是写了如下代码，在测试的时候发现vue中的this指针和生成的对象的app不是一样的信息。
困惑了许久总算明白了，因为vue中嵌套了jquery写的ajax，所以打印的this是ajax的指针，不是vue对象的指针，所以二者必然不同，不如不在ajax代码中打印this的话，那肯定和app是一样的。

var app =new Vue({
    el: "#layout",
    data: function () {
        return {
            transactions: []
        }
    },
    beforeCreate: function () {
        $.ajax({
            type: "patch",
            url: "/transaction/curd/1/20",//获取1-20条
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                console.log("%c%s", "color:red","this " + this); //已被初始化
                console.log("%c%s", "color:red","app" + app); //已被初始化
            }
        });
    }
})