Vue实例中this的指向问题

首先让我么看一些代码，先不要往下看，你自己先想一下这里的this分别指的是什么。

<script>
        var msg = '我是window下的msg'
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '我是vm实例中的msg'
            },
        

created() {
            this.showMsg() //this1
            this.showMsg2() //this2
        },
            methods: {
                showMsg() {
                    var msg = '我是方法中的msg'
                    setTimeout(function(){
                        $('#id1').html(this.msg) //this3
                    }, 1000)
                },  
                showMsg2() {
                    var msg = '我是方法中的msg'
                    setTimeout(()=>{
                        $('#id2').html(this.msg) //this4
                    }, 2000)
                },
            },
        })
    </script>

接下来让我们一齐探讨，上面的代码中有4个this，我们接下来就来探讨一下这些this分别指的是什么内容。
其实注意观察，我们可以把上面代码代码中出现的this简单分为3类：
（一）钩子函数中的this;
created钩子函数

created() {
                this.showMsg() //this1
                this.showMsg2() //this2
            },

（二）methods中普通函数中的this;
methods中的showMsg普通函数

showMsg() {
                    var msg = '我是方法中的msg'
                    setTimeout(function(){
                        $('#id1').html(this.msg) //this3
                    }, 1000)
                },

（三）methods中箭头函数中的this;
methods中的showMsg箭头函数

showMsg2() {
                    var msg = '我是方法中的msg'
                    setTimeout(()=>{
                        $('#id2').html(this.msg) //this4
                    }, 2000)
                },

接下来我们就来分析以上三种this分别指向的是什么？
1.在vue官方文档中写道：

在Vue所有的生命周期钩子方法（如created，mounted， updated以及destroyed）里使用this，this指向调用它的Vue实例

这一句话可谓是盖棺定论的一句，不会有任何特殊情况发生。因此，以后我们遇到写在任意一个钩子函数中的this的时候，它们都毫无例外地指向我们自己的vue实例。所以：

created() {
                this.showMsg() //this1指的是vm实例
                this.showMsg2() //this2指的是vm实例
            },

2.对于第二类this,我们可以先看一下它的输出结果：

showMsg() {
                    var msg = '我是方法中的msg'
                    setTimeout(function(){
                        $('#id1').html(this.msg) //this3 ==='我是window下的msg'
                    }, 1000)
                },

输出的结果为全局变量，从这里我们可以看出这里的this指的已经不是我们的vm实例了，如果是vm实例就不应该是这个结果。我们知道，对于普通函数（包括匿名函数）this指的是其直接调用者，也就是说谁调用了我这个函数，this指的就是谁。而且在非严格模式下（‘use strict’），如果没有直接调用者，this指的就是window.
我们可以在以上代码中加上一段，验证一下：

<p id='id3'></p>
...
$('#id3').html('我是id3' + this.msg)

我在页面中又添加了一个p标签，并且在vm实例外添加
$(’#id3’).html(‘我是id3’ + this.msg)
其输出结果为 === ‘我是id3我是window下的msg’，这里的this默认指向的就是window,所以对于第二类this，指向的也是window
3.第三类this,同样先看一下其输出结果

showMsg2() {
                    var msg = '我是方法中的msg'
                    setTimeout(()=>{
                        $('#id2').html(this.msg) //this4 === '我是vm实例中的msg'
                    }, 2000)
                },

这里很明确地表明，此处的this指的是我们的vue实例vm,所以该类this指的就是vm实例，不是window.这是因为在箭头函数中没有自己的this,它的指向步骤可以概括为两步：
（1）找到定义函数的上下文（即包含箭头函数最近的函数或者对象），这里就是showMsg2()函数了；
（2）上下文所处的父上下文即为this，showMsg2()函数位于vm实例中的methods中，this自然指的就是我们的vm实例，所以第三类this指的就是vue实例。
好了，以上也是我自己的小小的总结，希望对大家有一点点帮助吧！喜欢就好评点赞收藏****关注吧。。。