Vue通过
数据代理
,让我们更方便地调用响应式数据!
欢迎持续关注新系列文章[Vue 补洞]
系列,用久了 Vue2 总有一些遗漏的知识点,一起通过该系列文章一起查漏补缺!
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
,因此通过{{数据}}
可直接访问