特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
上一节学习了Vue中的代理,知道了Vue中代理数据和方法,今天我们接着来了解Vue中的响应式。我们将使用上一篇中的示例来继续介绍Vue中响应式相关的知识。同样的,将大部分的时间用在浏览器的控制台上。
<div id="app">
<h1>Hello! {{ firstName }}</h1>
</div>
let app = new Vue({
el: '#app',
data () {
return {
firstName: '大漠',
lastName: 'W3cplus',
axisX: 1,
axisY: 2
}
},
methods: {
fullName: function () {
console.log( this.firstName + '_' + this.lastName )
}
},
computed: {
axisZ: function () {
return this.axisX + this.axisY
}
}
})
让我们输出Vue实例上的$data
属性。
在这里,我们可以看到Vue自动添加了响应式getter
和setter
。当你在实例化一个Vue实例时传入一个data
对象时,Vue会遍历所有属性并将它们转换为getter
和setter
。当你使用Vue时,这是完全透明的,除非你深入到Vue的内部工作中,否则你不会注意到这个。
那么这些getter
和setter
是什么意思呢?简单地说,它们就是当数据属性发生变化时DOM会更新的原因。使用这些响应式,Vue可以检测何时更改,以及何时访问属性。最重要的是,它们允许Vue跟踪数据属性之间的依赖关系。
为了更详细地讲一下,我准备了一张图,用这张图来说明我刚才所说的。
首先,我们有包含每个数据属性的getter
和setter
函数的数据。当调用setter
时,它为数据属性设置一个新值,并通知一个观察者,它被挂载到Vue实例上。这个观察者负责对数据变化做出响应。当某些东西发生变化时,它通过调用渲染函数来触发模板重新渲染,这个函数基本上是一个负责重新渲染一个Vue实例或组件的函数。这对我们来说,并不重要,所以也不在这里阐述过多,但重要的是重新渲染模板。当渲染或处理模板时,会更新所谓的虚拟DOM。这也是DOM更新之前的步骤。而这里其中的原理,我们后续再深入学习。当渲染时,数据属性会被“触摸”,这意味着getter
函数被调用。
如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-reactivity.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!