Vue数据双向绑定的原理

Vue中通过 Object.defineProperty() 实现的双向数据绑定。

Object.defineProperty(obj, prop, descriptor) 函数的意思是给一个对象增加或修改属性并返回该对象。

参数解释

• obj：对象
• prop：要增加或修改的属性
• descriptor：要增加或修改的属性描述符

返回值

返回增加或修改属性之后的对象

例子

 <script>
   let age = 18
   let person = {
      name:'张三',
      gender:'男'
   }
   // 给person对象增加age属性，并使用get和set方法
   Object.defineProperty(person,'age',{
     get(){
        return age
     },
     set(value){
       age=value
     }
   })
   console.log(person)
   console.log(person.age)
   console.log("修改age的值为20");
   age = 20//修改age的值  
   console.log("对象变为：" + person.age);
   console.log("修改对象的age值为22");
   person.age = 22//修改对象的age值
   console.log("变量变为：" + age);

</script>

测试一下

输出：

上面的例子中

修改变量age的值为20，对象属性age也变为20；

修改对象属性age为22，变量age也变为22。

所以它们是双向绑定的关系，这也是vue实现双向绑定的原理。