Vue3響應(yīng)式原理分析(Proxy(obj,{get(){},set(){}}))

更新時間：2025年10月28日 09:02:25 作者：@AfeiyuO

文章詳細(xì)分析了Vue3的響應(yīng)式原理,包括Proxy對象的get和set方法,以及雙向數(shù)據(jù)綁定,通過代碼示例展示了Vue3和Vue2在set方法上的區(qū)別,說明了Vue3能夠正確修改值而Vue2不能

1、Proxy響應(yīng)式的get方法

<!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>Document</title>
    <script>
        let obj = {
            name:"Vue",
            age:8
        }
        // Proxy 代理  new Proxy()創(chuàng)建一個代理對象
        // new Proxy(要代理的這個對象，{get(),set()})

        let obj2 = new Proxy(obj,{
            get(target,property){
                // 什么時候執(zhí)行？ 當(dāng)我們訪問 obj2 的某個屬性的時候
                // target和 property 表示什么？
                // target 是這個obj對象 ，property就是我們訪問的這個屬性
                console.log("執(zhí)行了get",target,property);
                return target[property]

            }
        })
        console.log(obj2.age);
        console.log(obj2.name);
        // obj2 是一個代理對象，屬性和值的obj一樣
    </script>
</head>
<body>
    
</body>
</html>

執(zhí)行效果

2、Proxy響應(yīng)式的set方法

 <script>
        let obj = {
            name:"Vue",
            age:8
        }
        // Proxy 代理  new Proxy()創(chuàng)建一個代理對象
        // new Proxy(要代理的這個對象，{get(),set()})

        let obj2 = new Proxy(obj,{
            get(target,property){
                // 什么時候執(zhí)行？ 當(dāng)我們訪問 obj2 的某個屬性的時候
                // target和 property 表示什么？
                // target 是這個obj對象 ，property就是我們訪問的這個屬性
                console.log("執(zhí)行了get",target,property);
                return target[property]

            },
            set(target,property,newVal){
                // 數(shù)據(jù)劫持的時候 執(zhí)行這里的代碼   newVal就是 boj2.age = 9  =號 后面的這個值
                console.log("執(zhí)行了set",target,property,newVal);

                // 在這里進(jìn)行修改這個屬性成為新的值，下次訪問，才能拿到新值
                target[property] = newVal

            }
        })
        obj2.age = 9;  //修改值 觸發(fā)執(zhí)行了set
        console.log(obj2.age)
         
        
        /*
            自己總結(jié):
            1:obj2.age = 9;  //修改值 觸發(fā)執(zhí)行了set   就會執(zhí)行set里面的console.log   newVal=9 但是實(shí)際return是8沒有改到
            2:在set里面修改值 才會變 才真正改了

            
        */

    </script>

效果圖：

3、雙向數(shù)據(jù)綁定

<body>
    <input type="text" id="ipt">
    <p id="op"></p>
    <script>

        let obj = {
            txtVal : "初始值"
        }

        function myReactive(obj){
            return new Proxy(obj,{
                get(target,property){
                    return target[property]
                },
                set(target,property,newVal){
                    // 對象劫持  數(shù)據(jù)劫持
                    ipt.value = newVal
                    op.innerHTML = newVal
                    target[property] = newVal
                }
            })
        }

        let objRet = myReactive(obj);

        // 綁定初始值
        ipt.value = objRet.txtVal;
        op.innerHTML = objRet.txtVal

        
        ipt.addEventListener("input",e=>{
            objRet.txtVal = e.target.value  //觸發(fā)了set
        })

    </script>
</body>

效果圖：

4、Vue2和Vue3set的區(qū)別

Vue3的set修改值

<script>
        let obj = [10,20,30]

        let obj2 = new Proxy(obj,{
            get(target,property){
                console.log("執(zhí)行了get",target,property);
                return target[property]

            },
            set(target,property,newVal){
                console.log("執(zhí)行了set",target,property,newVal);
            }
        })
        obj2[0] = 1000
         
        /*
            對比：
                Vue2 將初始值改為數(shù)組，在下面就修改不了了  而且觸發(fā)不了set
                Vue3 就可以 

        */ 
    </script>

如圖：

Vue2的set修改值（修改不了）

<body>

    <input type="text" id="oipt">
    <p id="op"></p>

    <script>
        let obj = {};
        // let val = "默認(rèn)值";
        let = [10,20,30]

        Object.defineProperty(obj,"iptVal",{
            get(){
                return val;
            },
            set(newVal){
                oipt.value =newVal
                op.innerHTML = newVal
                // val = newVal
            }
        })
        // 設(shè)置初始值
        oipt.value = obj.iptVal;
        op.innerHTML = obj.iptVal;

        oipt.addEventListener("keyup",function(e){
            // 發(fā)布者，影響訂閱者的
            obj.iptVal[0] = e.target.value  //觸發(fā)了set
        })

    </script>
</body>

效果圖：set 就修改不到