// 對象屬性添加問題
const obj = { name: 'John' };
this.person = obj;

// 添加新屬性 - Vue 無法檢測
this.person.age = 30; // ? 非響應式

// 數(shù)組索引修改問題
this.numbers = [1, 2, 3];
this.numbers[1] = 99; // ? 非響應式

this.$set(target, propertyName/index, value)

export default {
  data() {
    return {
      user: {
        name: 'Alice',
        email: 'alice@example.com'
      }
    }
  },
  methods: {
    addUserAge() {
      // 錯誤方式 ?
      // this.user.age = 25; // 視圖不會更新
      
      // 正確方式 ?
      this.$set(this.user, 'age', 25);
      
      // 驗證
      console.log(this.user); // 包含 age 屬性，視圖會更新
    }
  }
}

export default {
  data() {
    return {
      colors: ['red', 'green', 'blue']
    }
  },
  methods: {
    updateColor(index, newColor) {
      // 錯誤方式 ?
      // this.colors[index] = newColor; // 視圖不會更新
      
      // 正確方式 ?
      this.$set(this.colors, index, newColor);
    }
  }
}

export default {
  data() {
    return {
      company: {
        name: 'TechCorp',
        departments: {
          engineering: {
            manager: 'John',
            size: 50
          }
        }
      }
    }
  },
  methods: {
    updateManager(name) {
      // 為嵌套對象添加新屬性
      this.$set(this.company.departments.engineering, 'manager', name);
      
      // 修改已有屬性（等效直接賦值但確保響應性）
      this.$set(this.company.departments.engineering, 'size', 55);
    }
  }
}

// 偽代碼實現(xiàn)
function set(target, key, val) {
  // 如果是數(shù)組且索引有效
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key);
    target.splice(key, 1, val);
    return val;
  }
  
  // 如果對象已存在該屬性
  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }
  
  // 獲取目標對象的觀察者實例
  const ob = target.__ob__;
  
  // 如果是非響應式對象，直接賦值
  if (!ob) {
    target[key] = val;
    return val;
  }
  
  // 將新屬性轉(zhuǎn)為響應式
  defineReactive(ob.value, key, val);
  
  // 通知依賴更新
  ob.dep.notify();
  return val;
}

<template>
  <div>
    <div v-for="(field, index) in dynamicForm" :key="index">
      <input v-model="field.value" :placeholder="field.placeholder">
      <button @click="removeField(index)">Remove</button>
    </div>
    <button @click="addField">Add Field</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicForm: []
    }
  },
  methods: {
    addField() {
      const newIndex = this.dynamicForm.length;
      
      // 使用 $set 確保新字段響應式
      this.$set(this.dynamicForm, newIndex, {
        value: '',
        placeholder: `Field ${newIndex + 1}`
      });
    },
    removeField(index) {
      // 使用 splice 確保響應式
      this.dynamicForm.splice(index, 1);
    }
  }
}
</script>

<template>
  <div>
    <div v-if="user.permissions.viewSalary">
      <p>Salary: {{ user.salary }}</p>
    </div>
    <button @click="grantSalaryAccess">Grant Salary Access</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Bob',
        permissions: {
          viewSalary: false
        }
      }
    }
  },
  methods: {
    grantSalaryAccess() {
      // 1. 添加權(quán)限屬性
      this.$set(this.user.permissions, 'viewSalary', true);
      
      // 2. 添加工資字段（不會暴露給沒有權(quán)限的用戶）
      setTimeout(() => {
        // 使用 $set 確保響應式
        this.$set(this.user, 'salary', 8500);
      }, 1000);
    }
  }
}
</script>

// 使用自定義工具方法
setNestedProperty(obj, path, value) {
  const keys = path.split('.');
  const lastKey = keys.pop();
  let current = obj;
  
  keys.forEach(key => {
    if (!current[key]) this.$set(current, key, {});
    current = current[key];
  });
  
  this.$set(current, lastKey, value);
}

// 使用示例
this.setNestedProperty(this.app, 'settings.theme.color', 'dark-blue');