2021-07-16

• List item
  数据驱动与数据劫持

1. 数据驱动。
   Mvvm模式，在操作model的时候把data传给mv= new vue（），view视图层改版，mv也改变，model的data给mv的时候也会引起view的改变。

3.

4. {{msg}} 5.

6.

7.

2数据劫持
解决数据双向绑定问题，es5中利用object.definePropoty(要定义其上的属性和方法，要定义或修改的参数，具体的方法)。Es6中用proxy来实现代理，复杂数据类型很方便。

<script>

    const data ={
        msg:"hello world"
    }

    let vm = {}

    Object.defineProperty(vm,'msg',{
        get(){
            console.log('get',data.msg);
        },
        set(newValue){
            console.log('set',newValue)
            if(newValue === data.msg){
                return;
            }
            msg = newValue;
        }
    })
    console.log(vm.msg);
    vm.msg = 'hello vue'

对多属性：要对其key进行遍历，利用object.keys方法来对key进行遍历，实现动态。

<script>

    const data ={
        msg:"hello world",
        age:14
    }
    let vm = {}
    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;
}
})
})
}
handleData(data);
console.log(vm.msg);
vm.msg = ‘hello vue’
console.log(vm.age);
vm.age = 12

Proxy代理实现更为简便

<script>
   const data = {
       name:"dwd",
       age:12,
       frident:{
        name:"dd",
        age:12
       }
   }
   let vm = new Proxy(data,{
       get(target,key){
           console.log('get',target[key])
           return target[key]
       },
       set(target,key,newValue){
           console.log("set",newValue)
        if(target[key]===newValue){
            return
        }
        target[key] = newValue;
        document.querySelector("#app").textContent = target[key];    
    }
   })
   console.log(vm.name);
   vm.age = 20