vue源码-数据劫持

(1).简单的数据劫持

Const data = {
msg:”hello word”

}

Let vm = {};//模拟对象

//数据劫持;

//参数:对象,对象增加的属性,属性描述{get,set}

Object.defineProperty(vm,’mag’,{

get(){
console.log(‘get’,data.msg)

},

set(newValue){

console.log(‘set’,newValue);

If(newValue === data.msg){

return

}

Data.msg = newValue

}

})

1. .多属性数据劫持

Const data = {

name:”lisi”,

age:21

}

Let vm = {};//模拟对象

//数据劫持;

//参数:对象,对象增加的属性,属性描述{get,set}

function handleData(data){

Object.keys(data).forEach(key)=>{

Object.defineProperty(vm,key,{

get(){
console.log(‘get’,data[key])

},

set(newValue){

console.log(‘set’,newValue);

If(newValue === data.[key]){

return

}

Data.[key] = newValue//数据更新

Document.querySeletor(‘#app’).textcontent = data[key]//数据驱动数值操作

}

})

}

}

1. .属性是对象数据劫持

 <div id="app">

        content

    </div>

    <script src="">

        var data = {

            name: "lisi",

            age: 21,

            friend:{

                name1:"tom",

                age1:10

            }

        }

        const vm = {}

        walk(data)

        function walk(data) {

            //    判断是否有对象不是对象不处理

            if (!data || typeof data !== 'object') {

                return

            }

            Object.keys(data).forEach((key) => {

                // 定义响应式数据 对每个属性进行数据劫持

                defineReative(data, key)

            })

        }

 

        function defineReative(obj, key) {

            walk(obj[key])

            Object.defineProperty(vm, key, {

                get() {

                    console.log('get', data[key]);

                },

                set(newValue) {

                    console.log('set', newValue);

                    if (newValue === data[key]) {

                        return

                    }

                    data[key] = newValue

                    walk(obj[key])

                    // 数据驱动视图操作

                    document.querySelector('#app').textContent = data[key]

 

                }

            })

        }

        

        console.log(vm.name);

        va.name = 'lisi'

        console.log(vm.age);

        vm.age = 21;

        console.log(vm.frind.age1);

        vm.friend.age1 = 21