Vue 2.0的学习笔记: Vue中的响应式

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

上一节学习了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中的响应式

在这里,我们可以看到Vue自动添加了响应式gettersetter。当你在实例化一个Vue实例时传入一个data对象时,Vue会遍历所有属性并将它们转换为gettersetter。当你使用Vue时,这是完全透明的,除非你深入到Vue的内部工作中,否则你不会注意到这个。

那么这些gettersetter是什么意思呢?简单地说,它们就是当数据属性发生变化时DOM会更新的原因。使用这些响应式,Vue可以检测何时更改,以及何时访问属性。最重要的是,它们允许Vue跟踪数据属性之间的依赖关系。

为了更详细地讲一下,我准备了一张图,用这张图来说明我刚才所说的。

Vue中的响应式

首先,我们有包含每个数据属性的gettersetter函数的数据。当调用setter时,它为数据属性设置一个新值,并通知一个观察者,它被挂载到Vue实例上。这个观察者负责对数据变化做出响应。当某些东西发生变化时,它通过调用渲染函数来触发模板重新渲染,这个函数基本上是一个负责重新渲染一个Vue实例或组件的函数。这对我们来说,并不重要,所以也不在这里阐述过多,但重要的是重新渲染模板。当渲染或处理模板时,会更新所谓的虚拟DOM。这也是DOM更新之前的步骤。而这里其中的原理,我们后续再深入学习。当渲染时,数据属性会被“触摸”,这意味着getter函数被调用。

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-reactivity.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部