1
// 源数据
2
let person = {
3
  name: "张三",
4
  age: 18,
5
};
6

7
// 模拟Vue2响应式处理
8
let p = {};
9
Object.defineProperty(p, "name", {
10
  // 可配置：允许后续删除属性
11
  configurable: true,
12
  get() {
13
    console.log("读取了name属性，收集依赖");
14
    return person.name;
15
  },
16
  set(value) {
17
    console.log("修改了name属性，触发视图更新");
18
    person.name = value;
19
  },
20
});
21

22
Object.defineProperty(p, "age", {
23
  configurable: true,
24
  get() {
25
    console.log("读取了age属性，收集依赖");
26
    return person.age;
27
  },
28
  set(value) {
29
    console.log("修改了age属性，触发视图更新");
30
    person.age = value;
31
  },
32
});

1
<template>
2
  <div>
3
    <p>姓名：{{ person.name }}</p>
4
    <p>年龄：{{ person.age }}</p>
5
    <p>性别：{{ person.sex }}</p>
6
    <p>爱好：{{ person.hobby }}</p>
7
    <button @click="addSex">新增性别属性</button>
8
    <button @click="deleteName">删除姓名属性</button>
9
    <button @click="updateHobby">修改第一个爱好</button>
10
  </div>
11
</template>
12

13
<script>
14
import Vue from "vue";
15
export default {
16
  data() {
17
    return {
18
      person: {
19
        name: "张三",
20
        age: 18,
21
        hobby: ["吃饭", "学习"],
22
      },
23
    };
24
  },
25
  methods: {
26
    addSex() {
27
      // 错误写法：直接新增属性，视图不更新
28
      // this.person.sex = '女';
29

30
      // 正确写法1：组件内使用this.$set
31
      this.$set(this.person, "sex", "女");
32
      // 正确写法2：全局使用Vue.set（需导入Vue）
33
      // Vue.set(this.person, 'sex', '女');
34
    },
35
    deleteName() {
36
      // 错误写法：直接删除属性，视图不更新
37
      // delete this.person.name;
38

39
      // 正确写法1：组件内使用this.$delete
40
      this.$delete(this.person, "name");
41
      // 正确写法2：全局使用Vue.delete
42
      // Vue.delete(this.person, 'name');
43
    },
44
    updateHobby() {
45
      // 错误写法：下标修改数组，视图不更新
46
      // this.person.hobby[0] = '逛街';
47

48
      // 正确写法1：使用this.$set
49
      this.$set(this.person.hobby, 0, "逛街");
50
      // 正确写法2：使用数组重写方法（如splice）
51
      // this.person.hobby.splice(0, 1, '逛街');
52
    },
53
  },
54
};
55
</script>

1
// 源数据
2
let person = {
3
  name: "张三",
4
  age: 18,
5
};
6

7
// 模拟Vue3响应式：Proxy + Reflect
8
const p = new Proxy(person, {
9
  // 拦截属性读取（如 p.name）
10
  get(target, propName) {
11
    console.log(`读取了${propName}属性，收集依赖`);
12
    // 反射读取源对象属性
13
    return Reflect.get(target, propName);
14
  },
15
  // 拦截属性修改或新增（如 p.name = '李四' 或 p.sex = '女'）
16
  set(target, propName, value) {
17
    console.log(`修改/新增了${propName}属性，触发视图更新`);
18
    // 反射修改源对象属性
19
    return Reflect.set(target, propName, value);
20
  },
21
  // 拦截属性删除（如 delete p.name）
22
  deleteProperty(target, propName) {
23
    console.log(`删除了${propName}属性，触发视图更新`);
24
    // 反射删除源对象属性
25
    return Reflect.deleteProperty(target, propName);
26
  },
27
});

1
import { reactive } from "vue";
2

3
// 响应式对象
4
const user = reactive({
5
  name: "itclanCoder",
6
  age: 10,
7
  address: {
8
    city: "上海",
9
    district: "浦东新区",
10
  },
11
});
12

13
// 响应式数组
14
const hobby = reactive(["编程", "读书", "运动"]);
15

16
// 直接修改属性，自动响应式
17
user.name = "李四";
18
user.address.city = "北京"; // 嵌套对象也支持
19
hobby[0] = "前端开发"; // 数组下标修改
20
hobby.push("旅游"); // 数组方法修改
21
delete user.age; // 删除属性

1
import { ref } from "vue";
2

3
// 基本类型响应式
4
const count = ref(0);
5
const msg = ref("Hello Vue3");
6

7
// 脚本中操作：需要 .value
8
count.value += 1;
9
msg.value = "Hello 响应式";
10

11
// 对象类型响应式（内部自动转为reactive）
12
const product = ref({
13
  name: "手机",
14
  price: 3999,
15
});
16
product.value.price = 4999; // 脚本中仍需 .value
17

18
// 模板中使用：无需 .value
19
/*
20
<template>
21
  <p>{{ count }}</p>
22
  <p>{{ msg }}</p>
23
  <p>{{ product.name }}：{{ product.price }}</p>
24
</template>
25
*/