简书链接:ObjectdefineProperty的作用，和vue中用到的技巧
文章字数：620,阅读全文大约需要2分钟

Object.defineProperty 是 JavaScript 中的一个方法，用于定义对象的属性。它可以用来添加、修改或定义对象的属性特性，例如设置属性的值、可枚举性、可写性和可配置性等。

在 Vue 中，Object.defineProperty 有时候用于实现一些高级的属性监测和响应式机制。Vue.js 使用了这个方法来实现其响应式数据绑定系统。Vue 的响应式系统通过劫持对象的属性访问，从而在属性被访问或修改时触发特定的行为，例如更新视图。

以下是一些在 Vue 中使用 Object.defineProperty 的技巧：

实现响应式数据绑定： Vue 使用 Object.defineProperty 来劫持数据对象的属性访问，以便在属性值变化时触发视图更新。这样，你可以通过简单地修改数据属性来更新视图，而无需手动操作 DOM。

计算属性： Vue 中的计算属性也可以使用 Object.defineProperty 来实现。通过定义一个计算属性的 getter 函数，可以根据依赖的数据动态计算属性的值，当依赖数据发生变化时，计算属性会自动更新。

侦听器： Vue 中的侦听器（watchers）也可以使用 Object.defineProperty 来实现。你可以监听某个数据属性的变化，然后执行特定的操作，例如在属性变化时发送网络请求或执行其他逻辑。

自定义指令： 如果你在 Vue 中编写自定义指令，有时可能需要使用 Object.defineProperty 来操作元素的属性，以实现一些特定的行为。

插件开发： 如果你开发 Vue 插件，可能需要使用 Object.defineProperty 来扩展 Vue 实例的功能，或者为组件添加全局方法或属性。

需要注意的是，虽然 Object.defineProperty 在 Vue 内部使用广泛，但在一般的开发中并不经常直接使用它，因为它需要编写大量的代码来实现一些基本的功能。Vue 的响应式系统已经封装了这些细节，使得开发者可以更方便地进行数据绑定和管理。

从 Vue 3 开始，Vue 引入了 Proxy 对象作为响应式系统的基础，取代了 Object.defineProperty，以提供更好的性能和更灵活的响应式能力。

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
  <title>Vue-like Example with Object.defineProperty</title>
</head>
<body>
  <div id="app">
    <p>Counter: {{ counter }}</p>
    <button @click="increment">Increment</button>
  </div>

  <script>
    const app = document.getElementById('app');
    
    const data = { counter: 0 };

    Object.defineProperty(data, 'counter', {
      get() {
        console.log('Counter accessed');
        return this._counter;
      },
      set(value) {
        console.log('Counter updated');
        this._counter = value;
        app.querySelector('p').textContent = `Counter: ${value}`;
      }
    });

    const methods = {
      increment() {
        this.counter += 1;
      }
    };

    const vm = { ...data, ...methods };
  </script>
</body>
</html>