Vue.js的单文件组件（.vue文件）代码结构推荐顺序

<template>
  <div></div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
  beforeDestroy() {},
  destroyed() {},
}; // 添加分号，修复报错 Missing semicolon.eslint
</script>

<style scoped>
</style>

或者如下，生命周期都放在methods之后：

<template>
  <div></div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
    };
  },
  methods: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>

<style scoped>
</style>

template：组件的模板部分，定义了组件的结构和布局；

script：组件的逻辑部分，包括组件的数据、计算属性、生命周期钩子函数、方法等。

• name：组件的名称，用于调试和递归组件中使用。
• components：引入和注册子组件。
• props：组件的属性，接收父组件传递的数据。
• data：组件的数据。
• computed：计算属性，根据数据计算衍生出来的属性。
• watch：监听数据的变化并做出相应的响应。
• methods：组件的方法。
• created：组件实例被创建之后调用。
• mounted：组件挂载到DOM后调用。
• beforeDestroy：组件销毁之前调用。
• destroyed：组件销毁后调用。

style：组件的样式部分，定义组件的样式。