VUE全局this指向

前言

在很久很久之前我还是个菜鸡的时候，解决报错的时候，不幸看过一种关于this指向的写法，当时没记住，只知道有个这么个模糊的概念，然后今天晚上来了灵感，就写出来了，说到这个this指向问题，很多刚入行的前端同学应该多会碰到，那么今天就写一下关于全局this指向的代码，让我们的代码更加简洁。

传统写法

问题代码

<template>
    <div>
     	<div @click="test">按钮</div>
    </div>
</template>
<script>
	export default {
        name: "test",
        data(){
            return{
                testArr:[1,2,3,4,5],
                testData:"data"
            }
        },
        methods:{
			test(){
                this.testArr.forEach(function(value) {
                    console.log("===>",this.testData);
                });
            }
        }
    }
</script>

报错

既然说找不到testData，我们明明在data里挂载了testData数据，但是这里获取不到，这是因为这里经过forEach循环后this的指向变了，那么通常的解决方案就是声明一个let _this=this;的写法
解决

<script>
			test(){
                let _this=this;
                this.testArr.forEach(function(value) {
                    console.log("===>",_this.testData);
                });
            }
</script>

当然咯这种并没有问题，但是我们如果有很多方法都存在this指向问题的时候，那么我们的代码就会下面这样

<script>
			test1(){
                let _this=this;
                this.testArr.forEach(function(value) {
                    console.log("===>",_this.testData);
                });
            },
            test2(){
                let _this=this;
                this.testArr.forEach(function(value) {
                    console.log("===>",_this.testData);
                });
            },
            test3(){
                let _this=this;
                this.testArr.forEach(function(value) {
                    console.log("===>",_this.testData);
                });
            },
            test4(){
                let _this=this;
                this.testArr.forEach(function(value) {
                    console.log("===>",_this.testData);
                });
            }
          
</script>

假设test1、test2、test3、test4，都是业务代码，那么这里每次方法中都要声明let _this=this;就很烦！！！

VUE全局this指向

<template>
    <div>
     	<div @click="test">按钮</div>
    </div>
</template>
<script>
	let _this=null;
	export default {
        name: "test",
        data(){
            return{
                testArr:[1,2,3,4,5],
                testData:"data"
            }
        },
        created(){
            _this=this
        },
        methods:{
			test(){
                this.testArr.forEach(function(value) {
                    console.log("===>",_this.testData);
                });
            }
        }
    }
</script>

即使我们有再多存在this指向问题的代码也不需要每个方法中写let _this=this;代码了，直接通过外部创建的_this搞定