Vue回调函数中的this

2025/4/25

示例

一个例子------计数器,通过this来操作数据。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <title>回调函数中的this</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>计数器:{{count}}</h1>
        <button @click="addOne">加一</button>
    </div>
    
    <script>
        new Vue({
            el : "#app",
            data:{
                msg: "回调函数中的this",
                count:0
            },
            methods:{
                addOne(){
                    this.count++
                }
            }
        })
    </script>
    
</body>
</html>

Vue(vm) 和 this的关系

html 复制代码
methods:{
    addOne(){
        this.count++
        console.log(this === vm)
    }
}

所以不难发现。其实vm(vue实例对象) 和this是一个东西,所以其实我们也可以使用

html 复制代码
vm.count++

来实现,但是一般更加常使用this。this就是vm,vm可以访问count通过数据代理。

箭头函数

html 复制代码
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>计数器:{{count}}</h1>
        <button @click="addOne1">加一1</button>
        <button @click="addOne2">加一2</button>
    </div>
    
    <script>
        const vm = new Vue({
            el : "#app",
            data:{
                msg: "回调函数中的this",
                count:0
            },
            methods:{
                addOne1(){
                    this.count++
                },
                addOne2:()=>{
                    this.count++
                }
            }
        })
    </script>
    
</body>

当使用箭头函数之后,计数器失效。因为箭头函数中没有this,箭头函数中的this是从父级作用域当中继承过来的。对于当前程序来说,父级作用域是全局作用域:window。

普通函数的this指向取决于函数的调用方式。当函数作为对象的方法调用时,this指向该对象;在全局作用域中调用函数,this指向全局对象。addOne1是一个普通函数,能够根据调用方式来决定this的指向,上述的调用是作为Vue实例对象的方法调用 ,所以this指向该Vue实例

但箭头函数不具备自己独立的this绑定,它的this是在定义时从父级作用域继承而来的,且不会被调用方式影响。addOne2 箭头函数定义于 methods 对象里 ,不过 methods 对象本身并非一个函数作用域 ,所以**addOne2 的父级作用域就是全局作用域**。而全局作用域中并没有属性count。

所以在methods中尽量的不使用箭头函数,我们常需要在回调函数中使用到this和vm实例。

相关推荐
此乃大忽悠5 分钟前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户990450177800913 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家16 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架