Vue components props order All In One

Vue components props order All In One

vue template / vue component options order

Vue 组件参数顺序

按照一般情况下修改频率的大小，从上到下的顺序，统一组件的字段的结构，方便快速查找对应的类型，提高后续开发效率，避免一个组件出现多个 watch 类似情况的发生;

// 反例 ❌ 
/*
1. 没有组件名称
2. 随意组织 vue 组件参数字段的顺序
3. 存在重复的组件参数字段
4. 组件私有样式不使用 scoped
5. 存在没有使用的组件或库
*/

<template>
    <div class="conatiner-class">
      ...
    </div>
</template>

<script>
import _ from 'lodash';
import SearchSelect from './SearchSelect';

export default {
    // 1. 没有组件名称
    data () {
        return {
            //
        };
    },
    props: {
        //
    },
    watch: {},
    methods: {
     // 方法...
    },
    computed: {}, 
    mounted () {},
    destroyed () {},
    watch: {
      // 重复组件参数
    }, 
    components: {
        // SearchSelect,
    },
};
</script>

<style lang="scss">
// 4. 组件私有样式不使用 scoped
</style>

<style lang="scss">
// 全局样式
</style>

// 正例 ✅  
/*
1. 有唯一组件名称
2. 按照一定规则组织 vue 组件参数字段的顺序 (按照一般情况下修改频率的大小，从上到下的顺序)
3. 不存在重复的组件参数字段
4. 组件私有样式使用 scoped
5. 不存在没有使用的组件或库
*/

<template>
    <div class="conatiner-class">
      ...
    </div>
</template>

<script>
// import _ from 'lodash';
// import SearchSelect from './SearchSelect';

export default {
    name: 'CreativeSearcher',
    components: {
        // SearchSelect,
    },
    props: {
        //
    }, 
    data () {
        return {
            //
        };
    }, 
    computed: {}, 
    watch: {},
    mounted () {},
    destroyed () {},
    methods: {
     // 方法一般代码最多，放到最后...
    },
};
</script>

<style lang="scss" scoped>
// 组件私有样式使用 scoped
</style>

refs

vue & order of properties in components

https://eslint.vuejs.org/rules/order-in-components.html

https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended

https://v3.vuejs.org/style-guide/#component-instance-options-order-recommended

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---