经验篇之vue中传值以及赋值问题

作为Vue非资深的学习者，在工作中使用vue的时候还是遇见的很多所谓的坑，打算总结一下；就在昨天PM找到我，给我看了一个bug，很是头疼的是，我看了半天代码就是看不出有什么问题，但是实现起来就是报错。先看一下场景：

这是详情页的tab栏，这里的大概逻辑就是从别的页面跳转到详情页并且需要选中虚拟服务器组这个tab栏，代码的逻辑是先获取详情页信息Detail，然后把detail这个对象以props的形式传递给虚拟服务器组这个子组件，

export default {
    props：['detail'],
    data(){
        return {
            type: this.detail.type
        }
    },
    methods: {
        XXX(){
        }
    }

}

我在这里多做了一步，就是讲props里面的属性赋值给了data里面的变量，但是如果我跳转到详情页后立即转到虚拟服务这个tab栏的时候，（此时会立即触发XXX方法，并且会使用type这个变量），此时回报错，就是type是未定义的？

解决方法是，直接将props中的detail变量直接拿来使用，不需要赋值给data中的变量，就不会出现这种情况。

深层的原因不清楚，但是初步断定是时间差的问题，在测试的时候发现，这种bug不是必然复现的，时好时坏，直接使用的话避免了这个问题。