Silent 的小站

Vue 2 实例上的 this 对象承载了与当前组件实例相关的所有核心属性、数据、方法以及一些内部的工具方法。理解这些属性的作用对于深入掌握 Vue 2 的工作原理和编写高效、可维护的代码至关重要。

以下是 Vue 2 中 this 对象的各种属性及其作用和主要应用场合的详细解释：

一、数据和状态相关

this.$data
- 作用： 指向组件实例的数据对象。在 data 选项中定义的所有响应式属性的原始对象。
- 主要应用场合：
  - 不常用：通常你直接通过 this.propertyName 访问数据即可，因为 Vue 会将 _data 中的属性代理到实例 this 上。
  - 调试：在开发过程中，查看组件的原始数据状态。
  - 高级插件开发：需要直接操作或遍历组件的原始数据对象时。
  - Vuex/Pinia 插件集成: 某些场景下可能需要直接访问或修改 $data 来手动触发更新或进行状态同步(不推荐一般开发中使用)。
- 示例：
```
1data() {
2  return { message: 'Hello' };
3},
4mounted() {
5  console.log(this.$data.message); // 输出 'Hello'
6  console.log(this.message); // 同样输出 'Hello'
7}
```

this.$props

作用： 指向组件实例接收到的 props 数据对象。所有在 props 选项中定义的属性都在这里。
主要应用场合：
- 不常用：和 $data 类似，通常直接通过 this.propName 访问即可。
- 调试：检查组件接收到的所有 props 值。
- 循环遍历 props：如果你需要遍历所有传入的 props（例如，构建一个通用表单组件）。

示例：

1<!-- Parent.vue -->
2<ChildComponent :name="userName" :age="userAge" />
3
4<!-- ChildComponent.vue -->
5<script>
6export default {
7  props: ['name', 'age'],
8  mounted() {
9    console.log(this.$props.name); // 输出传入的 name
10    console.log(this.name); // 同样输出传入的 name
11  }
12};
13</script>

二、DOM 元素和组件实例引用

this.$el
- 作用： 组件实例的根 DOM 元素。
- 主要应用场合：
  - 集成第三方库：当需要将组件的 DOM 元素传递给需要原生 DOM 元素的第三方 JavaScript 库（如图表库、滚动插件）。
  - 直接 DOM 操作：在极少数情况下，需要直接对组件的根 DOM 进行操作（例如，测量尺寸、焦点管理）。请谨慎使用，这通常不是推荐的 Vue 方式，应优先考虑数据驱动。通常结合 this.$nextTick 使用。
- 示例：
```
1mounted() {
2  // 在组件挂载后，可以直接访问到它对应的真实 DOM 元素
3  this.$el.style.border = '1px solid red';
4}
```
this.$parent
- 作用： 指向当前组件的父组件实例（如果当前组件是根实例，则为 undefined）。
- 主要应用场合：
  - 不推荐：通常不建议使用 $parent 进行组件间的通信，因为它打破了组件的封装性，使得组件依赖于特定的父组件结构，难以复用和测试。应优先使用 props 和 events。
  - 调试：在调试复杂组件树时，查看父组件的状态。
  - 特定场景：在非常特定的、紧密耦合的父子组件关系中（例如，表单子组件注册到父表单组件），当 props 和 events 变得异常复杂时，可能会作为备选方案（依然不是最佳实践）。
- 示例：
```
1// ChildComponent.vue
2methods: {
3  callParentMethod() {
4    if (this.$parent && typeof this.$parent.someMethod === 'function') {
5      this.$parent.someMethod();
6    }
7  }
8}
```

this.$root

作用： 指向当前组件树的根 Vue 实例。
主要应用场合：
- 全局事件总线：在没有 Vuex 或类似的全局状态管理的情况下，可以将 $root 作为简易的事件总线，进行非父子组件间的通信（this.$root.$emit / this.$root.$on）。
- 访问全局数据或方法：如果根实例上挂载了某些全局共享的数据或方法，可以通过 $root 访问。
- 不推荐：滥用 $root 容易导致代码耦合，难以追踪数据流。推荐使用 Vuex/Pinia 进行状态管理。

示例：

1// ComponentA.vue
2methods: {
3  sendMessage() {
4    this.$root.$emit('global-message', 'Hello from A!');
5  }
6}
7
8// ComponentB.vue
9created() {
10  this.$root.$on('global-message', (msg) => {
11    console.log('Received global message:', msg);
12  });
13},
14beforeDestroy() {
15  this.$root.$off('global-message'); // 清理，防止内存泄露
16}

this.$children

作用： 指向当前组件的直接子组件实例组成的数组。顺序不保证和模板中的顺序一致。
主要应用场合：
- 不推荐：与 $parent 类似，不建议用于常规通信，因为它依赖于子组件的实例结构，难以维护。
- 通过子组件方法批量操作：例如，一个 Tab 容器组件需要通知所有子 Tab 项去更新它们的选中状态。
- 调试：检查组件的直接子组件列表。

示例：

1// ParentComponent.vue
2methods: {
3  resetAllChildren() {
4    this.$children.forEach(child => {
5      if (child.reset) { // 假设子组件有 reset 方法
6        child.reset();
7      }
8    });
9  }
10}

this.$refs

作用： 一个对象，包含了所有带有 ref 属性的 DOM 元素或子组件实例。
主要应用场合：
- 直接访问 DOM 元素：获取输入框焦点、测量 DOM 尺寸等。
- 调用子组件方法：直接调用子组件暴露的方法，而不需要通过事件($emit)传递。
- 集成第三方 DOM 库：与需要原生 DOM 元素的第三方库交互。
注意：$refs 仅在组件首次渲染之后才可用，并且不是响应式的。如果你在 created 钩子中访问它，可能还未挂载。应在 mounted 或配合 this.$nextTick 使用。

示例：

1<template>
2  <div>
3    <input type="text" ref="myInput">
4    <ChildComponent ref="myChild" />
5    <button @click="focusInput">Focus Input</button>
6    <button @click="callChildMethod">Call Child Method</button>
7  </div>
8</template>
9<script>
10import ChildComponent from './ChildComponent.vue';
11export default {
12  components: { ChildComponent },
13  methods: {
14    focusInput() {
15      this.$refs.myInput.focus();
16    },
17    callChildMethod() {
18      this.$refs.myChild.someMethodInChild();
19    }
20  },
21  mounted() {
22    console.log(this.$refs.myInput); // 真实 DOM 元素
23    console.log(this.$refs.myChild); // ChildComponent 的实例
24  }
25};
26</script>

三、内容分发（Slots）相关

this.$slots

作用： 一个对象，包含了组件通过 <slot> 标签分发的所有非作用域插槽内容（VNode 数组）。键名是插槽的名称（default 代表默认插槽）。
主要应用场合：
- Render 函数：当编写 Render 函数而不是模板时，需要手动渲染插槽内容。
- 判断插槽是否存在：在组件内部逻辑中判断某个插槽是否有内容传入，从而决定是否渲染某个部分。

示例：

1// MyComponent.vue
2render(h) {
3  return h('div', [
4    this.$slots.header, // 渲染具名插槽 'header'
5    this.$slots.default // 渲染默认插槽
6  ]);
7}
8// 使用时：
9// <MyComponent>
10//   <template v-slot:header><h1>标题</h1></template>
11//   <p>这是默认内容</p>
12// </MyComponent>

this.$scopedSlots

作用： 一个对象，包含了组件通过 <slot> 标签分发的所有作用域插槽内容（返回 VNode 数组的函数）。键名是插槽的名称。
主要应用场合：
- Render 函数：当编写 Render 函数且需要处理作用域插槽时，你需要调用这些插槽函数并传入作用域数据。
- 功能组件：用于创建那些只负责逻辑处理，不渲染实际 DOM 元素的组件，通过作用域插槽将数据暴露给父组件。
⚠️ 注意： 在 Vue 3 中，$scopedSlots 已被废弃并合并到 $slots 中。$slots 现在可以直接调用以获取作用域插槽内容。

示例：

1// MyComponent.vue (带有作用域插槽)
2render(h) {
3  return h('div', [
4    this.$scopedSlots.item({ item: { id: 1, name: 'Vue' } }), // 调用作用域插槽并传入数据
5  ]);
6}
7// 使用时：
8// <MyComponent>
9//   <template v-slot:item="slotProps">
10//     <span>{{ slotProps.item.name }}</span>
11//   </template>
12// </MyComponent>

四、事件和特性传递

this.$attrs

作用： 一个对象，包含了父组件传递给当前组件的所有非 props 属性。这些属性不会被 Vue 自动识别为 props，也不会被自动添加到组件的根元素上（如果设置了 inheritAttrs: false）。
主要应用场合：
- 穿透属性传递：当你想把父组件传入的任意 HTML 属性（如 id, class, data-* 等）或非 Vue 约定属性，直接传递给子组件的某个特定元素，而不是默认的根元素时。
- 构建高阶组件或封装原生 HTML 元素：例如，你封装一个 <MyButton> 组件，希望它能像 <button> 一样接受所有原生 HTML 属性。
- 通常与 v-bind="$attrs" 结合使用。

示例：

1<!-- Parent.vue -->
2<MyCustomInput type="email" placeholder="Enter email" data-test="email-input" class="fancy-input" />
3
4<!-- MyCustomInput.vue -->
5<template>
6  <!-- inheritAttrs: false 避免自动添加到 div 上 -->
7  <div class="wrapper">
8    <!-- v-bind="$attrs" 将所有非 props 属性绑定到 input 元素上 -->
9    <input v-bind="$attrs" />
10  </div>
11</template>
12<script>
13export default {
14  inheritAttrs: false, // 阻止 $attrs 自动作为普通 HTML 属性添加到根元素
15  props: ['value'], // value 是 prop，不会出现在 $attrs 中
16  // ...
17  mounted() {
18    // this.$attrs 会包含 { type: 'email', placeholder: 'Enter email', 'data-test': 'email-input', class: 'fancy-input' }
19    console.log(this.$attrs);
20  }
21};
22</script>

this.$listeners

作用： 一个对象，包含了父组件传递给当前组件的所有自定义事件监听器。这些监听器不会被 Vue 自动识别并内部处理。
主要应用场合：
- 穿透事件传递：当你想把父组件传入的事件监听器，直接传递给当前组件的某个特定元素或内部子组件时。
- 构建高阶组件：例如，你封装一个 <MyButton> 组件，希望它能像 <button> 一样接受所有原生 DOM 事件（如 @click, @focus 等）。
- 通常与 v-on="$listeners" 结合使用。
⚠️ 注意： 在 Vue 3 中，$listeners 已被废弃，事件监听器现在直接包含在 $attrs 中，你可以通过 v-bind="$attrs" 传递所有非 prop/非事件的属性以及事件。

示例：

1<!-- Parent.vue -->
2<MyCustomInput @focus="onFocus" @blur="onBlur" @input="onInput" />
3
4<!-- MyCustomInput.vue -->
5<template>
6  <div class="wrapper">
7    <!-- v-on="$listeners" 将所有传入的事件监听器绑定到 input 元素上 -->
8    <input v-bind="$attrs" v-on="$listeners" />
9  </div>
10</template>
11<script>
12export default {
13  inheritAttrs: false, // 假设 $attrs 也会透传
14  // ...
15  mounted() {
16    // this.$listeners 会包含 { focus: [Function: onFocus], blur: [Function: onBlur], input: [Function: onInput] }
17    console.log(this.$listeners);
18  }
19};
20</script>

五、响应式和生命周期工具

this.$watch(source, callback, [options])

作用： 强制创建一个观察者，响应式地观察一个表达式或一个函数返回的值的变化。当值发生变化时，执行回调函数。
参数：
- source (String | Function): 要观察的表达式字符串或函数，可以是 data 属性、计算属性、props。
- callback (Function): 变化时执行的回调函数，接收 (newValue, oldValue) 作为参数。
- options (Object, 可选): deep (深度监听对象/数组)、immediate (立即执行一次回调)。
主要应用场合：
- 执行异步或开销较大的操作：当某个数据变化时，需要执行复杂的逻辑或网络请求。
- 深度监听：需要观察对象或数组内部属性的变化时 (deep: true)。
- 清理副作用：例如，当数据变化时清除之前的定时器或取消之前的网络请求。
- 与 computed 的区别：computed 是声明式的，用于派生新值；watch 是命令式的，用于执行副作用。

示例：

1data() {
2  return {
3    question: ''
4  };
5},
6watch: {
7  // 声明式 watch (等同于 this.$watch)
8  question(newQuestion, oldQuestion) {
9    console.log(`Question changed from "${oldQuestion}" to "${newQuestion}"`);
10    // 可以在这里执行异步操作
11    this.getAnswer();
12  }
13},
14mounted() {
15  // 命令式 watch
16  const unwatch = this.$watch('question', (newVal, oldVal) => {
17    console.log(`(Mounted) Question changed: ${newVal}`);
18  }, { immediate: true });
19
20  // unwatch() 可以在需要时停止监听
21  // this.$once('hook:beforeDestroy', unwatch); // 在销毁前停止监听
22}

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

作用： 向响应式对象添加新属性，或修改数组中指定索引的值，并确保这是响应式的。这是 Vue 2 克服 Object.defineProperty 无法侦测到新属性添加和数组索引修改的限制的关键方法。
主要应用场合：
- 为对象添加新属性：当你在 Vue 实例创建后，需要给 data 中已有的对象动态添加新属性，并希望它们是响应式的。
- 修改数组元素：当你需要通过索引直接修改数组元素的值，并希望触发视图更新。
⚠️ 注意： Vue 3 由于使用 Proxy，不再需要 $set 和 $delete。

示例：

1data() {
2  return {
3    user: { name: 'Alice' },
4    items: ['apple', 'orange']
5  };
6},
7methods: {
8  addNewProperty() {
9    // Vue 2 中直接 user.age = 30; 是非响应式的
10    this.$set(this.user, 'age', 30);
11  },
12  updateArrayElement() {
13    // Vue 2 中直接 items[0] = 'banana'; 是非响应式的
14    this.$set(this.items, 0, 'banana');
15  }
16}

this.$delete(target, propertyName/index)

作用： 从响应式对象中删除属性，或删除数组中指定索引的元素，并确保触发视图更新。
主要应用场合：
- 删除对象属性：当你需要从 data 中已有的响应式对象中删除一个属性，并希望视图同步更新时。
- 从数组中删除元素：删除数组中指定索引的元素，并触发更新。
⚠️ 注意： Vue 3 由于使用 Proxy，不再需要 $set 和 $delete。

示例：

1data() {
2  return {
3    user: { name: 'Alice', age: 30 },
4    items: ['apple', 'orange']
5  };
6},
7methods: {
8  deleteProperty() {
9    this.$delete(this.user, 'age');
10  },
11  deleteArrayElement() {
12    this.$delete(this.items, 0); // 从数组中删除第一个元素
13  }
14}

this.$nextTick([callback])

作用： 将回调函数延迟到下一个 DOM 更新循环之后执行。在 Vue 响应式数据变化后，DOM 不会立即更新，而是会等到当前事件循环的末尾进行批处理更新。$nextTick 确保你的代码在 DOM 更新完成后才执行。
主要应用场合：
- 在 DOM 更新后访问 DOM：当数据改变后，你需要访问或操作更新后的 DOM 元素（例如，获取新元素的尺寸，初始化滚动条）。
- 集成第三方 DOM 操作库：这些库可能需要在 DOM 稳定后再执行。

示例：

1data() {
2  return {
3    message: 'Hello'
4  };
5},
6methods: {
7  updateMessage() {
8    this.message = 'Hello World'; // 数据已改变，但 DOM 尚未更新
9    console.log(this.$refs.myDiv.textContent); // 仍然是 'Hello'
10
11    this.$nextTick(() => {
12      // DOM 已经更新
13      console.log(this.$refs.myDiv.textContent); // 输出 'Hello World'
14      this.$refs.myDiv.focus();
15    });
16  }
17}

this.$forceUpdate()

作用： 迫使 Vue 实例重新渲染。它会跳过 shouldComponentUpdate（如果有）检查，强制重新执行组件的 render 函数。
主要应用场合：
- 极少使用：通常，如果你发现需要 this.$forceUpdate()，这意味着你可能违反了 Vue 的响应式原则或设计模式。
- 非响应式数据源更新：当你的组件依赖的数据源不是响应式的（例如，直接修改了一个由第三方库管理的非响应式对象），且你又不想将其变为响应式时。
- 调试：在某些复杂调试场景下，手动触发更新。

示例：

1data() {
2  return {
3    obj: { a: 1 }
4  };
5},
6methods: {
7  // 假设 obj 是非响应式的，或来自外部但未被 Vue 劫持
8  // 这种直接修改非响应式属性的方式不会触发更新
9  changeNonReactiveData() {
10    this.obj.a = 2; // 这在 Vue 2 中不会触发更新
11    this.$forceUpdate(); // 强制组件重新渲染以显示变化
12  }
13}

六、事件系统

this.$on(event, callback)

作用： 监听当前组件实例上的自定义事件。
主要应用场合：
- 组件自身事件监听：在组件内部监听自己的事件。
- 事件总线模式：作为 $root 或单独的 Vue 实例作为事件总线时使用。

示例：

1// Component.vue
2mounted() {
3  this.$on('my-custom-event', this.handleCustomEvent);
4},
5methods: {
6  handleCustomEvent(payload) {
7    console.log('Custom event received with:', payload);
8  },
9  triggerMyEvent() {
10    this.$emit('my-custom-event', 'data'); // 组件自己触发自己的事件 (不常见)
11  }
12},
13beforeDestroy() {
14  this.$off('my-custom-event', this.handleCustomEvent); // 清理事件监听器
15}

this.$once(event, callback)

作用： 监听一个自定义事件，但只触发一次。事件触发后，监听器会自动移除。
主要应用场合：
- 单次性初始化或清理：例如，在某个条件满足时只执行一次的操作。

示例：

1mounted() {
2  this.$once('initial-setup', () => {
3    console.log('This will only log once.');
4    // 执行一次性设置
5  });
6  this.$emit('initial-setup'); // 第一次触发
7  this.$emit('initial-setup'); // 第二次触发，不会有任何输出
8}

this.$off([event, callback])

作用： 移除自定义事件监听器。
参数：
- event (String, 可选): 要移除的事件名称。
- callback (Function, 可选): 要移除的回调函数。
主要应用场合：
- 防止内存泄露：在 beforeDestroy 钩子中移除通过 $on 注册的事件监听器，特别是全局事件总线上的监听器。
- 动态控制事件监听：根据应用状态动态添加或移除监听器。
- 无参数调用 (this.$off()): 移除实例上所有事件监听器。（不常用）
- 只传事件名 (this.$off('my-event')): 移除实例上该事件名的所有监听器。

示例：

1mounted() {
2  this.$on('data-loaded', this.onDataLoaded);
3},
4beforeDestroy() {
5  this.$off('data-loaded', this.onDataLoaded); // 清理
6  // 或：this.$off(); // 移除所有监听器
7}

this.$emit(event, [...args])

作用： 触发当前实例上的一个自定义事件。父组件可以通过 v-on 或 @ 来监听这个事件。
参数：
- event (String): 要触发的事件名称。
- ...args (任意类型): 传递给事件监听器的额外参数。
主要应用场合：
- 子组件向父组件通信（推荐方式）：当子组件需要通知父组件某个事情发生或传递数据时。

示例：

1<!-- ChildComponent.vue -->
2<template>
3  <button @click="handleClick">点击我</button>
4</template>
5<script>
6export default {
7  methods: {
8    handleClick() {
9      this.$emit('button-clicked', 'Hello from child!'); // 触发事件并传递数据
10    }
11  }
12};
13</script>
14
15<!-- Parent.vue -->
16<template>
17  <ChildComponent @button-clicked="handleChildClick" />
18</template>
19<script>
20import ChildComponent from './ChildComponent.vue';
21export default {
22  components: { ChildComponent },
23  methods: {
24    handleChildClick(message) {
25      console.log('Child button was clicked:', message);
26    }
27  }
28};
29</script>

七、高级选项和生命周期方法

this.$options

作用： 当前组件实例的初始化选项对象。包含了 data, methods, props, computed, components 等你定义的所有选项。
主要应用场合：
- 插件开发：插件可能需要访问或修改组件的选项。
- 自定义合并策略：在一些高级场景下，你可能需要检查或扩展组件的默认选项。
- 查看组件名称：this.$options.name。

示例：

1created() {
2  console.log(this.$options.name); // 输出组件的 name 选项 (如果有定义)
3  console.log(this.$options.props); // 获取 props 定义
4}

this.$mount([elementOrSelector])

作用： 手动挂载 Vue 实例到指定的 DOM 元素。
主要应用场合：
- 没有 el 选项：当你创建 Vue 实例时没有提供 el 选项，需要手动触发挂载。常见于单元测试或动态创建组件。
- 单文件组件的入口文件：new Vue({ render: h => h(App) }).$mount('#app');

示例：

1const vm = new Vue({
2  template: '<div>Hello {{ message }}</div>',
3  data: { message: 'World' }
4});
5
6// 此时 vm 尚未挂载，DOM 元素还不存在
7vm.$mount('#app'); // 将 vm 挂载到 <div id="app"></div> 上
8// 或 vm.$mount(document.body.appendChild(document.createElement('div')));

this.$destroy()
- 作用： 完全销毁一个 Vue 实例，清理它的子组件、指令、事件监听器。
- 主要应用场合：
  - 清理动态创建的组件：当你动态创建了组件实例（例如，用 $mount 创建的），并希望在不再需要时将其完全从内存中移除。
  - 单页应用中的页面级组件销毁：在某些情况下，为了彻底清除所有副作用，可能会在路由切换时手动销毁旧页面组件（但通常由 Vue Router 自动处理）。
- 示例：
```
1const vm = new Vue({ /* ... */ }).$mount('#app');
2// ...一段时间后
3vm.$destroy(); // vm 的所有事件监听器和子组件都将被清理
```

总结：

Vue 2 的 this 对象提供了强大的能力，让开发者能够访问和控制组件的各个方面。理解这些属性的区别和推荐用法是关键：

响应式数据：优先使用 this.propName 直接访问 data 和 props 属性。
组件通信：优先使用 props (父传子) 和 $emit (子传父)。
直接引用：$refs 是最推荐的获取子组件实例或 DOM 元素的方式。$parent, $children, $root 需谨慎使用，以避免代码耦合。
响应式限制：Vue 2 中，$set 和 $delete 是处理向响应式对象添加新属性或直接通过索引修改数组的关键工具。
异步 DOM 操作：$nextTick 是在你需要访问 DOM 更新后的状态时不可或缺的。
强制更新：$forceUpdate 几乎总是避免使用的，它往往提示着代码中可能存在非响应式更新的问题。
事件总线：$on, $off, $emit, $once 可以配合 $root 构建简单的事件总线，但在大型应用中通常被 Vuex/Pinia 取代。

掌握这些属性能够帮助你更好地驾驭 Vue 2 的开发，编写出更健壮、更高效的应用程序。

Vue 2 实例上的 this 对象

一、数据和状态相关

二、DOM 元素和组件实例引用

三、内容分发（Slots）相关

四、事件和特性传递

五、响应式和生命周期工具

六、事件系统

七、高级选项和生命周期方法