<button id="jhcbw"><acronym id="jhcbw"></acronym></button>
<em id="jhcbw"></em>
    1. <th id="jhcbw"><pre id="jhcbw"><rt id="jhcbw"></rt></pre></th>

        <ol id="jhcbw"><object id="jhcbw"></object></ol>
        首頁>技術分享>vue小程序開發之對響應式數據的理解

        vue小程序開發之對響應式數據的理解

        vue越來越火了,但是很多前端開發小伙伴只會使用不太清楚底層原理,或者對vue框架只知其一不知其二,那么今天我們就探討一下響應式數據的理解。

        很多面試官會問:請說一下你對響應式數據的理解。

        相信很多前端開發小伙伴可以回答出來,是通過數據劫持,利用Object.defineProperty將屬性進行劫持(只會劫持已存在的屬性),數組則是vue重寫了數組方法來實現的。


        但是,我猜會有80%的人可能連Object.defineProperty怎么用都不知道?。?!

        首先,我們可以看一下,defineProperty方法的用法;

        語法: 

        Object.defineProperty(obj, prop, descriptor); 

        第一個參數obj為:要定義屬性的對象。 

        第二個參數prop為:要定義或修改的屬性的名稱或Symbol。 

        第三個參數descriptor為:要定義或修改的屬性描述符。 

        返回值為:被傳遞給函數的對象。


        既然熟悉了defineProperty的語法和用法,那我們接下來就用js寫一個簡單的數據綁定示例深刻的學習一下。

        WX20201124-224634.png


        上面Object.defineProperty是vue2.0所采用的數據雙向綁定原理;

        Vue官方新出的Vue3.0版本中,使用了ES6中的Proxy方法,這個方法比defineProperty性能更好,也更方便使用;

        那么接下來我們,簡單示范下,這個方法的強大之處;


        let obj = {};

        obj = new Proxy(obj,{

            get: function(target,prop){  //target指的是監聽的對象也就是obj,prop是這個對象的屬性

                return target['prop'];

            },

            set: function(target,prop,value){ //同上,value是屬性的值

                return target['prop'] = value;

            }

        });


        我們可以對比發現,proxy方法并不需要對對象中的屬性,一一監聽,而是監聽的整個對象。


        由上圖標注,我們可以清晰明了的理解響應式數據的原理了。

        更多的鄭州網站建設前端開發技術,請繼續關注可尚文化的官網。


        免费大波美女做受视频
        <button id="jhcbw"><acronym id="jhcbw"></acronym></button>
        <em id="jhcbw"></em>
        1. <th id="jhcbw"><pre id="jhcbw"><rt id="jhcbw"></rt></pre></th>

            <ol id="jhcbw"><object id="jhcbw"></object></ol>