简单讲解vue2.x（Object.defineProperty）

1.vue2.x(Object.defineProperty)

1.1首先看下面代码

 <script>
        let A = {
          a: 1,
          b: 2,
          c: ['a', 'b', 'c']
        }
        let B = {

        }
        //在vue2.x中把 A 中的属性和值放在 B中，并且B中的属性在操作（例如：修改，设置）时都可以进行拦截
        Object.keys(A).forEach(key => {
           //console.log(key) 打印下 key 值为a, b, c
            // Object.defineProperty() 接受三个参数
            Object.defineProperty(B, key, {
                get() {
                    return A[key]
                },
                set() {

                }
            })
        })
		console.log(B) //打印B
    </script>

我把A中的属性和值都放在B中，B的打印结果，如下图：
你会发现B中的属性（a,b,c）都有get() 和set（）

1.2当我们修改B的某一属性值的时候都会触发set，我们来试验一下，看以下代码块：

<script>
 		//举个例子
        let A = {
          a: 1,
          b: 2,
          c: ['a', 'b', 'c']
        }
        let B = {

        }
        //在vue2.x中把 A 中的属性和值放在 B中，并且B中的属性在操作（例如：修改，设置）时都可以进行拦截
        Object.keys(A).forEach(key => {
           //console.log(key) 打印下 key 值为a, b, c
            // Object.defineProperty() 接受三个参数
            Object.defineProperty(B, key, {
                get() {
                    return A[key]
                },
                set() {
					console.log('触发了set')
                }
            })
        })
        B.a = 'xxxx' //修改B中的a为'xxxx'
		console.log(B) //打印B
    </script>

当我把B中的a改为’xxxx’,再来看B的打印结果。
B中的a被修改成’xxxx’,同时触发了set中的console 如下图：

那我们在修改一下B中的c我们看看还会不会触发set

<script>
 		//举个例子
        let A = {
          a: 1,
          b: 2,
          c: ['a', 'b', 'c']
        }
        let B = {

        }
        //在vue2.x中把 A 中的属性和值放在 B中，并且B中的属性在操作（例如：修改，设置）时都可以进行拦截
        Object.keys(A).forEach(key => {
           //console.log(key) 打印下 key 值为a, b, c
            // Object.defineProperty() 接受三个参数
            Object.defineProperty(B, key, {
                get() {
                    return A[key]
                },
                set() {
					console.log('触发了set')
                }
            })
        })
        B.c[0] = 'xxxx' //修改B中c的下标为0的元素修改为'xxxx'
		console.log(B) //打印B
    </script>

我把B中c的下标为0的元素修改为’xxxx’，我们再看一下B的打印结果：
你会发现虽然值被改了，但是并没有触发set()

不知道大家有没有发现为什么修改B.a的时候会触发set()？
是不是因为a有get() 和 set()
B.c[0]是不是没有get和set
如下图：

所以这就是Object.defineProperty的一个缺点。
因为你在对一个对象和数据做修改的时候没有监听到，就没有数据劫持 没有数据劫持 那么就没有双向绑定 没有双向绑定 那么数据改变视图就不会发生改变。(ps: vue2.x提供了$set)
虽然我们可以把c中属性循环再添加get set 但是如果我们在vue项目中的data的属性是一个多层嵌套，性能无法保证。

2.vue3.x(proxy)

让我们一起看一下proxy的实现方式
我们同样把A赋值给B

<script>
 		//举个例子
        let A = {
          a: 1,
          b: 2,
          c: ['a', 'b', 'c']
        }
        //具体Proxy参数自行查看
        let B = new Proxy(A, {
        	get(target, key, receiver) {
                return Reflect.get(target, key, receiver)
            },
            set(target, key, value, receiver) {
                return Reflect.set(target, key, value, receiver)
            }
        })
		console.log(B) //打印B
    </script>

让我们看一下B的打印结果：