盐析白兔

这个屌丝很懒，什么也没留下！

热门标签

Vue2 及 Vue3 响应式原理(手写简版源码解析)_阅读vue2和vue3源码

作者：盐析白兔 | 2024-03-16 08:13:37

踩

阅读vue2和vue3源码

Vue2响应式原理

vue2 依赖于 object.defineProperty 监听对象变化更新视图

1. object.defineProperty(target,key,{}) 方法在原对象上修改或定义一个属性

第一个参数原目标对象

第二个参数原属性或新属性

第三个参数属性描述或属性存取

2.知道方法后

2.1 创建一个文件我这里用普通的html 文件为例创建 vue2.html 文件

2.2 <script> </script> 标签中定义一个方法 updateView 用来模拟更新视图，如下我们需求是当data对象的值发生改变时触发 updateView 更新视图


<script> 
        function updateView(){
         console.log('模拟更新视图')
        }
        let data = {name:'zs'}
        data.name = 'lisi'
 </script>

2.3 思考：我们需要改变对象属性的时候触发更新视图方法先拆解问题

2.3.1 先判断监听的属性必须是对象属性，并且给对象中的属性添加监听


// 定义一个function 作用就是判断当前是否为对象 如果是对象则添加属性监听 
// 如果不是对象则返回原数据
function observer(target){
        if(typeof target !== 'object' || target ===  null ){
            retrun target
        }
        for( let key in target ){
            defineReactive(target,key,target[key])
        }
}
 
// 定义一个function 作用只对对象添加属性监听方法
function defineReactive(target,key,value){
        object.defineProperty(target,key,{
                get(){    
                    retrun value
                },
                set(newValue){
                    updateView() // 当新的值储存时更新视图
                    value = newValue
                }        
 
        })
}

2.3.2 如果赋的值是个对象获取初始化的值是个对象则

let data = {name:'zs',age:{n:18}}
data.age = {num:20}

添加对象监听方法再执行一次 observer(value)


function defineReactive(target,key,value){
        +++ observer(value)
        object.defineProperty(target,key,{
                get(){    
                    retrun value
                },
                set(newValue){
                   +++ observer(newValue)
                    updateView()
                    value = newValue
                }        
 
        })
}

其实本质还是个递归

重点：由此可见vue2响应式一个缺陷

1.未定义的变量无法进行响应式的绑定

2.如果对象层级过深每次递归都往对象深层添加监听很消耗性能

2.3.3 监听时进行数组操作

let data = {name:'zs',age:[1,2,3]}

data.push(4)

数组操作的时候我们也需要更新页面

方法：在数组原型链上重写原型链方法添加重新刷新方法

Array.prototype 获取数组原型链方法
如果直接循环Array.prototype 添加方法会使数组的所有方法都将更新渲染页面，我们只需要特定方法执行如：push unshift shift 等


let oldArrayProtoType = Array.prototype // 获取原数组原型链
 
let proto = Object.create(oldArrayPrototype); //创建一个新的对象继承原数组原型链方法
 
['push','unshift','shift'].forEach(method=>{ // 将新的原型链中添加执行更新视图的方法并将当前this指针及参数传递
    protp[method] = function(){
        updateView()
        oldArrayProtoType[method].call(this,arguments)
    }
})

2.3.4 类型判断方法 observer 中添加数组判断并将新的原型链替换老原型链


function observer(target){
        if(typeof target !== 'object' && target ===  null ){
            retrun target
        }
+++    if(Array.isArray(target)){
+++         Object.setPrototypeOf(targer,proto)
+++     }
        for( let key in target ){
            defineReactive(target,key,target[key])
        }
}

data.push(4) 就可以触发更新视图方法了

Vue3响应式原理

vue2响应式的缺陷已经知道了那么vue3新解决方案 new Proxy()

vue3 中如果需要将属性变更为响应式属性需要使用到 reactive() 数据更新触发effect() 再次执行


<div id="app">
    <h5>{{state.title}}</h5>
</div>
<script src="https://unpkg.com/vue@next"></script>
import {reactive,effect,createApp} from 'Vue'
 
const app = createApp({
        setup(){
                let proxy = reactive({name:'zs'})
                effect(()=>{
                    console.log('通知视图更新',proxy.title)
                })
                proxy.name = 'ls'
                retrun {
                    state:proxy
                }
        }
})
 
app.mount('#app')
 
// effect 会执行两次 第一次是在页面初次渲染执行 第二次是数据发生变化后执行

1. 首先创建一个reactive 方法需要传入一个普通对象获得一个响应式对象

1.1 reactive 返回 createReactiveObject方法


// 这个方法需要返回的是个响应式对象
function reactive(target){
    retrun createReactiveObject(target)
}
 
// 创建响应式对象方法
createReactiveObject(target){
    
}

1.2

创建响应式方法思路

1.2.1

首先方法参数必须是一个对象创建一个函数 isObject 专门用来判断值是否为对象


function isObject(val){
    retrun typeof val === 'object' && val !== null
}


// 如果是不是对象则直接返回
// 如果是对象新增proxy事件监听
createReactiveObject(target){
    if(!isObject(target)){
       return target
    }
    
    let baseHandle = {
        // target 原对象 key当前的变更或获取的key receiver 代理后的proxy对象
        get(target,key,receiver){
            let res = Reflect.get(target,key,receiver)
            console.log('获取')
            // 返回值如果是个对象那么再次执行 reactive(res)
            return isObject(res)?reactive(res):res
            //return res
        },
        set(target,key,value,receiver){
            let res = Reflect.set(target,key,value,receiver)
            console.log('写入')
            return res
        },
        deleteProperty(target,key,receiver){
            let res = Reflect.deleteProperty(target,key)
            console.log('删除')
            return res
        }
    } 
    
    let observer = new Proxy(target,baseHandle)
    return observer
}
 
/*
    Reflect es6 方法对象的操作方法不修改原对象，返回处理过后的新对象
    Reflect.set 方法返回的是Boolean值
*/

运行结果

proxy.name = 'ls' proxy.name = [1,2,3] proxy.name.push(4)

console.log(proxy.name) // 写入方法执行获取方法执行可以成功打印修改后的值

无论字符还是数组方法都可以触发！

当数组执行

proxy.name = [1,2,3] proxy.name.push(4)

// 会发现会触发两次写入方法

// 分析原因首次写入的时候是给数组添加了一个新成员4 第二次写入是重写了数组的length

// 解决方法判断对象中是否有这个属性，有就是修改没有就是添加并且添加的值如果和原值一致那就不修改修改无意义


// 判断当前对象是是否包含了此属性
function hasOwn(target,key){
  return target.hasOwnProperty(key)
}


set(target,key,value,receiver){
            let res = Reflect.set(target,key,value,receiver)
            let oldValue = target[key]
            let hadkey = hasOwn(target,key)
            if(!hadkey){
                console.log('写入')
            }else if(oldValue !== value){
                console.log('修改')
            }
            retrun res
        },

1.2.2

为防止已经代理过的方法再次代理 createReactiveObject 方法中增加判断限制


let toProxy = new WeakMap();
let toRaw = new WeakMap(); 
 
function createReactiveObject(target){
       // 防止多次代理找到后直接返回
     let proxy = toProxy.get(target);
      if(proxy){
        return proxy
      }
      if(toRaw.has(target)){
        return target;
      }
    ...
    // 在retrun之前储存代理过后的值
    
    let observed = new Proxy(target,baseHandle);
    toProxy.set(target,observed);
    toRaw.set(observed,target);
    return observed
}
 
// 防止如下情况产生
情况1
let proxy = reactive({name:1})
reactive(proxy)
情况2
let proxy = reactive({name:1})
reactive({name:1})

1.3

effect 驱动页面进行更新

effect 首次加载执行一次如果数据更新再执行一次


// effect 执行方法
 
let obj = reactive({name:'zs'})
 
effect(()=>{
  console.log('驱动执行',obj.name)
})
 
obj.name = 'ls'

1.3.1 effect参数是个回调函数并默认执行一次那么先创建effect方法


// effect方法中 创建动态驱动方法并默认执行一次
 
function effect(fn){
   let effect = createReactiveEffect(fn) 
   effect()
}
 
// 创建驱动方法
function createReactiveEffect(fn){
    let effect = function(){
        run(fn)
    }
    retrun effect
}
 
// 方法执行
funtion run(fn){
    fn()
}

1.3.2

栈储存effect执行的方法

重点： effect更新时需要重新触发之前执行过的方法

如果effect多次调用每个储存的方法都要执行一次

思路：每个方法用数组储存起来，当数据更新时从数组中取出并执行，遵循先进后出的原则


// 用来存储effect中的方法 栈
let activeEffectStacks = [];

1.3.3

储存effect执行的方法


// 创建驱动方法
function createReactiveEffect(fn){
    let effect = function(){
     +++   run(effect,fn) // 将effect执行的方法传入到run方法中 并在执行时储存
    }
    retrun effect
}
 
// 方法执行
funtion run(effect,fn){
    +++ activeEffectStacks.push(effect); // 将effect中的参数方法储存
    fn()
    
}

1.3.4

由于数据变化时 effect 执行的一定是第一次执行时初始化需要获取的数据，所以get方法一定会执行

所以在get 方法中收集依赖也就是将栈中的方法关联在对应的监听参数中


get(target,key,receiver){
          let res = Reflect.get(target,key,receiver)
          console.log('获取')
          // 收集依赖把当前的key和effect对应起来
      +++ track(target,key); // 如果目标上的key变化了重新让数组中的effect执行即可
          return isObject(res)?reactive(res):result // 设置递归
        },
 
let targetsMap = new WeakMap(); // 集合和hash表
 
// 当前的key和effect对应起来
// targetsMap 中储存格式 key 为当前的原对象 value 为一个新的Map
// Map 中 key为当前 get中指定的key value为 一个新的Set
// 利用Set 只能唯一 判断如果Set中没有当前effect栈的方法就添加进去
 
// 格式为
//'{name:'zs'}':{
//    name:[()=>{console.log('驱动执行',obj.name)}]
// }
 
function track(target,key){
    let effect = activeEffectStacks[activeEffectStacks.length-1]; //栈取最后一个
    
    if(effect){
        let depsMap = targetsMap.get(target)
        if(!depsMap){
            targetsMap.set(target,depsMap = new Map)
        }
        let deps =  depsMap.get(key)
        if(!deps){
            depsMap.set(key,deps = new Set())
        }
        if(!deps.has(effect)){
          deps.add(effect);
        }
    }
}

set 方法中当值发生改变时驱动储存的方法执行


// set 中
 if(!hadKey){
+++  trigger(target,'add',key);
     console.log('新增属性')
 }else if(oldValue !== value){
+++   trigger(target,'set',key);
     console.log('修改属性')
 }
 
// trigger 方法中查找 
function trigger(target,type,key){
    // 根据原对象找到对应的map
    // 根据set当前的key取出Set() 中的方法 并依次执行
    let depsMap = targetsMap.get(target);
      if(depsMap){
        let deps = depsMap.get(key);
        if(deps){ // 将当前可以对应的effect方法依次执行
          deps.forEach(effect => {
              effect();
          });
        }
      }
}

1.3.5

run方法中储存方法由于默认执行一次之后栈中储存的方法也已经无用，方法已经绑定在了监听对象上，于是将run中储存的方法删除


// 防止方法储存执行出错新增了try finally 清除方法必定会执行
function run (effect,fn){ 
      try{
        activeEffectStacks.push(effect);
        fn();
      }finally{
        activeEffectStacks.pop();
      }
}

最后运行值修改过后effect将会再次执行

let obj = reactive({name:'zs'});

effect(()=>{

console.log('执行次数',obj.name);

})

obj.name = 'ls'

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/248149?site