如果是vue實例本身的屬性和方法,那么this指向就是vue實例本身,比如methods對象,computed對象,watch對象里的方法。

方法名(){}寫,就代表this指向是vue實例,

()=>{}箭頭函數的方式定義方法,則this指向window,

因為箭頭函數中的this指向的是外部函數的this指向,普通函數的this指向的是它的調用者,而vue中的methods和computed和watch他們都是vue本身的方法所以只要他們使用普通函數定義this當然指向他們的調用者即this

兩個重要的小原則:

1.所有被Vue管理的函數，最好寫成普通函數，這樣this的指向才是vm或組件實例對象。

2.所有不被Vue所管理的函數（定時器的回調函數、ajax的回調函數等)，最好寫成箭頭函數,這樣this的指向才是vm或組件實例對象。

---

例子

用普通函數，this指向vue實例

箭頭函數，this指向window

?

---

定時器用箭頭函數普通函數

箭頭函數this等于父級函數this指向，下面的定時器必須用箭頭函數，不能用普通函數。

因為普通函數的this是誰調用就指向誰，而定時器到時調用不是vue調用的，而是js引擎調用的，所以這里寫普通函數會指向window。而箭頭函數沒有自己的this，它是在定義的時候（不用調用就知道this指向誰了）就等于父級函數this指向，這里的父級就是firstName()，是Vue管理的函數，this指向vue實例

<script type="text/javascript"> const vm = new Vue({el : " #root",data:{firstName:'張',lastName:'三',fullName:'張-三'}，//監視屬性watch:{//簡寫形式firstName(val){//當firstName修改后，1秒后觸發計時器修改fullName//不寫成setTimeout(function(){this.fullName = val +'-'+ this.lastName},1000);setTimeout(()=>{this.fullName = val +'-'+ this.lastName},1000);}} }) <script>

?

總結

以上是生活随笔為你收集整理的Vue中的this的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。