在Vue.js中，$符号是一个非常有用的工具，它提供了访问Vue实例的多种方法和属性。本文将深入探讨Vue中$的奥秘，并分享一些实战技巧。

一、Vue实例与$符号

Vue实例是Vue应用的核心，它包含了所有组件的数据和方法。$符号是Vue实例的一个全局属性，允许开发者直接访问实例的属性和方法。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    sayHello() {
      alert(this.message);
    }
  }
});

// 访问实例数据
console.log(this.$data.message); // 输出: Hello Vue!

// 调用实例方法
this.$options.sayHello(); // 弹出: Hello Vue!

二、.$符号常用方法

1. $data

$data属性可以访问Vue实例的数据对象。在组件内部，可以直接使用this.data来访问数据，但使用$data可以更加明确地表示数据来自Vue实例。

2. $props

$props属性可以访问组件的props。在组件内部，可以直接使用this.props来访问props，但使用$props可以避免与实例的数据混淆。

3. $el

$el属性可以访问组件的根DOM元素。这在某些情况下非常有用，例如需要直接操作DOM元素。

this.$el.style.color = 'red';

4. $refs

$refs属性可以访问组件内部的DOM元素或子组件实例。这在处理嵌套组件时非常有用。

<template>
  <div ref="myDiv">Hello, Vue!</div>
</template>

<script>
export default {
  mounted() {
    this.$refs.myDiv.style.color = 'blue';
  }
}
</script>

5. $watch

$watch方法可以监视Vue实例的数据变化。当数据发生变化时，可以执行相应的回调函数。

this.$watch('message', function(newValue, oldValue) {
  console.log('Message changed from ' + oldValue + ' to ' + newValue);
});

6. $on、$off和$emit

这三个方法用于事件监听和触发。$on用于监听事件，$off用于移除事件监听，$emit用于触发事件。

// 监听自定义事件
this.$on('my-event', function() {
  console.log('Event triggered!');
});

// 触发自定义事件
this.$emit('my-event');

三、实战技巧

  1. 使用$data和$props区分实例数据和props

在组件内部，使用$data和$props来访问实例数据和props，避免数据混淆。

  1. 使用$refs操作DOM元素或子组件

在处理嵌套组件或需要直接操作DOM元素时，使用$refs可以更加方便。

  1. 使用$watch监控数据变化

在需要根据数据变化执行某些操作时，使用$watch可以简化代码。

  1. 使用$on、$off和$emit处理事件

在需要监听和触发自定义事件时，使用$on、$off和$emit可以更加灵活地处理事件。

通过深入理解Vue中$符号的奥秘和实战技巧，可以更好地利用Vue框架进行开发，提高开发效率和代码质量。