Vue里各个参数的含义举例讲解

export default 里的各种参数

Vue.js 是一个用于构建用户界面的渐进式框架。在 Vue 组件中，export default 是用来定义组件的默认导出的语法。在 export default 后面，通常会有一个对象，这个对象包含了组件的各种选项。下面是一些常见的参数及其含义：

1. data: 这是组件的响应式数据对象。在 Vue 组件中，任何你想在模板中使用的数据都应该定义在这里。Vue 会自动将 data 对象中的属性转换为响应式的，这意味着当这些数据变化时，视图会自动更新。

    data() {
      return {
        message: 'Hello, World!'
      };
    }

2. props: 这是组件的属性，用于接收从父组件传递过来的数据。props 是只读的，组件不能修改传入的 props。

    props: ['title', 'count']

3. computed: 计算属性是基于它们的依赖进行缓存的属性。只有当依赖发生变化时，计算属性才会重新计算。它们通常用于模板中，作为响应式数据的辅助。

    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }

4. methods: 这是组件的方法集合，可以在组件的模板或生命周期钩子中调用。它们不是响应式的，但可以包含任何逻辑。

    methods: {
      reverseMessage() {
        this.message = this.message.split('').reverse().join('');
      }
    }

5. watch: 观察者对象，用于观察和响应 Vue 实例上的数据变化。可以为 data 中的属性或 computed 中的属性设置观察者。

    watch: {
      message(newValue, oldValue) {
        console.log(`Message changed from "${oldValue}" to "${newValue}"`);
      }
    }

6. components: 用于在当前组件中注册子组件。

    components: {
      MyComponent: () => import('./MyComponent.vue')
    }

7. directives: 自定义指令，允许你扩展 Vue 的内置指令。

    directives: {
      myDirective(el, binding) {
        // 指令逻辑
      }
    }

8. filters: 过滤器，用于在模板中对数据进行格式化。

    filters: {
      capitalize(value) {
        return value.charAt(0).toUpperCase() + value.slice(1);
      }
    }

9. mixins: 混入对象，允许你在一个组件中复用代码。

    mixins: [myMixin]

10. extends: 扩展另一个组件的选项。

     extends: MyComponent

11. provide 和 inject: 用于实现跨组件的属性注入。

     provide: {
       someProperty: this.someValue
     },
     inject: ['someProperty']

12. mapState: 这是 Vuex 中的一个辅助函数，用于将 Vuex 的 state 中的数据映射到组件的计算属性中。

     import { mapState } from 'vuex';
     ​
     computed: {
       ...mapState({
         count: state => state.count
       })
     }

这些参数提供了 Vue 组件的丰富功能，使得开发者可以构建复杂的用户界面。每个参数都有其特定的用途，通过合理使用它们，可以创建出功能强大且易于维护的 Vue 应用。