vue 响应式原理,vue2.0 和vue3.0 双向绑定原理

数据响应式: 数据模型是JavaScript 的普通对象,当我们修改数据时,视图会进行更新,避免了操作DOM,提高了开发效率

双向绑定:数据改变,视图也会跟着变化;视图改变,随之数据也会改变

数据驱动:开发过程中需要关注数据本身,不需要关心数据是怎么渲染到视图的

直接看案例 vue2.0 双向绑定原理

<!-- body -->
  <div id="app">app</div>
  <script>
    let data={
      msg:"yuqi",
      count :20
    }

    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){
            if(data[key] === newValue){
              return
            }
            data[key]=newValue
            document.querySelector("#app").textContent = data[key]

          }
        })
      }))
    }
    
    vm.msg= "yuqi"
    console.log(vm.msg);

    // 单个属性
    // 参数一: 一个对象,参数二: 操作名称,参数三: 
    // Object.defineProperty(vm,"msg",{
    //   // 可枚举(可遍历)
    //   enumerable:true,
    //   // 可配置(可delete)
    //   configurable:true,
    //   get(){
    //     console.log("msg", data.msg);
    //     return data.msg
    //   },
    //   set(newValue){
    //     console.log("set",newValue);
    //     if(newValue === data.msg){
    //       return
    //     }
    //     data.msg = newValue
    //     document.querySelector("#app").textContent = data.msg
    //   }

    // })
    // vm.msg= "yuqi"
    // console.log(vm.msg);

 

 

 

接下来看Vue3.0 双向绑定原理:

使用SE6新的 Proxy ,它监听对象,非属性,

<div id="app">app</div>
  <script>
    let data={
      msg:"yuqi",
      count :20
    }
    const vm = new Proxy(data,{
      get(target,key){
        console.log("get",target[key],key);
        return target[key]
      },
      set(target,key,newValue){
        console.log("set",target[key],key,newValue);
        if(target[key] === newValue){
          return
        }
        target[key] = newValue
        document.querySelector("#app").textContent = target[key]
      }
    })
    vm.msg="hello"
    console.log(vm.msg);

总结vue2.0 双向绑定原型 : 是通过object.defineProperty 属性来绑定, 它有三个参数(操作的对象,操作对象的属性,操作属性详情(可遍历,可操作,get(),set()))

总结 vue3.0 使用proxy ,它有两个参数,一是数据源,二是操作get(t,k)和set(t,k,n)