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

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

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

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

兩個重要的小原則:

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

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

---

例子

用普通函數(shù)，this指向vue實例

箭頭函數(shù)，this指向window

?

---

定時器用箭頭函數(shù)普通函數(shù)

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

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

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

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。