Vue中data的this指向问题

最近在做自己的项目时遇到一个问题：

export default {
    data(){
        return{
            id:this.$route.params.id,
            musicMessage:[],
            musiclist:{
                 title:null,
                 author:null,
                 url: "https:www.baidu.cn/netease/url?id="+this.id,  
                 pic: "https:www.baidu.cn/netease/pic?id="+this.id,
                 lrc: "https:www.baidu.cn/netease/lrc?id="+this.id
            },
            path:"https:www.baidu.cn/netease/song?id="+this.id
        }
    },
    methods:{
        getMusicMessage(){
            this.$http.get(this.path).then(result=>{
                if(result.body.code===200){
                    this.musiclist.title=result.body.data.songs[0].name
                    this.musiclist.author=result.body.data.songs[0].ar[0].name
                    console.log("成功")
                }else{
                    console.log("失败")
                }
            })
        }
    },
    created(){
       this.getMusicMessage();
    }
}

需求：在data return{...}就将url，pic等初始化完毕，使用字符串拼接+id。

想法很天真，现实很残酷，url的输出结果是:https://v1.itooi.cn/netease/url?id=undefined，pic与lrc也类似。也就是说在data(  return {   })中使用this.id的值是undefined----这个id不存在。

 为什么？？？让我们来一步步的探究下data中this的指向

export default {
    data(){
        return {
            id:1382350505,
            url:this
        }
    },
    created(){
        console.log(this.id)   
        console.log(this.url)
    }
}

打开开发者工具：

可以发现，在data中定义的url的指向为这个组件对象，但是在正常的Vue实例对象中

  var vm=new Vue({
        el:"#app",
        data:{
            msg:this
        },
        created(){
            console.log(this.msg)
        }
    })

对于vue实例来说data中的this指向的是window，对于vue组件来说this指向的是该组件对象

但是在组件的data中为什么this指向的是Vue.component，赋值时指向的却不是同一个对象呢？

 

个人猜测：应该是在赋值的过程中：url:this.id的过程中发生了隐式的this对象丢失，所以导致this.id指向的是未知的对象。

解决办法：

1. 在created(){}中创建一个 var _this=this保存初次进入到created的this对象(此对象为组件实例)

2. 在created()中进行赋值操作，形如url:....+this.id  改为url:....+_this.id

export default {
    data(){
        return{
    //不在data中进行带有this的操作，改为在钩子函数中进行
            id:this.$route.params.id,
            musicMessage:[],
            musiclist:{
                 title:null,   
                 author:null,
                 url: null,  
                 pic: null,
                 lrc: null
            },
            path:null
        }
    },
    methods:{
        getMusicMessage(){
            this.$http.get(this.path).then(result=>{
                if(result.body.code===200){
                    this.musiclist.title=result.body.data.songs[0].name
                    this.musiclist.author=result.body.data.songs[0].ar[0].name
                    console.log("成功")
                }else{
                    console.log("失败")
                }
            })
        }
    },
    created(){
        //在created()中进行this操作
        var _this=this;    //保存this一开始指向的对象
        _this.path="https://v1.itooi.cn/netease/song?id="+_this.id
        _this.musiclist.url="https://v1.itooi.cn/netease/url?id="+_this.id
        _this.musiclist.pic="https://v1.itooi.cn/netease/pic?id="+_this.id
        _this.musiclist.lrc="https://v1.itooi.cn/netease/lrc?id="+_this.id
        _this.getMusicMessage();
    },
    components:{
        aplayer:aplayer
    }
}