06.Vue3的面试必背技能点（五）：Object.defineProperty 和 Proxy 原理深入分析；

一、前言总结

1、两者的区别

defineProperty()

• Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象现有属性，并返回此对象。
• 如果存在深层的嵌套对象关系，需要深层次的进行监听，造成了性能的极大问题。

Proxy()

• Proxy 可以监听一个对象或者数组；
• Proxy监听一个对象，对该对象的所有操作都会进入监听操作，就完全可以代理所有的属性。包括新增属性和删除属性；

2、代码应用示例

vue3 可以直接操作数组或者对象的属性；

<!-- setupDemo13.vue -->
<template>
  <div>
      <div>
          <div>监听对象：{
  {person}}</div>
          <button @click="updateObject">修改对象</button>
      </div>
      <div>
          <div>监听数组：{
  {personList}}</div>
          <button @click="updateArray">修改数组</button>
      </div>
  </div>
</template>

<script>

import { reactive } from 'vue