2025/4/25
向?
示例
一個例子——計數器，通過this來操作數據。
<!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的關系
methods:{addOne(){this.count++console.log(this === vm)}
}
所以不難發現。其實vm（vue實例對象）?和this是一個東西，所以其實我們也可以使用
vm.count++來實現，但是一般更加常使用this。this就是vm，vm可以訪問count通過數據代理。
箭頭函數
<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實例。
)
