前端基础之《Vue（4）—响应式原理》

csj50

已于 2025-04-11 16:32:32 修改

阅读量236

点赞数 3

分类专栏：前端基础文章标签：前端 vue

于 2025-04-11 16:31:49 首次发布

本文链接：https://blog.youkuaiyun.com/csj50/article/details/147142122

版权

前端基础专栏收录该内容

59 篇文章

订阅专栏

一、什么是响应式

1、响应式英文reactive
当你get/set一个变量时，你有办法可以“捕获到”这种行为。

2、一个普通对象和一个响应式对象对比

（1）普通对象

<script>
    // 这种普通对象不具备响应式
    var obj1 = {
        a: 1,
        b: 2
    }
</script>

普通对象，当我们获取、修改属性的时候没办法捕获get/set行为（这种普通对象是不具备响应式的）：

（2）响应式对象

<script>
    var obj2 = {}
    var a = 1
    var b = 2
    // 给obj2这个对象添加一个新属性
    Object.defineProperty(obj2, 'a', {
        get() {
            console.log(`有人访问了a`)
            return a
        },
        set(val) {
            console.log(`有人修改了a`)
            a = val
        }
    }) // 给obj2对象加一个a属性
    
    Object.defineProperty(obj2, 'b', {
        get() {
            console.log(`有人访问了b`)
            return b
        },
        set(val) {
            console.log(`有人修改了b`)
            b = val
        }
    }) // 给obj2对象加一个b属性
    
</script>

当获取、修改obj2属性的时候，会触发钩子函数。obj2对象多了get和set函数。obj2具有了响应式：

二、响应式原理

1、流程图

2、代码

<html>
<head>
    <title>响应式原理</title>
    
</head>
<body>
    输入：<input id="ipt" type="text" />
    输出：<h2 id="h2" style='display:inline-block;'></h2>
    <hr>
    <h1 id="h1"></h1>
    <button id="btn">自增</button>

    <script>
        // 这是模拟data选项（普通的对象）
        const data = {
            name: '张三',
            num: 1
        }

        // 这是模拟vue组件实例
        const app = {}

        // 对data进行遍历，['name', 'num']
        // 遍历完了把数组放到app上
        // 生命周期的第一阶段（劫持，就是添加get/set）
        Object.keys(data).forEach(k=>{
            Object.defineProperty(app, k, {
                // handle加劫持
                get() {
                    console.log(`getter ${k}`) // touch操作
                    return data[k]
                },
                set(val) {
                    console.log(`setter ${k}`) // notify操作
                    data[k] = val
                    
                    watcher(k) // 通知更新界面
                }
            })
        })

        // dep对象专门用于依赖收集的
        const dep = {
            name: [],
            num: []
        }

        // 生命周期的第二阶段（相当于挂载阶段）
        // Collect as Dependency依赖收集
        function init() {
            // 模拟v-model='name'
            dep['name'].push(() => { // 依赖收集
                document.getElementById('ipt').value = app.name // get功能
            })
            // 绑定input事件
            document.getElementById('ipt').addEventListener('input', ev => {
                app.name = ev.target.value // set功能
            })

            // 模拟v-text='name'
            dep['name'].push(() => {
                document.getElementById('h2').innerText = app.name // get功能
            })

            dep['num'].push(()=> {
                document.getElementById('h1').innerText = app.num // get功能
            })

            document.getElementById('btn').addEventListener('click', ev => {
                app.num++ //set功能
            })

            // 第一次更新DOM
            Object.keys(dep).forEach(k=>watcher(k))
        }

        // 封装一个Watcher
        function watcher(k) {
            dep[k].forEach(fn=>fn()) // 循环调用变量依赖的function
        }

        // 调用init
        init()
    </script>

</body>
</html>

3、说明
（1）生命周期的第一阶段（劫持，就是添加get/set）
"Touch"和Notify
（2）生命周期的第二阶段（相当于挂载阶段）
把DOM放在真实的DOM上渲染，Collect as Dependency依赖收集
收集的结果是得到一个Watcher，通过re-render更新DOM（以后变量有变化，我通知Watcher，让Watcher再去更新界面）
（3）依赖收集
我要改变表单的值，并且要push一个依赖

二、vue的响应式原理小结

1、正常的对象是没有办法做更新的，必须要给它加钩子，才能知道它被访问

2、解释几个重要概念
劫持：使用Object.defineProperty对data选项进行遍历并添加getter/setter的钩子
touch：当指令第一次与声明式变量绑定时，第一次触发声明式变量的get钩子
依赖收集：当第一次touch时，把当前声明式变量的更新方法添加到dep依赖数组中
watcher：与声明式变量对应的DOM方法
re-render：当声明式变量被set时，Vue通知watcher更新DOM

3、响应式原理
当vue组件被创建时，在生命周期的第一阶段，vue使用Object.defineProperty()对data选项进行遍历劫持并添加get/set钩子。
在生命周期第二阶段，指令第一次与声明式变量touch时，发生依赖收集，再调用当前组件的watch第一次更新DOM，DOM视图就显示出来了。
当声明式变量发生变化时，vue再次通知watcher更新视图，这就是响应式。