深入响应式原理

    其实前端开发最重要的 2 个工作,一个是把数据渲染到页面,另一个是处理用户交互。Vue 把数据渲染到页面的能力我们已经通过源码分析出其中的原理了,但是由于一些用户交互或者是其它方面导致数据发生变化重新对页面渲染的原理我们还未分析。

    考虑如下示例:

    1. el: '#app',
    2. data: {
    3. message: 'Hello Vue!'
    4. methods: {
    5. changeMsg() {
    6. this.message = 'Hello World!'
    7. })

    在分析前,我们先直观的想一下,如果不用 Vue 的话,我们会通过最简单的方法实现这个需求:监听点击事件,修改数据,手动操作 DOM 重新渲染。这个过程和使用 Vue 的最大区别就是多了一步“手动操作 DOM 重新渲染”。这一步看上去并不多,但它背后又潜在的几个要处理的问题:

    • 我需要修改哪块的 DOM?

    • 我需要对数据每一次的修改都去操作 DOM 吗?