Vue数据双向绑定原理（vue2向vue3的过渡）

众所周知，Vue的两大重要概念：

数据驱动
组件系统

• 1
• 2

接下来我们浅析数据双向绑定的原理
一、vue2
1、认识defineProperty

vue2中的双向绑定是基于defineProperty的get操作与set操作，那么我们简单认识下defineProperty，
作用： 就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。
那么我们先来看下Object.getOwnPropertyDescriptor()，有定义方法就会有获取方法，对这就是与defineProperty相对的方法，它可以获取属性值。

var a ={
b:1,
c:2
}
console.log(Object.getOwnPropertyDescriptor(a,‘b’)); //查看获取b属性

这就是打印出来的结果，configurable的意思是可便利，enumerable的意思是可枚举，writable的意思是可写。
2、使用defineProperty实现简单的私有变量

知道了属性内部的属性值，我们可以使用defineProperty来实现一个私有变量。

var a ={
b:1,
c:2
}
Object.defineProperty(a,‘b’,{
writable:false //不可写
})
console.log(Object.getOwnPropertyDescriptor(a,‘b’)); //查看获取b属性

发现，改变不了a.b的值。

另外，还可以使用一个很快捷的方法实现私有变量

var a ={
b:1,
c:2
}
Object.freeze(a,‘b’); //冻结，可理解为变为私有属性
// Object.seal(a,‘b’); //configurable置为false
console.log(Object.getOwnPropertyDescriptor(a,‘b’)); //查看获取b属性

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119328259