【Vue | 补洞 | 09】数据代理

1. 背景

  数据代理在 Vue 应用中如何体现？

  这里先将结论给出，假设没有数据代理，我们在插值语法中访问数据时，就需要如下代码所示：

<template>
	<h1>{{ _data.a }}</h1>
	<h1>{{ _data.b }}</h1>
</template>

<script>
export default {
	data() {
        a: 1,
        b: 2
    }	
}
</script>

  而 Vue 做了数据代理之后，让我们得以用以下简洁的语法访问数据：

<template>
	<h1>{{ a }}</h1>
	<h1>{{ b }}</h1>
</template>

  Vue 在底层是如何做到的？

2. 原理

  要谈数据代理，首先得从 Vue 的构造函数说起。如下代码所示，我们将 Vue 实例输出看下内容：

const vm = new Vue({
    el: '#app',
	data: {
        a: 1
    }
})

console.log(vm);

  展开可看到 _data，这个属性相当于声明 vm 实例时，配置的 data 属性

  当我们再展开 _data 时，可以看到，里面存放的就是数据 a；其中包含了 get 和 set，说明数据 a 经过 vue 的处理，已经变成了响应式，可以监听到其变化。

  但如果 vue 只做到这一步，我们访问 a 时就需要通过 vm._data.a 去访问。

  所以 vue 通过数据代理，将 _data 中的数据，"复制"了一份到 vm 身上，并且为其配置了 get 和 set，如下图所示

  因此，我们才能通过 vm.a 直接就访问到数据 a

  而在一个页面组件中的 <template>，其本身就是一个 vm 实例对象，因此可以在插值语法中，通过如下代码访问 a

<template>
	<h1>{{ a }}</h1>
</template>

3. 总结

• Vue 会将响应式数据放在 Vue 实例对象下的 _data 中
• 数据代理，便是将 _data 中的数据拷贝一份到 Vue 实例对象上，供我们直接通过 this.数据 进行调用
• 在 <template> 模板中，可以省略 this，因此通过 {{数据}} 可直接访问