vue一段简单的代码出现奇怪的问题？

Question

<script src="https://unpkg.com/vue/dist/vue.js"></script>
   <div id="app">
     <p>{{ b.d }}</p>
     <button @click="show({b,isShow: true})">click</button>
   </div>
   <script>
       new Vue({
         el: '#app',
         data: {
           b:{
               c:1
           }
         },
         methods:{
             show(a) {
                 console.log('a的值 = ', a)
                 a.b.d = 2
             }
         }
       })
   </script>

第一次点击传进来的a

第二次点击传进来的a

第一个问题为什么两次点击传的参数会不同，第二次点击传的参数a有第一次方法赋值的d？

两次点击打印的值

第二个问题，第一次console显示的参数a怎么和第一次断点显示的不一样？多了个d。还有给d赋值是在console的下一行，怎么提前就赋值了？

Answer 1

你把b放在了a对象里啊，使用的是b对象的引用，也就是a.b和data里的b都是指向同一个地址。第一次点击后，对b赋了值，第二次当然就看到b的内容变了
console里打印对象，调用的是动态的，你去看的时候，第二次也点过了，内容就变了