余小鱼的博客

I'm Still Here

0%

响应式原理模拟

发表于 更新于 置顶 | 分类于 18k

mvvm响应式原理

Vue.js是当前比较火的JavaScript MVVM（Model View ViewModel），数据，视图，视图模型）库，它跟以往的不同之处在于，之前更多的是手动操作Dom，现在是以数据为驱动，本篇文章通过对数据驱动、数据响应式的核心原理、发布订阅模式、观察者模式这几个知识点的学习，然后模拟vue响应式原理，实现一个简单小版本的Vue。

数据驱动

说到数据驱动，首先对数据响应式、双向绑定、数据驱动 这三个模块进行一个简单介绍

  • 数据响应式
    数据响应式中的数据指的是数据模型，数据模型仅仅是普通的JavaScript对象，数据响应式的核心指的是当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率。
  • 双向绑定
    数据改变，视图改变；视图改变，数据也随之改变；我们可以使用v-model在表单元素上创建双向数据绑定。
  • 数据驱动
    这个是Vue最独特的特性之一，让我们在开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图的。

    数据响应式的核心原理

    Vue2.x

    Vue2.x的核心是通过Object.defineProperty把数据转成getter/setter让Vue能够追踪依赖，在数据被访问和修改时，可以进行进行数据劫持通知变更。
  • Vue2.x响应式原理
  • MDN-Object.defineProperty
  • Object.defineProperty 是 ES5 中一个无法 shim（在一个旧的环境中模拟出一个新 API ，而且仅靠旧环境中已有的手段实现，以便所有的浏览器具有相同的行为）的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
  • Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+，即是 ie9 及更高的版本。经过测试，Vue 的核心框架 vuejs本身，以及生态的官方核心插件（VueRouter、Vuex等）均可以在 ie9 上正常使用。解决方案是使用 babel-polyfill，它可以将 es6 的代码翻译成低版本浏览器可以识别的 es5 代码.

Object.defineProperty基本使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>defineProperty</title>
</head>
<body>
    <div id="app">
        hello
    </div>
    <script>
        // 模拟 Vue中的data选项
        let data = {
            msg: 'Hello'
        }
        // 模拟vue实例
        let vm = {}
        // 数据劫持：当访问者或者访问vm中成员的时候，做一些干预操作
        // 三个参数：1.对象   2.对象增加的属性  3.属性描述
        Object.defineProperty(vm, 'msg', {
            // 可枚举（可遍历）
            enumerable: true,
            // 可配置（可以使用delete删除，或可以通过 defineProperty 重新定义）
            configurable: true,
            // 当获取值的时候执行
            get(){
                console.log('get:',data.msg)
            },
            // 当设置值的时候执行
            set(newValue){
                console.log('set:',newValue)
                if(newValue == data.msg){
                    return
                }
                data.msg = newValue
                // 数据更改，更新DOM的值
                document.querySelector('#app').textContent = data.msg
            }
        })
    </script>
</body>
</html>

在控制台通过vm.msg获取值的时候，触发了get的方法，通过vm.msg='xxx',触发了set的方法，效果如下：
控制台展示
以上代码模拟的是对一个对象中一个属性msg的转换getter/setter，那么如果一个对象中多个属性需要转换getter/setter如何处理呢？
思路如下：通过 Object.keys()遍历，然后再转换成vm的setter/getter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>defineProperty</title>
</head>
<body>
    <div id="app">
        hello
    </div>
    <script>
        // 模拟 Vue中的data选项
        let data = {
            msg: 'Hello',
            count: 100
        }
        // 模拟vue实例
        let vm = {}

        proxyData(data)

        function proxyData(data){
            // 遍历data对象中的所有属性
            Object.keys(data).forEach(key=>{
                // 把data 中的属性，转换成vm的setter/getter
                Object.defineProperty(vm, key, {
                    enumerable: true,
                    configurable: true,
                    get(){
                        console.log('get:', key, data[key])
                        return data[key]
                    },
                    set(newValue){
                        console.log('set:', key, newValue)
                        if(newValue === data[key]){
                            return
                        }
                        data[key] = newValue
                        // 数据更改，更新DOM的值
                        document.querySelector('#app').textContent = data[key]
                    }
                })
            })
        }
    </script>
</body>
</html>

Vue3.x

Vue3.x核心的是通过Proxy把数据转成getter/setter让Vue能够追踪依赖。

  • MDN-Proxy
  • 直接监听对象，并非属性
  • ES6 中新增，IE不支持，性能由浏览器优化（比Object.defineProperty好）

使用如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        hello
    </div>
    <script>
        // 模拟Vue 中 data选项
        let data = {
            msg: 'hello',
            count: 10
        }
        // 模拟Vue实例
        let vm = new Proxy(data, {  // 第一个参数：代理对象， 第二参数：执行代理行为的函数
            // 当访问vm 的成员会执行 
            // 两个参数，1: 代理的目标对象，2:要访问的哪个属性
            get(target, key){
                console.log('set, key:', key, target[key])
                return target[key]
            },
            // 当设置vm 的成员会执行
            // 三个参数： 1:代理的目标对象，2:设置的哪个属性， 3:设置的新的值
            set(target,key,newValue){
                console.log('set,key:', key, newValue)
                if(target[key] === newValue){
                    return
                }
                target[key] = newValue
                document.querySelector("#app").textContent = newValue
            }
        })
    </script>
</body>
</html>

发布订阅模式 & 观察者模式

发布订阅模式

通俗理解，假设存在一个“信号中心”，某个任务执行完毕，就向信号中心“发布”一个信号，其他任务可以向信号中心“订阅”这个信号，从而知道什么时候自己可以开始执行，这就叫发布/订阅模式。

  • 订阅者
  • 发布者
  • 信号中心

在Vue中的事件机制和Node中的事件就是给予发布订阅模式的，下面兄弟组件通信过程为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    // eventBus.js
    // 事件中心
    let eventHub = new Vue();

    // 组件 ComponentA.vue
    // 发布者
    addTodo: function(){
        // 发布消息（事件）
        eventHub.$emit('add-todo', { text: this.newTodoText })
        this.newTodoText = ''
    }

    // 组件 ComponentB.vue
    //  订阅号
    created: function(){
        // 订阅消息（事件）
        eventHub.$on('add-todo',this.addTodo )
    }
</script>
Vue自定义事件的实现

页面中事件使用写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    // vue 自定义事件
    let vm =  new Vue()
    // vm内部的变量是一个对象的形式，对象的属性是事件的名称，对象的值是事件处理函数
    // vm内部：{'click':[fn1,fn2], 'change':['fn3']}

    // 注册事件（订阅消息）
    vm.$on('dataChange', ()=>{
        console.log('dataChange')
    })

    vm.$on('dataChange', ()=>{
        console.log('dataChange1')
    })

    // 触发事件（发布消息）
    vm.$emit('dataChange')
    
    // 当通过vm.$emit触发事件的时候，就会去内部去找到对应的属性，然后去执行对应属性后面的函数
</script>

实现方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script>
    // 事件触发器
    class EventEmitter{
        constructor(){
            // { 'click':[ fn1, fn2 ], 'change':[ fn ] }
            this.subs = Object.create(null)
        }
        // 注册事件  eventType:事件名称  handler: 事件函数
        $on(eventType, handler) {
            // 判断上面的 { 'click':[ fn1, fn2 ], 'change':[ fn ] } 对象刚开始的时候有没有值，
            // 有值就直接设置进去，
            // 没有值就设置成空数组
            this.subs[eventType] = this.subs[eventType] || []
            this.subs[eventType].push(handler)
        }

        // 触发事件
        $emit(eventType) {
            if(this.subs[eventType]){
                this.subs[eventType].forEach(handler => {
                    handler()
                });
            }
        }
    }
    // 测试
    let em = new EventEmitter()
    em.$on('click', ()=>{
        console.log('click1')
    })

    em.$on('click', ()=>{
        console.log('click2')
    })

    em.$emit('click')
</script>

打开浏览器在控制台中查看，打印出了click1、click2

观察者模式

  • 观察者模式（订阅者）–Watcher
    • update(): 当事件发生时，具体要做的事情
  • 目标（发布者）–Dep
    • subs数组：存储所有的观察者
    • addsub(): 添加观察者
    • notify(): 当事件发生，调用所有观察者的update方法
  • 没有事件中心

简单实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
    // 发布者--目标
    class Dep {
        constructor (){
            // 记录所有的订阅着
            this.subs = []
        }
        // 把订阅着添加到subs数组里
        addSub(sub){
            if(sub && sub.update){
                this.subs.push(sub)
            }
        }
        // 当事件发生的时候通知所有的订阅者，调用所有的订阅者update方法
        notify(){
            this.subs.forEach(sub=>{
                sub.update()
            })
        }
    }
    // 订阅者--观察者
    class Watcher{
        update(){
            consolel.log('update')
        }
    }

    // 测试
    let dep = new Dep()
    let watcher = new Watcher()

    // 将订阅者添加到发布者中，让发布者记录下来所有的观察者
    dep.addSub(watcher)
    dep.notify()
</script>

总结：

  • 观察者模式是由具体目标调度，比如当前事件触发，Dep就会去调用观察者的方法，所以观察者模式的订阅者与发布者之间存在依赖的
  • 发布/订阅模式由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在
    image

模拟Vue响应式原理

前面的 数据响应式原理、发布/订阅模式、观察者模式都了解之后，将前面的这些方法结合起来，然后模拟一个简单的Vue，在准备模拟开发一个Vue前，首页要对vue的整体结构有个认识，结构如下：
image
主要实现 Vue、Observer、Dep、Watcher、Compiler 五种，接着具体分析

Vue

  • 负责接收初始化的参数（选项），把data中的成员注入到Vue实例
  • 负责把data中的属性注入到Vue实例，转换成getter/setter
  • 负责调用observer监听data中所有属性变化
  • 负责调用compiler解析指令/差值表达式

创建一个minVue/index.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mini Vue</title>
</head>
<body>
    <div id="app">
        <h1>差值表达式</h1>
        <h3>{{ msg }}</h3>
        <h3>{{ count }}</h3>
        <h1>v-text</h1>
        <div v-text="msg"></div>
        <h1>v-model</h1>
        <input type="text" v-model="msg">
        <input type="text" v-model="count">
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data:{
                msg: 'hello',
                count: 1000
            }
        })
    </script>
</body>
</html>

创建一个minVue/js/vue.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
class Vue{
    constructor(options){
        // 1.通过属性保存选项的数据
        this.$options = options || {}
        this.$data = options.data || {}
        this.$el = typeof options.el === 'string'?document.querySelector(options.el):options.el 
        // 2.把data中的成员转换成getter/setter，注入到vue实例中
        this._proxyData(this.$data)
        // 3.调用Observer对象，监听数据变化
        // 4.调用compiler对象，解析指令和差值表达式
    }
    // 代理数据 
    _proxyData(data){
        // 遍历data中的所有属性
        Object.keys(data).forEach(key => {
            // 注意：这里的this是上面constructor里面调用函数时候的this，也就是vue实例
            
            // 把data的属性注入到vue实例中
            Object.defineProperty(this, key, {
                enumerable: true,
                configurable: true,
                get(){
                    return data[key]
                },
                set(newValue){
                    if(newValue === data[key]){
                        return
                    }
                    data[key] = newValue
                }

            })
        });
    }
}

Observer

  • 负责把data选项中的属性转换成响应式数据进行监听
  • 如果data中的某个属性是对象，把该属性转换成响应式数据
  • 如有变化可拿到最新值并通知Dep

创建minVue/js/observer.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
class Observer{
    constructor(data){
        this.walk(data)
    }
    // 遍历对象所有属性
    walk(data){
        // 1.判断data是否是对象
        if(!data || typeof data !== 'object'){
            return
        }
        // 2.遍历data对象的所有属性
        Object.keys(data).forEach(key=>{
            this.defineReactive(data, key, data[key])
        })
    }

    // 调用Object.defineProperty 把属性转成getter 和setter
    // 三个参数： 1.对象  2.key属性  3.属性对应的值
    defineReactive(obj, key, val){
        let that = this
        // 如果val是对象，把val内部的属性转换成响应式
        this.walk(val)

        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            get(){
                return val   // 不能传obj[key],不然会出现死递归，通过传第三个参数val闭包来解决
            },
            set(newValue){
                if(newValue === val){
                    return
                }
                val = newValue
                // 如果新赋值的属性是对象进行响应式
                that.walk(newValue)
                
                // 发送通知
            }

        })
    }
}

在vue.js文件中调用Observer对象，监听数据变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class Vue{
    constructor(options){
        // 1.通过属性保存选项的数据
        this.$options = options || {}
        this.$data = options.data || {}
        this.$el = typeof options.el === 'string'?document.querySelector(options.el):options.el 
        // 2.把data中的成员转换成getter/setter，注入到vue实例中
        this._proxyData(this.$data)
        // 3.调用Observer对象，监听数据变化
        new Observer(this.$data)
        // 4.调用compiler对象，解析指令和差值表达式
    }
    // 代理数据 
    _proxyData(data){
        // 遍历data中的所有属性
        Object.keys(data).forEach(key => {
            // 注意：这里的this是上面constructor里面调用函数时候的this，也就是vue实例
            
            // 把data的属性注入到vue实例中
            Object.defineProperty(this, key, {
                enumerable: true,
                configurable: true,
                get(){
                    return data[key]
                },
                set(newValue){
                    if(newValue === data[key]){
                        return
                    }
                    data[key] = newValue
                }

            })
        });
    }
}

Compiler

  • 负责编译模版，解析指令/差值表达式
  • 负责页面的首次渲染
  • 当数据变化后重新渲染试图

创建一个minVue/js/compiler.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
class Compiler{
    constructor(vm){
        this.el = vm.$el
        this.vm = vm
        this.compile(this.el)
    }
    // 编译模版，处理文本节点和元素节点
    compile(el){
        let childNodes = el.childNodes
        Array.from(childNodes).forEach(node=>{
            // 处理文本节点
            if(this.isTextNode(node)){
                this.compileText(node)
            }else if(this.isElementNode(node)){
                // 处理元素节点
                this.compileElement(node)
            }

            // 判断node节点，是否是子节点，如果有子节点，要递归调用compile
            if(node.childNodes && node.childNodes.length){
                this.compile(node)
            }
        })
    }
    // 编译元素节点，处理指令
    compileElement(node){
        console.log(node.attributes)
        // 遍历所有的属性节点
        Array.from(node.attributes).forEach(attr=>{
            // 判断是否是指令
            let attrName = attr.name
            if(this.isDirective(attrName)){  // 判断属性是否是指令（ 以 v- 开头 ）
                // v-text -->  text
                attrName = attrName.substr(2)
                let key = attr.value
                this.update(node, key, attrName)  // 判断什么样的指令，对应的处理方法
            }
        })
    }

    update(node, key, attrName){
        let updateFn = this[attrName + 'Updater']  // 用于判断使用哪一个处理指令的函数
        updateFn && updateFn(node, this.vm[key])   // 对应的处理方法
    }

    // 处理 v-text 指令
    textUpdater(node, value){
        node.textContent = value
    }

    // 处理v-model指令
    modelUpdater(node, value){
        node.value = value
    }

    // 编译文本节点，处理差值表达式
    compileText(node){
        console.dir(node)  // 以对象形式打印
        // {{ msg }}  去正则表达式匹配差值表达式
        let reg = /\{\{(.+?)\}\}/
        // 获取文本内容
        let value = node.textContent
        if(reg.test(value)){
            let key = RegExp.$1.trim()   // 获取到的是正则中 (.+?) 匹配到值，去除空格
            node.textContent = value.replace(reg, this.vm[key])   // 文本节点中的插值表达式替换（替换花括号中值） 
        }

    }
    // 判断元素属性是否是指令
    isDirective(attrName){
        return attrName.startsWith('v-')  
    }
    // 判断节点是否是文本节点
    isTextNode(node){
        return node.nodeType === 3
    }
    // 判断节点是否是元素节点
    isElementNode(node){
        return node.nodeType === 1
    }
}

在vue.js文件中，第四步需要调用compiler对象，解析指令和差值表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class Vue{
    constructor(options){
        // 1.通过属性保存选项的数据
        this.$options = options || {}
        this.$data = options.data || {}
        this.$el = typeof options.el === 'string'?document.querySelector(options.el):options.el 
        // 2.把data中的成员转换成getter/setter，注入到vue实例中
        this._proxyData(this.$data)
        // 3.调用Observer对象，监听数据变化
        new Observer(this.$data)
        // 4.调用compiler对象，解析指令和差值表达式
        new Compiler(this)
    }
    // 代理数据 
    _proxyData(data){
        // 遍历data中的所有属性
        Object.keys(data).forEach(key => {
            // 注意：这里的this是上面constructor里面调用函数时候的this，也就是vue实例
            
            // 把data的属性注入到vue实例中
            Object.defineProperty(this, key, {
                enumerable: true,
                configurable: true,
                get(){
                    return data[key]
                },
                set(newValue){
                    if(newValue === data[key]){
                        return
                    }
                    data[key] = newValue
                }
            })
        });
    }
}

Dep（Dependency）

  • 收集依赖，添加观察者（watcher）
  • 通知所有观察者
    image
    建minVue/js/dep.js文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    class Dep {
        constructor () {
            // 存储所有的观察者
            this.subs = []
        }
        // 添加观察者
        addSub(sub){
            if(sub && sub.update){
                this.subs.push(sub) 
            }
        }
        // 发送通知
        notify(){
            this.subs.forEach(sub=>{
                sub.update()
            })
        }
    }
    然后在js/observer.js中收集依赖，发送通知
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    class Observer{
        constructor(data){
            this.walk(data)
        }
        // 遍历对象所有属性
        walk(data){
            // 1.判断data是否是对象
            if(!data || typeof data !== 'object'){
                return
            }
            // 2.遍历data对象的所有属性
            Object.keys(data).forEach(key=>{
                this.defineReactive(data, key, data[key])
            })
        }

        // 调用Object.defineProperty 把属性转成getter 和setter
        // 三个参数： 1.对象  2.key属性  3.属性对应的值
        defineReactive(obj, key, val){
            let that = this
            // 负责收集依赖，并发送通知
            let dep = new Dep()

            // 如果val是对象，把val内部的属性转换成响应式
            this.walk(val)

            Object.defineProperty(obj, key, {
                enumerable: true,
                configurable: true,
                get(){
                    // 收集依赖
                    Dep.target && dep.addSub(Dep.target)
                    
                    return val   // 不能传obj[key],不然会出现死递归，通过传第三个参数val闭包来解决
                },
                set(newValue){
                    if(newValue === val){
                        return
                    }
                    val = newValue
                    // 如果新赋值的属性是对象进行响应式
                    that.walk(newValue)

                    // 发送通知
                    dep.notify()
                }
            })
        }
    }

    Watcher

  • 当数据变化出发依赖，dep通知所有的Watcher实例更新视图
  • 自身实例化的时候往dep对象中添加自己
    image

建js/watcher.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class Watcher{
    constructor(vm, key, cb ){
        this.vm = vm 
        // data中的属性名称
        this.key = key 
        // 回调函数负责更新视图
        this.cb = cb

        // 把watcher对象记录到Dep类的静态属性target
        Dep.target = this
        // 触发get方法，在get方法中会调用addSub
        this.oldValue = vm[key]

        Dep.target = null  // 添加过后 设置为空，防止重复添加
    }
    // 当数据发生变化的时候更新视图
    update(){
        let newValue = this.vm[this.key]
        if(this.oldValue === newValue ){
            return
        }
        this.cb(newValue)  // 更新视图
    }
}

oberser.js文件中添加收集依赖，Dep.target && dep.addSub(Dep.target)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
class Observer{
    constructor(data){
        this.walk(data)
    }
    // 遍历对象所有属性
    walk(data){
        // 1.判断data是否是对象
        if(!data || typeof data !== 'object'){
            return
        }
        // 2.遍历data对象的所有属性
        Object.keys(data).forEach(key=>{
            this.defineReactive(data, key, data[key])
        })
    }

    // 调用Object.defineProperty 把属性转成getter 和setter
    // 三个参数： 1.对象  2.key属性  3.属性对应的值
    defineReactive(obj, key, val){
        let that = this
        // 负责收集依赖，并发送通知
        let dep = new Dep()

        // 如果val是对象，把val内部的属性转换成响应式
        this.walk(val)

        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            get(){
                // 收集依赖
                Dep.target && dep.addSub(Dep.target)   // Dep.target 也就是watcher对象

                return val   // 不能传obj[key],不然会出现死递归，通过传第三个参数val闭包来解决
            },
            set(newValue){
                if(newValue === val){
                    return
                }
                val = newValue
                // 如果新赋值的属性是对象进行响应式
                that.walk(newValue)

                // 发送通知
                dep.notify()
            }

        })
    }
}

回到Oberver.js中，创建插值表达式时候创建watcher对象，当数据改变更新视图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 编译文本节点，处理差值表达式
compileText(node){
    console.dir(node)  // 以对象形式打印
    // {{ msg }}  去正则表达式匹配差值表达式
    let reg = /\{\{(.+?)\}\}/
    // 获取文本内容
    let value = node.textContent
    if(reg.test(value)){
        let key = RegExp.$1.trim()   // 获取到的是正则中 (.+?) 匹配到值，去除空格
        
        // 文本节点中的插值表达式替换（替换花括号中值） 
        node.textContent = value.replace(reg, this.vm[key])   
        
        // 创建watcher对象，当数据改变更新视图
        new Watcher(this.vm, key, (newValue)=>{
            node.textContent = newValue
        })
    }
}

在处理指令的方法compiler.js文件中创建watcher对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
update(node, key, attrName){
    let updateFn = this[attrName + 'Updater']  // 用于判断使用哪一个处理指令的函数
    // updateFn && updateFn(node, this.vm[key])   // 对应的处理方法

    // 这里的写法是针对watcher调用时候获取compiler的this还有key做的改写
    updateFn && updateFn.call(this, node, this.vm[key], key)   
}

// 处理 v-text 指令
textUpdater(node, value, key){
    node.textContent = value
    // 创建watcher对象，当数据改变更新视图
    new Watcher(this.vm, key, (newValue)=>{
        node.textContent = newValue
    })
}

// 处理v-model指令
modelUpdater(node, value, key){
    node.value = value
    // 创建watcher对象，当数据改变更新视图
    new Watcher(this.vm, key, (newValue)=>{
        node.value = newValue
    })
}

总结：

  • 整体一个流程图：
    mvvm响应式原理

  • Vue构造函数中做了哪些事情：
    首先记录下来options传过来的选项，接着调用_proxyData把data中的属性注入到Vue实例中，接着开始创建Observer和Compiler，Observer作用是数据劫持，在Observer里面，把data里面的属性转换成getter和setter，当数据变化的时候，也就是触发setter方法的时候，通知变化，告诉Dep数据变化了，要调用notify方法，notify方法中要调用watcher的update，watcher的update方法中就会去更新视图，这是数据变化的时候更新视图，当创建watcher对象的时候，会将当前的watcher对象添加到Dep的Subs数组中，也就是收集依赖，也收集Dep依赖的这些watcher，让Dep将这些依赖记录下来，Observer创建完之后，接下来创建Compiler对象，Compiler对象作用是解析指令，解析插值表达式，页面首次加载的时候，会调用Compiler里面的相关方法去更新试视图，同时，在Compiler里面还要去订阅数据的变化绑定更新函数（订阅数据的变化：意思是在Compiler处理插值表达式的方法和处理指令的方法中，除了更新视图以外，还要去创建一个watcher对象，也就是订阅数据的变化，当数据变化的时候，Dep会通知watcher，绑定更新函数：当我们创建一个watcher对象的时候，要传递一个回调函数，在这个回调函数中去更新视图，当页面首次加载的时候，是通过Compiler去更新视图，当数据变化的时候是通过watcher去更新视图）。

--------- 本文结束感谢您的阅读 ---------
分享