Vue.js 响应式原理(自己手动实现一个vue.js) 【1-3】

最新推荐文章于 2024-06-14 13:50:37 发布

JIseven

最新推荐文章于 2024-06-14 13:50:37 发布

阅读量364

点赞数

分类专栏： vue 文章标签： vue.js html javascript proxy property

本文链接：https://blog.csdn.net/qq_37833745/article/details/120314072

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1: 数据驱动

【数据响应式，双向绑定，数据驱动】

数据响应式：数据模型仅仅是普通的JS对象，当我们修改数据时，视图会进行更新，避免了频繁的DOM操作，提高开发效率
双向绑定：数据改变，视图改变；视图改变，数据也改变；使用v-module实现双向数据绑定
数据驱动：只关注数据本身，不必关心数据是如何渲染到视图的

2: 数据响应式的核心原理【将data中的成员转换成getter和setter，注入到vue实例中】

1: Vue基础结构

<!DOCTYPE html>
<html lang="cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>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/dep.js"></script>
  <script src="./js/watcher.js"></script>
  <script src="./js/compiler.js"></script>
  <script src="./js/observer.js"></script>
  <script src="./js/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        count: 20,
        items: ['a', 'b', 'c']
      }
    })
  </script>
</body>
</html>

2: Vue2.x (Object.defineProperty）

  Vue 2.x 深入响应式原理 👈

  Object.defineProperty 👈

浏览器兼容IE8以上（不包含IE8）

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property， Vue2.x 是使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

  Object.defineProperty( obj, key, { } ) get()   set(newVal)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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'
        }

        // 模拟vue实例
        let vm = {}
       
        Object.defineProperty(vm, 'msg', {
            // 是否可枚举[可遍历]
            enumerable: true,
            // 是否可配置（可以使用 delete 删除，可以通过 defineProperty 重新定义）
            configurable: true,
            // 当获取值的时候执行
            get () {
               console.log('get: ', data.msg)
               return data.msg
            },
            // 设置当前值的时候执行
            set (newValue) {
                console.log('set: ', newValue)
                if (data.msg == newValue) {
                    return
                }
                data.msg = newValue
                // 数据更改，更新 DOM 的值
                document.querySelector("#app").textContent = data.msg
            }
        })
        // 测试
        vm.msg = 'hello newVue' // 设置值
        console.log(vm.msg) // 获取值
    </script>
</body>
</html>

如果data里面有多个成员，如何实现呢？？？？

实现方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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',
            count: 90
        }

        // 模拟vue实例
        let vm = {}
        
        proxyData(data)
        
        function proxyData(data) {
            // 遍历data中的所有属性,Object.keys(data)===>[msg, count]
            Object.keys(data).forEach(key => {
                // 把 data 中的属性，转换成 vm 的 setter/setter
                Object.defineProperty(vm, key, {
                    // 是否可枚举[可遍历]
                    enumerable: true,
                    // 是否可配置（可以使用 delete 删除，可以通过 defineProperty 重新定义）
                    configurable: true,
                    // 当获取值的时候执行
                    get () {
                        console.log('get: ', data[key])
                        return data[key]
                    },
                    // 设置当前值的时候执行
                    set (newValue) {
                        console.log('set: ', newValue)
                        if (newValue == data[key]) {
                            return
                        }
                        data[key] = newValue
                        // 数据更改，更新 DOM 的值
                        document.querySelector("#app").textContent = data[key]
                    }
                })
            })
        }
        // 测试
        vm.msg = 'hello newVue' // 设置值
        console.log(vm.msg) // 获取值
        vm.count = 100 // 设置值
        console.log(vm.count) // 获取值
    </script>
</body>
</html>

3: Vue3.x ( es6 的 Proxy)

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property， Vue3.x 是使用 Proxy 把这些 property 全部转为 getter/setter。不过Proxy兼容性不太好

Proxy(data, { }) get(target, key) setter(target, key, newVal)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3.x-proxy</title>
</head>
<body>
    <div id="app">
        hello
    </div>
    <script>
        // 模拟 Vue 中的 data 选项
        let data = {
            msg: 'hello',
            count: 90
        }

        // 模拟vue 实例
        // new Proxy(target, handler)[target:要使用 Proxy 包装的目标对象, handler:一个通常以函数作为属性的对象]
        // 此时vue实例，已经成为了一个Proxy实例，我们对其的操作，都会被Proxy拦截。
        let vm = new Proxy(data, {
            // 执行代理行为的函数
            // 当访问vm成员时候执行
            get (target, key) {
               console.log('get')
               return target[key]
            },
            // 当设置vm成员时候会执行
            set (target, key, newValue){
                if (newValue == target[key]) {
                   return
                }
                target[key] = newValue
                document.querySelector("#app").textContent = target[key]
            }
        })

        // 测试
        vm.msg = 'hello world'
        console.log(vm.msg)
    </script>
</body>
</html>

3: 实现事件响应式【发布订阅模式和观察者模式】

发布订阅模式【应该场景父子组件传值】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布订阅模式</title>
</head>
<body>
    <script>
        // 事件触发器
        class EventEmitter {
            constructor () {
                // this.subs = { click: [fn1, fn1, fn3], change: [fn] }
                // Object.create(prototype) ：prototype是该对象的原型，我们只是创建一个对象，没有原型所以设为null
                this.subs = Object.create(null)
            }
            // 注册事件(订阅消息)
            $on (eventType, handler) {
                // 判断this.subs有没有需要注册的事件，如果有直接获取该事件对应的方法数组，并往数组里添加新的方法，
                // 如果this.subs没有需要注册的事件，则增加该事件，并给该事件添加一个对应的空数组，并往数组里添加新的方法
                this.subs[eventType] = this.subs[eventType] || []
                this.subs[eventType].push(handler)
            }
            // 触发事件(发布消息)
            $emit (eventType) {
                // 从this.subs里找到该触发事件，并循环遍历该事件对应的方法，并执行方法
                if (this.subs[eventType]) {
                    this.subs[eventType].forEach(handler => {
                        handler()
                    })
                }
            }
        }
        // 测试
        let em = new EventEmitter()
        em.$on('click', () => {
           console.log(111)
        })
        em.$on('click', () => {
           console.log(222)
        })
        em.$emit('click')
    </script>
</body>
</html>

观察者模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>观察者模式</title>
</head>
<body>
    <script>
        // 发布者【目标】
        class Dep {
            constructor () {
                // 记录所有订阅者
                this.subs = []
            }
            // 添加订阅者
            addSub (sub) {
                // 订阅者存在，且订阅者的updta事件存在
                if (sub && sub.update) {
                   this.subs.push(sub)
                }
            }
            // 发布通知
            notify () {
               this.subs.forEach(sub => {
                 sub.update()
               })
            }

        }

        // 订阅者1【观察者】
        class watcher {
            update () {
                console.log('update')
            }
        }
        // 订阅者2【观察者】
        class watcher2 {
            update () {
                console.log('update2222')
            }
        }
        // 测试
        let dep = new Dep()
        let wc = new watcher()
        let wc2 = new watcher2()
        
        // 添加订阅者
        dep.addSub(wc)
        dep.addSub(wc2)
        // 触发，发布通知订阅者执行update
        dep.notify()
    </script>
</body>
</html>

4: 模拟Vue响应式原理

模拟Vue响应式原理分析

Vue
把 data 中的成员注入到 Vue 实例，并且把 data 中的成员转成 getter/setter
Observer
能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知 Dep
Compiler
解析每个元素中的指令/插值表达式，并替换成相应的数据
Dep
添加观察者(订阅者)(watcher)，当数据变化通知所有观察者
Watcher
数据变化更新视图

数据发生变化后，会重新对页面渲染，这就是 Vue 响应式，那么这一切是怎么做到的呢？想完成这个过程，Vue 知道自己需要做三件事情：

侦测数据的变化

首先有个问题，在Javascript中，如何侦测一个对象的变化 ? ?

其实有2种办法可以侦测到变化：

使用 Object.defineProperty 和 ES6的Proxy 这就是进行数据劫持或数据代理。

收集视图依赖了哪些数据

这里涉及订阅者 Dep 和观察者 Watcher

数据变化时，自动“通知”需要更新的视图部分，并进行更新

对应专业俗语分别是：

数据劫持 / 数据代理 (Observer)
依赖收集 (Dep)
发布订阅模式

vue.js

功能

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

结构：

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 => {
            // 把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.js

功能

负责把 data 需哪些中的属性转化成响应式数据
data 中的某个属性也是对象，把该属性转化为响应式数据
数据发送通知

结构：

// Observer作用：负责吧data选项中的属性转化为响应式数据
class Observer {
    constructor (data) {
        this.walk(data)
    }
    // 将data中的数据进行循环递归
    walk (data) {
        // 1: 判断data是不是对象
        if (!data || typeof data !== 'object') {
           return
        }
        // data: { msg: 'Hello Vue', person: { name: 'zs'} }；Object.keys(data) ====> [msg, person]
        // 2: 遍历data对象的所有属性,
        Object.keys(data).forEach(key => {
            this.defineReactive(data, key, data[key])
        })
    }
    // 通过Object.defineProperty()将data属性转化为getter和setter方法来监听数据的变化，实现响应式数据
    defineReactive (obj, key, val) {
       // 负责收集依赖，并发送通知
       let dep = new Dep()

       // 递归子属性：如果val是对象==>{ name: 'zs' } 把val内部的属性转化成响应式数据
       this.walk(val)

       Object.defineProperty(obj, key, {
            enumerable: true,  //可枚举（可以遍历）
            configurable: true, //可配置（比如可以删除,和使用defineProperty重新定义）
            get () {
                // 收集依赖：
                // 当获取数据时，会触发reactiveGetter函数把当前的 Watcher 对象（存放在 Dep.target 中）收集到 Dep 类中去
                // 修改data对象成员的值，则会触发 reactiveSetter 方法，通知 Dep 类调用 notify 来触发所有 Watcher 对象的 update 方法更新对应视图。
                Dep.target = dep.addSub(Dep.target)

                
              // return obj[key]
                 return val
            },
            set (newVal) {                
                if (newVal === val) {
                   return
                }
                val = newVal
                 // data: {msg: 'Hello Vue'}; vm.msg = { test: 'Hello' }
                this.walk(newVal) //如果赋值是一个对象，也要递归子属性,将子属性转化为getter和setter方法来实现监听数据的变化
                // 发送通知：执行 watcher 的 update 方法
                dep.notify()
            }
       })
    }
}

监听data数据变化实现方法有 2 种：

方法1: Object.defineProperty实现:

Vue 通过设定对象属性的 setter / getter 方法来监听数据的变化，通过 getter 进行依赖收集，而每个setter 方法就是一个观察者，在数据变更的时候通知订阅者更新视图

上面这段代码的主要作用在于：walk 这个函数传入一个 obj（需要被追踪变化的对象），通过遍历所有属性的方式对该对象的每一个属性都通过 defineReactive 处理,以此来达到实现侦测对象变化。值得注意的是，walk 会进行递归调用。

那我们如何侦测 Vue 中 data 中的数据？？方法如下:
// 在vue.js中
class Vue {
    /* Vue构造类 */
    constructor(options) {
        this.$data = options.data || {};
        observer(this.$data);
    }
}
【问题思考】：

Object.defineProperty无法检测到对象属性的添加或删除(如data.location.a=1)。

这是因为 Vue 通过 Object.defineProperty来将对象的 key 转换成getter/setter的形式来追踪变化，但 getter/setter只能追踪一个数据是否被修改，无法追踪新增属性和删除属性。

如果是删除属性，我们可以用vm.$delete实现，
那如果是新增属性，该怎么办呢？

1）可以使用 Vue.set(location, a, 1) 方法向嵌套对象添加响应式属性;
2）也可以给这个对象重新赋值，比如 data.location = {...data.location,a:1}

方法2：Proxy实现

Proxy 的代理是针对整个对象的，而不是对象的某个属性，因此不同于 Object.defineProperty 的必须遍历对象每个属性，Proxy 只需要做一层代理就可以监听同级结构下的所有属性变化，当然对于深层结构，递归还是需要进行的。此外Proxy支持代理数组的变化

收集依赖

1: 为什么要收集依赖?

我们之所以要观察数据，其目的在于当数据的属性发生变化时，通知那些曾经使用了该数据的地方，进行视图的更新, 我们只有通过收集依赖才能知道哪些地方依赖我的数据，以及数据更新时派发更新

2: 依赖收集是如何实现的？

其中的核心思想就是“ 事件发布订阅模式 ”【父子组件传值，$on, $emit】

接下来我们先介绍两个重要角色-- 订阅者 Dep 和观察者 Watcher

Dep.js 发布者

前言：收集依赖需要为依赖找一个存储依赖的地方，为此我们创建了Dep,它用来收集依赖、删除依赖和向依赖发送消息等。说得具体点，它的主要作用是用来存放 Watcher 观察者对象。我们可以把 Watcher理解成一个中介的角色，数据发生变化时通知它，然后它再通知其他地方。

Dep 类

功能：

收集依赖，添加观察者(订阅者)(watcher)
通知所有观察者(订阅者)

class Dep {
    constructor() {
       // 储存所有观察者：Watcher对象的数组
       this.subs = []
    }
    
    // 添加观察者：在subs中添加一个Watcher对象
    addSub (sub) {
        if (sub && sub.update) {
            this.subs.push(sub)
        }
    }

    // 发送消息通知：通知所有Watcher对象更新视图 
    notify () {
        this.subs.forEach(sub => {
           sub.update()
        })
    }
}

以上代码主要做两件事情：

用 addSub 方法可以在目前的 Dep 对象中增加一个 Watcher 的订阅操作；
用 notify 方法通知目前 Dep 对象的 subs 中的所有 Watcher 对象触发更新操作。

所以当需要依赖收集的时候(observer.js的getter中)调用 addSub，

当需要派发更新的时候(observer.js的setter中)调用 notify。

调用也很简单：
let dp = new Dep()
dp.addSub(sub => {
   console.log('emit here')
})
dp.notify()

Watcher.js 观察者 (订阅者)

为什么引入Watcher ?

当属性发生改变时，我们要通知用到数据的地方，而且使用这个数据的地方有很多，并且类型不也一致，有可能是模版，也有可能是用户写的一个watch，这时候需要一个能集中收集这些情况的类，我们在依赖收集阶段只收集这个封装好的类的实例进来，通知也只通知它一个，再由它负责通知其他地方。

依赖收集的目的是将观察者(订阅者) watcher 对象存放到当前闭包中的 Dep 的 subs 中，形成如下所示的这样一个关系（图参考《剖析 Vue.js 内部运行机制》）。

收集依赖

所谓的依赖，其实就是 Watcher。
至于如何收集依赖，总结起来就一句话，在observer.js里 (getter中收集依赖，在setter中触发依赖)。
先收集依赖，即把用到该数据的地方收集起来，然后等属性发生变化时，把之前收集好的依赖循环触发一遍就行了。
具体来说，当外界通过Watcher读取数据时，便会触发 getter 从而将当前Watcher 添加到依赖中，哪个 Watcher 触发了getter，就把哪个 Watcher 收集到 Dep 的subs中。当数据发生变化时，会循环依赖列表，把所有的 Watcher 都通知一遍。

最后我们对 defineReactive 函数进行改造，在自定义函数中添加依赖收集和派发更新相关的代码,实现了一个简易的数据响应式。

class Watcher {
    constructor(vm, key, cb) {
       this.vm = vm
       // data中的属性名称
       this.key = key
       // 回调函数负责更新视图
       this.cb = cb

        // 1: 把watcher对象记录到Dep类的静态属性target
        Dep.target = this
        // 2: 触发get方法，在get方法中会调用addSub
        this.oldValue = vm[this.key]
        Dep.target = null // 防止多次赋值
    }
    // 当数据发生变化的时候更新视图
    update () {
        let newValue = this.vm[this.key]
        if (newValue == this.oldValue) {
            return
        }
        this.cb(newValue)
    } 
}

当 render function 被渲染的时候,

读取所需对象的值，会触发 reactiveGetter 函数把当前的 Watcher 对象（存放在 Dep.target 中）收集到 Dep 类中去【Dep.target && Dep.addSub(Dep.target) 】。

之后如果修改对象的值，则会触发 reactiveSetter 方法，通知 Dep 类调用 notify 来触发所有 Watcher 对象的 update 方法更新对应视图【new Dep().notify() 】。。

compiler.js

功能:

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

结构:

class Compiler {
    constructor (vm) {
       this.el = vm.$el
       this.vm = vm
       this.compiler(this.el)
    }
    // 编译模版: 处理 文本节点 和 元素节点
    compiler (el) {
       // 获取模版的所有子节点
       let childNodes = el.childNodes
       //  Array.from(childNodes): 将伪数组转化为真正的数组
       Array.from(childNodes).forEach(node => {
            // 需要注意：箭头函数不会改变this的指向
            if (this.isTestNode(node)) {
                // 处理文本节点
                this.compilerText(node)
            } else if (this.isElementNode(node)) {
               // 处理元素节点
               this.compilerElemnet(node)
            }

            // 判断node节点， 是否有子节点，如果有要递归调用compiler
            if (node.childNodes && node.childNodes.length) {
                this.compiler(node)
            }
       })
    }

    // 编译元素节点， 处理指令 v-module v-show 。。。。
    compilerElemnet (node) {
        // 遍历所有属性节点
        Array.from(node.attributes).forEach(attr => {
            // 判断是否是指令
            let attrName = attr.name
            if (this.isDirective(attrName)) {
                // v-text ===> text
                attrName = attrName.substr(2)
                // key是data的属性名
                let key = attr.value
                this.update(node, key, attrName)
            }
        })
    }
    update (node, key, attrName) {
       let updateFn = this[attrName + 'Updater']
       // 注意这里的this指向问题：使用call()重定义this指向Compiler
       updateFn && updateFn.call(this, node, this.vm[key], key)
    }
    // 处理v-text 指令
    textUpdater (node, value, key) {
        node.textContent = value
        new Watcher(this.vm, key, (newValue) => {
            node.textContent = newValue
        })
    }
    // 处理 v-module 指令
    modelUpdater (node, value, key) {
        node.value = value
        new Watcher(this.vm, key, (newValue) => {
            node.value = newValue
        })

        // 双向绑定 视图改变，数据也改变
        node.addEventListener('input', () => {
            this.vm[key] = node.value
        })
    }

    // 编译文本节点，处理差值表达式 {{ }}
    compilerText (node) {
        // {{  msg }}
        let reg = /\{\{(.+?)\}\}/
        let value = node.textContent
        if (reg.test(value)) {
            // RegExp.$1 : 获取(.+?)里的值 就是差值表达式是{{}}里面的内容
            // RegExp.$1.trim(): 去除多余空格
            let key = RegExp.$1.trim()
            node.textContent = value.replace(reg, this.vm[key])
        }
    }
    // 判断元素是否是指令
    isDirective (attName) {
        return attName.startsWith('v-')
    }
    // 判断节点是否是文本节点
    isTestNode (node) {
       return node.nodeType === 3
    }
    // 判断节点是否是元素节点
    isElementNode (node) {
       return node.nodeType === 1
    }
}

index.html

<!DOCTYPE html>
<html lang="cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <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/dep.js"></script>
  <script src="./js/watcher.js"></script>
  <script src="./js/compiler.js"></script>
  <script src="./js/observer.js"></script>
  <script src="./js/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        count: 100,
        person: { name: 'zs' }
      }
    })
    console.log(vm.msg)
    // vm.msg = { test: 'Hello' }
    vm.test = 'abc'
  </script>
</body>
</html>

总结

问题思考：

给属性重新赋值成对象，是否是响应式的？是响应式
给Vue实例新增一个成员是否是响应式的？不是响应式

要实现新增成员是响应式

猜想：会执行observe.js的defineReactive()方法，给新成员添加getter/setter，使其变成响应式数据

在 new vue() 后，Vue 会调用 _init 函数进行初始化，也就是init过程，在这个过程中Data通过_proxyData(this.$data)将 Data 数据注册到Vue实例上，然后将Data数据通过Observer转化为getter/setter形式，来对数据变化追踪，当被设置的对象被读取的时候会执行 getter 函数, 当被赋值时候会执行 setter 函数，并发送通知,
当 render function 执行时候，因为会读取所需对象的值，所以会触发 getter 函数从而将watcher 添加到依赖中进行依赖收集，收集依赖到Dep的subs中
在修改对象值的时候，会触发对应的 setter，setter 通知之前依赖收集得到的Dep中的每一个 watcher ，告诉他们自己的值改变了，需要重新渲染试图，这时候 watcher就会调用 update 函数来更新视图
页面首次加载，Compiler会编译模版，渲染页面，更新视图

参考：

JIseven

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 响应式原理(自己手动实现一个vue.js) 【1-3】

1: 数据驱动【数据响应式，双向绑定，数据驱动】数据响应式：数据模型仅仅是普通的JS对象，当我们修改数据时，视图会进行更新，避免了频繁的DOM操作，提高开发效率双向绑定：数据改变，视图改变；视图改变，数据也改变；使用v-module实现双向数据绑定数据驱动：只关注数据本身，不必关心数据是如何渲染到视图的2: 数据响应式的核心原理 1: Vue基础结构<!DOCTYPE html><html lang="cn">...
复制链接

扫一扫