Vue 2组件中定义变量

在Vue 2组件中定义变量的方式主要取决于这些变量的用途和作用域。以下是一些主要的定义方式：

1. 局部状态（响应式数据）
   使用data函数定义组件内的响应式变量。这些变量通常用于存储组件的状态，如用户输入、组件内部计算的值等。data返回的对象中的属性都是响应式的，意味着Vue会跟踪这些属性的变化，并在属性值改变时更新DOM。

export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0,
    };
  },
};

2. 计算属性（响应式地依赖于数据的计算结果）
   使用computed选项定义依赖于组件状态并且需要进行计算的变量。计算属性是基于它们的响应式依赖进行缓存的。只有当依赖项发生变化时，计算属性才会重新计算。

export default {
  data() {
    return {
      firstName: 'Jane',
      lastName: 'Doe',
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
};

3. 方法（非响应式，适用于事件处理器和复杂逻辑）
   使用methods选项定义组件方法。这些方法不是响应式的，但可以执行操作，如处理用户输入、计算值或触发其他方法。

export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    incrementCount() {
      this.count++;
    },
  },
};

4. 侦听器
   使用watch选项定义对数据变化的响应行为。侦听器非常适合执行异步操作或较为开销大的操作，响应特定数据的变化。

export default {
  data() {
    return {
      question: '',
    };
  },
  watch: {
    question(newQuestion, oldQuestion) {
      console.log(`从 "${oldQuestion}" 改变为 "${newQuestion}"`);
    },
  },
};

5. 局部注册的组件和指令
   还可以在组件内部定义其他组件或指令，这通常用于只在当前组件范围内使用的子组件或自定义指令。

import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
};

6. Props
   props定义了从父组件接受的数据。这些数据不是当前组件内部定义的，但可以在组件内部使用，就像定义在data中的响应式数据一样。

export default {
  props: ['title'],
};