Vue中组件this指向问题

提到vue的组件化开发，那么肯定会存在着data(){}用来存放数据，而一般使用的时候不能直接使用，而是需要用this来指向。

 var app = new Vue({
            el:"#app",
            data:{

            },
            components:{
                aa:{
                    template:'#aaa',
                    data(){
                        return{
                            message:'aaaaaa'
                        }
                    },
                    methods:{
                        word(){
                            console.log(this.message);
                            
                        }
                    }
                }
                
            }
        })

基本使用说完，那么说几种特殊情况。

当我们的方法中调用了定时器：

 methods:{
                        word(){
                            console.log(this.message);
                            if(this.message.length>0){
                                setInterval(function(){
                                    console.log(this.ccc);
                                },100)
                            }
                        }
                    }

此时可以正常输出message，但是ccc显示undefined，这是因为使用定时器时，this已经指向了window,而不是vue对象，所以自然无法找到了。解决方法很简单，提前保存this

methods:{
                        word(){
                            var that = this
                            console.log(this.message);
                            if(this.message.length>0){
                                setInterval(function(){
                                    console.log(that.ccc);
                                },100)
                            }
                        }
                    }

那么以后遇到undefined的情况就不用慌张啦，冷静判断this指向，提前保存this，就可以解决这类问题了，此类情况同样适用于小程序。
如wx.getStorage，my.getStorage