Vue2 和 Vue3 响应式原理的区别

远子 â€¢  2021å¹´01月19日

请看以下 Demo 代码:

<template>
  <div>
    <h1>动态属性:</h1>
    <ol>
      <li v-for="(val, key) in obj" :key="key">
        <span>键: {{ key }} => 值: {{ val }}&nbsp;</span>
        <button @click="remove(key)">删除属性</button>
      </li>
    </ol>
    <button @click="add">添加属性</button>
  </div>
</template> 

<script>
export default {
  name: "App",
  data() {
    return {
      obj: {
        default: "default",
      },
    };
  },
  methods: {
    add() {
      const timestamp = +new Date();
      this.obj[`key_${timestamp}`] = `val_${timestamp}`;
      console.log("obj:", this.obj);
    },

    remove(key) {
      delete this.obj[key];
      console.log(this.obj);
      this.obj = JSON.parse(JSON.stringify(this.obj));
    },
  },
};
</script>

这段代码的有以下功能:

  1. 点击 "添加属性" 按钮后向 obj 对象添加动态的属性 (当前的时间戳)
  2. li 标签中展示 obj 对象上的所有属性
  3. 点击 li 标签中的 "删除属性" 按钮, 可以删除当前属性

上边这段代码, 在 Vue2 中无效, 在 Vue3 中有效:

在 Vue2 中无效 (CodeSandbox)

在 Vue3 中有效 (CodeSandbox)

Object.defineProperty VS Proxy

哪种方式更好?

(完)