详解vue.js之props传递参数(2)

因此，可以发现，问题是出在了这一步

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

而要弄清楚问题的根源，就得弄清楚vue文档中深入响应式原理。

"在Vue实例的data选项中，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为 getter/setter"，"每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。"文档中说了这么一大堆，简单理解就是Vue将data选项中的vm.$data.a与DOM中的vm.a进行了双向绑定，即其中一个变化，另一个也会跟着变化。在Vue源码中是由defineReactive$$1函数实现的：

但在子其中主要是利用了Object.defineProperty的get和set方法实现了双向绑定。而在子组件中，pros数据和子组件的$data是通过如下方式联系在一起的：

tData: this.tableData

查询Vue源码可知this.tableData与tData之间仅仅是赋值，即"="关系

而上述的initData函数是在组件构建时候执行的，因此只会在create时执行一次。这也是为什么官方文档中"作为初始值传入"这一说法，因为他本就只会执行一次。当组件构建完成后，this.tableData与tData就没有半毛钱关系了，其中一个的变化并不会引起另一个变化。当然，这种说法并不准确，因为在上文中，我们动态改变父组件传入的total,子组件也"随之"改变，感觉就像是绑定在一起了啊，这又是怎么回事呢？

3.引用类型带来的假象

当然，我们还是要从官方文档出发来解决这个问题。文档中有这样一个提示：

这里就需要理解引用类型的概念，引用数据类型值指保存在堆内存中的对象。也就是，变量中保存的实际上的只是一个指针，这个指针指向内存中的另一个位置，该位置保存着对象。访问方式是按引用访问。例如一个js对象a,他在内存中的存储形式如下图所示：

var a = new Object();