vue2&vue3响应式

• 什么是响应式

  比如: 有一个info对象:info:{name:’dadaguai’,age:12} 一些函数中引用着info中的数据 比如foo函数 function foo() {console.log(info.name)} 当某一时刻,我手动修改了info中name的值,我想做到 foo函数会自动执行一遍, 这就是响应式

• vue3中响应式 看代码 看注释

    let activeReactiveFn = null
       class Depence {
           constructor() {
               // 为什么使用set 以为set里的数据不可重复 防止一个函数被多次收集
               this.reactiveFuns = new Set()
           }
           depend() {
               if (activeReactiveFn) {
                   this.reactiveFuns.add(activeReactiveFn)
               }
           }
           notify() {
               this.reactiveFuns.forEach(fn => fn())
           }
       }

       function watch(fn) {
           activeReactiveFn = fn
           // 先执行一次 这样可以在personProxy里的get里面 初始化相关dep
           fn()
           activeReactiveFn = null
       }

       function reactive(obj) {
           return new Proxy(obj, {
               get(target, key, receive) {
                   // 找到depence 
                   const dep = getDepence(target, key)
                   // 收集依赖
                   dep.depend()
                   return Reflect.get(target, key, receive)
               },
               set(target, key, newvalue, receive) {
                   // 找到depence
                   const dep = getDepence(target, key)
                   // 通知调用
                   dep.notify()
                   Reflect.set(target, key, newvalue, receive)
               }
           })
       }

       // 保存依赖  person --> {name:dep,age:dep}
       let weakmap = new WeakMap()

       function getDepence(target, key) {
           let map = weakmap.get(target)
           if (!map) {
               map = new Map()
               weakmap.set(target, map)
           }
           let dep = map.get(key)
           if (!dep) {
               dep = new Depence()
               map.set(key, dep)
           }
           return dep
       }


	//test
       const personProxy = reactive({
           name: 'wuyupei',
           age: 20
       })

       const student = reactive({
           name: 'lixu',
           age: 10
       })

       watch(function () {
           console.log('我是watchFn1--------', personProxy.name);
       })
       watch(function () {
           console.log('我是watchFn2--------', personProxy.age);
       })
       watch(function () {
           console.log(student.age);
       })
       personProxy.name = '哈哈哈'
       student.age = 11
//我是watchFn1-------- wuyupei
//我是watchFn2-------- 20
//10
//我是watchFn1-------- wuyupei
//10

vue3中使用的是Proxy 来代理对象,好处请看 –>Proxy-Api

• vue2的响应式

let activeReactiveFn = null
        class Depence {
            constructor() {
                // 为什么使用set 以为set里的数据不可重复 防止一个函数被多次收集
                this.reactiveFuns = new Set()
            }
            depend() {
                if (activeReactiveFn) {
                    this.reactiveFuns.add(activeReactiveFn)
                }
            }
            notify() {
                this.reactiveFuns.forEach(fn => fn())
            }
        }

        function watch(fn) {
            activeReactiveFn = fn
            // 先执行一次 这样可以在personProxy里的get里面 初始化相关dep
            fn()
            activeReactiveFn = null
        }

        function reactive(obj) {
            Object.keys(obj).forEach(key => {
                let value = obj[key]    
                Object.defineProperty(obj, key, {
                    get: function () {
                        const dep = getDepence(obj, key)
                        dep.depend()
                        return value
                    },
                    set: function (newvalue) {
                        value = newvalue
                        const dep = getDepence(obj, key)
                        dep.notify()
                    }
                })
            })
            return obj
        }

        // 保存依赖  person --> {name:dep,age:dep}
        let weakmap = new WeakMap()

        function getDepence(target, key) {
            let map = weakmap.get(target)
            if (!map) {
                map = new Map()
                weakmap.set(target, map)
            }
            let dep = map.get(key)
            if (!dep) {
                dep = new Depence()
                map.set(key, dep)
            }
            return dep
        }



        const personProxy = reactive({
            name: 'wuyupei',
            age: 20
        })

        const student = reactive({
            name: 'lixu',
            age: 10
        })

        watch(function () {
            console.log('我是watchFn1--------', personProxy.name);
        })
        watch(function () {
            console.log('我是watchFn2--------', personProxy.age);
        })
        watch(function () {
            console.log(student.age);
        })
        personProxy.name = '哈哈哈'
        student.age = 11

vue2使用的是Object.defineProperty…..