this.$set(this.formData, 'department', currTreeItem) 是 Vue.js 提供的一个方法，用于向响应式对象中添加新的属性，并确保这个新属性是响应式的（即，当该属性发生变化时，视图会自动更新）。让我们详细解析这个方法及其作用。

1. this.$set 的作用

• 添加响应式属性：在 Vue.js 中，如果你直接向一个响应式对象添加一个新的属性，这个新属性默认不是响应式的。使用 this.$set 可以确保新添加的属性是响应式的。
• 更新数组或对象：除了添加新属性，this.$set 也可以用来更新数组中的元素或对象中的属性，确保这些变化是响应式的。

2. 方法签名

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

• target：要修改的目标对象或数组。
• propertyName/index：要添加或更新的属性名（对于对象）或索引（对于数组）。
• value：要设置的值。

3. 在你的代码中的应用

this.$set(this.formData, 'department', currTreeItem);

• this.formData：目标对象，通常是表单的数据模型。
• 'department'：要添加或更新的属性名。
• currTreeItem：要设置的值，通常是一个包含 name 和 id 的对象。

具体解释

假设 currTreeItem 的结构如下：

const currTreeItem = {
  name: '内科',
  id: 1
};

执行 this.$set(this.formData, 'department', currTreeItem); 后，this.formData 对象将包含一个新的属性 department，其值为 currTreeItem。由于使用了 this.$set，这个新属性 department 是响应式的，任何对它的更改都会自动反映在视图中。

4. this.$set 的定义位置

this.$set 是 Vue.js 实例的一个方法，它属于 Vue.js 的响应式系统。具体来说：

• Vue 2：

  • this.$set 是 Vue 实例的一个方法，用于向响应式对象中添加新属性。
  • 它内部使用 Vue.set 方法实现响应式更新。

• Vue 3：

  • 在 Vue 3 中，this.$set 已被移除，因为 Vue 3 的响应式系统基于 Proxy，能够自动处理新属性的响应式。
  • 如果你使用的是 Vue 3，不需要使用 this.$set，直接赋值即可：

    this.formData.department = currTreeItem;
    

    这会自动使 department 属性成为响应式的。

5. Vue 2 中的替代方案

如果你使用的是 Vue 2，并且不想使用 this.$set，可以考虑以下替代方案：

• 预先定义属性：

  data() {
    return {
      formData: {
        department: {}
        // 其他属性
      }
      // 其他数据属性
    };
  }
  

  这样，department 属性在组件创建时就已定义，是响应式的。

• 使用 Vue.set：

  Vue.set(this.formData, 'department', currTreeItem);
  

  这与 this.$set 的效果相同。

6. 示例

假设你在处理树形选择事件时，需要将选中的节点信息赋值给 formData.department：

methods: {
  handleTreeCheck(currNode) {
    const currTreeItem = {
      name: currNode.label,
      id: currNode.id
    };
    // 使用 $set 确保 department 是响应式的
    this.$set(this.formData, 'department', currTreeItem);
    // 或者，如果 department 已经存在，可以直接赋值
    // this.formData.department = currTreeItem;
  }
}

7. Vue 3 的情况

如果你使用的是 Vue 3，响应式系统已经基于 Proxy 实现，直接赋值即可：

methods: {
  handleTreeCheck(currNode) {
    const currTreeItem = {
      name: currNode.label,
      id: currNode.id
    };
    // 直接赋值，department 会自动成为响应式的
    this.formData.department = currTreeItem;
  }
}

总结

• this.$set：在 Vue 2 中用于向响应式对象中添加新属性，确保其响应式。
• Vue 3：不需要使用 this.$set，直接赋值即可，因为 Proxy 提供了更强大的响应式支持。
• 替代方案：在 Vue 2 中，可以通过预先定义属性或使用 Vue.set 来实现类似的功能。

根据您使用的 Vue 版本，选择合适的方法来管理响应式数据。

在 Vue.js 中，$ 开头的属性和方法被称为 实例属性 和 实例方法，它们是 Vue 实例（组件实例）自带的，用于提供一些内置功能或访问 Vue 内部的状态和方法。以下是一些常见的 $ 开头的属性和方法：

1. $data

• 作用：访问组件实例的 data 对象。
• 示例：

  console.log(this.$data);
  // 输出组件的 data 对象
  

2. $props

• 作用：访问组件接收到的 props。
• 示例：

  console.log(this.$props);
  // 输出组件接收到的 props 对象
  

3. $el

• 作用：访问组件的根 DOM 元素。
• 注意：在 Vue 3 中，$el 仅在有根元素的情况下可用。
• 示例：

  console.log(this.$el);
  // 输出组件的根 DOM 元素
  

4. $refs

• 作用：访问模板中通过 ref 指定的子组件或 DOM 元素。
• 示例：

  <template>
    <div>
      <input ref="myInput" />
      <ChildComponent ref="child" />
    </div>
  </template>
  
  <script>
  export default {
    mounted() {
      // 访问 DOM 元素
      this.$refs.myInput.focus();
      // 访问子组件实例
      this.$refs.child.someMethod();
    }
  };
  </script>
  

5. $parent

• 作用：访问父组件实例。
• 注意：过度使用 $parent 可能导致组件之间的耦合度过高，影响代码的可维护性。
• 示例：

  // 在子组件中
  console.log(this.$parent);
  // 输出父组件实例
  

6. $root

• 作用：访问根组件实例。
• 示例：

  console.log(this.$root);
  // 输出根组件实例
  

7. $children

• 作用：访问子组件实例的数组。
• 注意：在 Vue 3 中，$children 已被移除，推荐使用 $refs 来访问子组件。
• 示例（Vue 2）：

  console.log(this.$children);
  // 输出子组件实例的数组
  

8. $slots

• 作用：访问插槽内容。
• 示例：

  <!-- 父组件 -->
  <ChildComponent>
    <p>插槽内容</p>
  </ChildComponent>
  
  <!-- 子组件 -->
  <template>
    <div>
      <slot></slot>
    </div>
  </template>
  
  <script>
  export default {
    mounted() {
      console.log(this.$slots);
      // 输出插槽内容的信息
    }
  };
  </script>
  

9. $scopedSlots

• 作用：访问作用域插槽（Vue 2）。
• 注意：在 Vue 3 中，$scopedSlots 已被移除，插槽统一使用 v-slot 语法。
• 示例（Vue 2）：

  <!-- 父组件 -->
  <ChildComponent>
    <template v-slot:default="slotProps">
      <p>{{ slotProps.text }}</p>
    </template>
  </ChildComponent>
  
  <!-- 子组件 -->
  <template>
    <div>
      <slot text="插槽内容"></slot>
    </div>
  </template>
  

10. $attrs

• 作用：访问传递给组件的 HTML 属性（不包括 props）。
• 示例：

  <!-- 父组件 -->
  <ChildComponent class="my-class" id="child-id" />
  
  <!-- 子组件 -->
  <template>
    <div>
      <p>attrs: {{ $attrs }}</p>
    </div>
  </template>
  

11. $listeners

• 作用：访问传递给组件的事件监听器（Vue 2）。
• 注意：在 Vue 3 中，$listeners 已被移除，推荐使用 v-on="$listeners" 或其他方式处理事件。
• 示例（Vue 2）：

  <!-- 父组件 -->
  <ChildComponent @custom-event="handleEvent" />
  
  <!-- 子组件 -->
  <template>
    <div>
      <button @click="$emit('custom-event')">触发事件</button>
    </div>
  </template>
  

12. $emit

• 作用：触发自定义事件。
• 示例：

  <template>
    <button @click="handleClick">点击触发事件</button>
  </template>
  
  <script>
  export default {
    methods: {
      handleClick() {
        this.$emit('my-event', '参数');
      }
    }
  };
  </script>
  

13. $forceUpdate

• 作用：强制 Vue 实例重新渲染。
• 注意：不推荐频繁使用，可能导致性能问题。
• 示例：

  this.$forceUpdate();
  

14. $nextTick

• 作用：在下次 DOM 更新循环结束后执行回调函数。
• 示例：

  this.$nextTick(() => {
    // DOM 已更新
    console.log('DOM 已更新');
  });
  

15. $watch

• 作用：侦听组件实例上的数据变化。
• 示例：

  this.$watch('someData', (newVal, oldVal) => {
    console.log('someData 变化了:', newVal, oldVal);
  });
  

总结

除了 this.$set，Vue.js 中还有许多 $ 开头的实例属性和方法，它们提供了丰富的功能来帮助开发者更高效地操作和管理组件。以下是一些常用的 $ 方法和属性：

• $data：访问组件的 data 对象。
• $props：访问组件的 props。
• $el：访问组件的根 DOM 元素。
• $refs：访问通过 ref 指定的子组件或 DOM 元素。
• $parent：访问父组件实例。
• $root：访问根组件实例。
• $emit：触发自定义事件。
• $forceUpdate：强制组件重新渲染。
• $nextTick：在下次 DOM 更新后执行回调。
• $watch：侦听数据变化。

这些 $ 方法和属性在 Vue.js 开发中非常常用，掌握它们可以大大提升开发效率和代码质量。