Vue 中 this 的理解和使用

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

vue中的methods和computed和watch他们都是vue本身的方法所以只要他们使用普通函数定义this当然指向他们的调用者即this

函数定义方式	this指向	说明
普通函数 () {}	vue实例	普通函数的this指向的是它的调用者
箭头函数 () => {}	windows	箭头函数中的this指向的是外部函数的this指向

两个重要的小原则：

1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等)，最好写成箭头函数,这样this的指向才是vm或组件实例对象。

样例

methods: {
    a: function() {
        console.log(this)    // vm
        return
    },
    b: () => {
        console.log(this)    // windows
        return
    }
}

---

定时器用箭头函数普通函数

箭头函数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>