Vue响应式原理分析

Vue响应式原理

数据驱动

数据响应式：

数据模型仅仅是普通的JavaScript对象，当修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率。

双向绑定：

数据改变会触发视图改变；

视图改变也会触发数据改变；

数据驱动：

开发过程中仅需要关注数据即可。

数据响应式核心原理-Vue 2

官方文档：

Vue 2.x响应式原理

核心：

Object.defineProperty

原理图：

模拟源码：

单个属性：

//模拟data
let data={
    msg:'Hello World'
}

//模拟vue中的实例
let vm={};

//数据劫持
Objct.defineProperty(vm,'msg',{
    enumerable:true,
    configurable:true,
    get(){
        console.log("get:"+data.msg);
        return data.msg;
    },
    set(newvalue){
        console.log("set:"+data.msg);
        if(data.msg === newvalue){
            return
        }
        data.msg = newvalue;
        document.querySelector("#app").textContent = data.msg;//绑定到DOM元素上
    }
})

多个属性：

let data = {
            msg: 'hello',
            count: 10
        }

        let vm = {};

        proxyData(data)

        function proxyData(data) {
            Object.keys(data).forEach(key => {
                Object.defineProperty(vm, key, {
                    enumerable: true,
                    configurable: true,
                    get() {
                        console.log('get:' + key + data.key);
                        return data.key;
                    },
                    set(newValue) {
                        console.log('set:' + key + data.key);
                        if (data.key === newValue) {
                            return
                        }
                        data.key = newValue;
                        document.querySelector("#app").textContent = data.key;
                    }

                })
            })
        }

        vm.msg = "Hello world"
        console.log(vm.msg)
    
        vm.count = 50
        console.log(vm.count)

数据响应式原理- Vue3

直接监听对象，而非属性。

核心:

Proxy

模拟源码：

        let data={
            msg:'hello',
            count:0
        }

        //模拟vue实例
        let vm = new Proxy(data,{
            get (target,key){
                console.log('get,key:',key,target[key])
                return target[key];
            },
            set(target,key,newValue){
                console.log('set,key:',key,newValue)
                if(target.key === newValue){
                    return
                }
                target[key] = newValue;
                document.querySelector("#app").textContent = target[key];
            }
        })
        vm.msg="Hello World";
       console.log(vm.msg);